Javascript Game Development

Youtube put an easter egg in their new player allowing you to play Snake while watching a video. Some guys on Reddit noticed that and an admin asked for a similar game in Flash or Javascript to be shown on their site when no ads are displayed.

So, i never ever put my hands on Javascript, for some reason i don’t like dynamically typed languages. Today i plucked up all my courage and formulated a goal: create a Snake clone in Javascript with the Canvas element. First thing was finding a proper IDE after messing around for a bit in Notepad++. I used the first one that came up in the Google search called Aptana. It comes in two flavors: as an Eclipse plugin or a stand-alone IDE. I used the later, not wanting to polute my current Eclipse installation. Next i had to hunt down some info on Javascript itself as i no idea how to use it. Mozilla has a nice introduction which enlightened me. Javascript is not so bad after all! It’s actually a pretty powerful beast, altough i have to get used to some concepts like prototypes and so on. Now i was ready to tackle the last bit, getting to know the Canvas element and how to get keyboard input. For this i consulted the Javascript reference of the W3C school. And that was pretty much all i needed. After 3 hours of learning and applying i now have a fully functional snake clone in Javascript 🙂

Your browser doesn’t support the Canvas element! Update to the latest Firefox, Chrome or Safari!

If you want to include that in your own site use this bit of html to load the script and insert the canvas with the proper size and id:

Not all that impressive graphically but i tried to keep it as clean as possible. You can find the source here. I started documenting it but then gave up as i wanted to have results fast. I don’t know whether this is the recommended way to develop games with Javascript and the Canvas element but it sure worked out for me. I can see how one could easily create a nice library for general game development with Javascript (and indeed there are a couple, just search via Google).

That was fun :p

Libgdx, Andengine & Rokon Micro-Benchmarks

Nicolas send me a his benchmark suite for libgdx, AndEngine and Rokon. Each engine renders a scene of 32×32 pixel sprites in a grid, a total of 336 sprites, filling up nearly all of the screen. I performed the tests on 2 devices, a Hero with 1.5 and a Nexus One with 2.2

Rokon didn’t start on neither my Hero nor my Nexus one.

– Hero: ~17fps
– Nexus One: ~41fps

– Hero: ~51fps
– Nexus One: ~51fps

Yes, you read that right, the libgdx version, which uses the SpriteBatch class for rendering, performs equally well on both devices. Now, in my opinion the test is not entirely fair as AndEngine has to perform a lot of other stuff besides the rendering. However, the main reason why it sucks so much on the Hero is that each sprite rendering issues a lot of glTranslate/glPushMatrix/glPopMatrix commands as well as rendering each quad seperately (the VBO containing the vertices is bound only once though).

You can find the source for the benchmark here.
An apk can be found here.

The more i see these semi-scene graph engines like Rokon, AndEngine or Cocos2D on Android the more i believe that they are not the way to go. You can’t please every genre with these engines and if you have to get better performance you’ll have to dive deep into the source of these engines and modify it. Simple puzzle games or your average Snake clone are a no brainer with those engines. However, something like Replica Island is pretty much out of reach when using these libs at the moment.

I still believe that especially beginners in Android game programming should start out with AndEngine & co. Their nice APIs are much easier to use than the down to the metal approach of libgdx (altough it has nice helper classes in the math and graphics package which should ease your programming pain a lot).

Box2D bug hunting in libgdx

It’s been a while since i’ve coded anything significant for libgdx. Well, today i found an hour to start actually working on the Box2D test bed port. It went pretty smooth so far. I found a couple of bugs in the JNI Wrapper (nothing concerning the motor or joint stuff though), implemented a base class for all tests, much like in the original testbed and included a Box2DDebugRenderer which you can also use in your projects. The renderer is nearly done, i only need to implement two functions (rendering the joints and contacts) which are probably about 15 lines of code. I’ll add them as soon as i start implementing the joint related tests. Note: the debug renderer is not intended to be used for production. You also shouldn’t expect decent performance from it on an Android device. It’s a quick and dirty way to render the world and by no means optimized (uses IntermediateModeRenderer which itself is a slow bitch but is incredibly easy to use).

In any case, the thing is not finished yet but porting a test takes around 2 minutes so i should have all of the tests done by tomorrow. If there are any bugs in the joint wrappers i’ll find them :). Note that so far only the shared library for Windows is up to date, if you want to try the fixed wrapper out on your device you’ll have to compile the native parts yourself in the mean time. Once i have ported all the tests and fixed any potential bug i’ll release libgdx 0.6 and all should be well.

Side note: i’ll tweak the performance of the World.getFixtures(), World.getBodies() and World.getContacts() methods a little. As it is the first two return a collection so this will change to a List in the near future as it avoids instantiating iterators. The later will have some internal tuning. I also plan on finally getting rid of the java.util.HashMap used to track fixtures and bodies and replace it with a Trove like primitive type map implementation.

Since i haven’t posted code in a while, here’s the libgdx port of the pyramid example from the original Box2D testbed:

And that’s the original:

Ok, that’s it for now. Feels good to be back 🙂