I've converted the DontHitMe demo to Javascript and WebGL. Click below to run it. Use WASD or the cursor keys to move. There's no sound, no collision detection and no scoring, but you should get the idea of what a completed game would look like. The goal is to not hit anything!
I'm encouraged by the number of times the demos were run last week. Hit counts are always problematic due to RSS readers and multiple attempts by the same person, but here are the numbers I have: In the last 8 days, the page images were hit 1051 times. The StarrySky script (used by both demos, so probably cached) was hit 308 times. Once WebGL is found and runs, it loads the sky texture images, which were hit 255 times. So about 25% of you managed to run the demos. Since I started my statistics logging server in Part 59, only 1285 logs have been sent, so this is a substantial number of runs for the demos. We'll see how this part turns out, and what kind of counts I get for a finished game. Javascript issuesThis demo was about 3,000 lines of code. Add the milligram library and the other two demos, and I've converted 11,000 lines of C++ to WebGL. Here are the issues I still have:
Once I had a fair amount of C++ code translated, I decided to check performance. The Simplex Noise routines are about as simple as you can get -- just array references and arithmetic. I called them a million times to see what numbers I would get. The test script is here. Reload several times to get an idea of the range. It seems to vary a lot!
This a just a preliminary test and doesn't mean much. Since there's so little code inside each Simplex Noise call, I have a big component of the time spent just on the function calls. Still, it's encouraging that Chrome and Firefox did so well on this code. The Android number is a bit depressing though. To keep this code running well on tablets with WebGL, I'm going to have to be really careful with CPU. It would be interesting to know how well this code would run in Java as an Android app. I'm not sure it's worth the time to figure the IDE out at this point. If someone out there wants to try it, email me. Several comments last week pointed me to asm.js Using this, I could compile my C++ code to Javascript. I'll take a look at that, but it's not as if the code can be used without change. I still have libraries to interface to. I'm not sure what the performance of a demo translated by hand vs. compiled to Javascript will look like. I do know the resulting Javascript will be useless to other JS programmers. Rendering IssuesRendering performance on my desktop is still at 60fps, which is the fastest the Javascript "requestAnimationFrame" feature supports. I haven't tried to instrument it more carefully and compare to the C++ implementation. On the Nexus 10 tablet, it manages around 40-50 fps. There's some bug in my texture atlas shader which leads to a bad edge on the side of the saucer. I don't remember seeing this when running OpenGL 2.1 on the desktop, so I'm not sure what's causing it. On the other hand, this demo has had weird problems under desktop OpenGL 3.2 on some of my machines. I've seen the splotchy ship texture go completely wrong, and the walls of the towers disappear. I don't see any of this under WebGL. UI IssuesTo finish this off, I need some kind of menu/options screens. I will try to do this with overlaid HTML elements, but I'm not sure how exactly I can control the look across browsers. On my own machine, I have fonts set large, which breaks a lot of pages on the net. I'm not sure if you can really do this right. If I don't use HTML, I have to draw menus and so on with WebGL. That means either having a font texture and copying characters out of it, or using the Canvas support to create textures on the fly. I haven't researched that at all, and don't know how hard or slow it is. Finally, the touch interface for the game is a problem. Javascript gets touch events with multiple points (one for each finger.) The user needs to be able to control this with two fingers -- one for turning and one for speed. Right now, the buttons at bottom-left just respond to the first touch, and don't work correctly even for that. I'm not sure if I can just attach touch event handlers to buttons and get what I want. I think I need to attach them to the canvas and check each touch point against all the controls. That means knowing exactly where they are on the screen. I'm not sure how to do that. Finishing the GameI need to add collision detection, since the whole point of the game is to avoid hitting things. Then there needs to be lap timers and a scoreboard for high scores. The track needs to be smoother and more interesting, and there needs to be sound. I'll probably play with the textures and world a bit more. My inspiration for this was the game Proun, but I doubt I'll go to the trouble of multiple tracks, an internet high score board, etc. I hope to have this finished soon and move on to some kind of simple game server with both WebGL and C++ clients.
blog comments powered by Disqus |