Let X Be

Earlier this week I was very happy to be able to get my Asteroid Runner game working on the iPhone with minimal fuss. It only took two tries, once using the older “iOSImpact” framework which turned out not to implement the accelerometer events, and once using the newer “Ejecta” framework. Both are made by the creator of the ImpactJS framework and basically provide a Javascript interpreter and a mock HTML5 canvas that has a rich enough API to match the way the game runs in the browser. It might be possible to use just a raw UIWebView, but after a brief foray it seems there’s a bunch of overhead around resource loading for all the images and sounds that isn’t worth re-implementing as far as I can tell.

iPhone 5 live screenshot

One of the things I’ve been happiest with through this porting process is that I built the screen width and height to be flexible early on; the game plays a little differently depending on your browser/device shape, but it avoids any kind of nasty scaling problems. Might need to move away from this for balance reasons, but during functionality testing it’s nice to see the whole spectrum on different devices (even iPhone 4 vs. iPhone 5 with their different screens).

Relative screen heights are used throughout (with apologies for the abuse of the term ‘consts’ here)

This also required extending the ImpactJS entity class to allow positioning entities relatively instead of absolutely (since we have no idea how many pixels will be in the screen). I created a plugin that injects this into impact.entity here. I think this could be useful for other games as well that share this flexibility of scale.

Working on my Asteroid Runner game again, and I finally found the first IDE/editor that is able to parse the ImpactJS engine effortlessly: IntelliJ IDEA!

After trying just about everything under the sun (had previously used Coda and Komodo on this project hunting for this functionality), I had pretty much given up hope. Now I’m happy again and excited to be able to code even faster than before. It sure beats having to keep a browser window open to hunt through the API documentation for everything. The best part is that I didn’t even have to specify any paths; it did the traversal and indexing all on its own. Major points to Jetbrains for the ease of use here, although it still seemed a little too cumbersome to get the rest of the project set up in the first place.

Today I spent a couple hours struggling with an annoying “clicking” noise that was showing up in my Asteroids Runner game when an asteroid got destroyed. It was somewhat sporadic and difficult to debug; early on in a game the noise was very common, and then it got less common as the session went on. How could this be?

The first thing I tried was implementing proper pre-loading of sound files, figuring that maybe there was a loading issue happening the first few times the sound played. ImpactJS handles this pretty well, letting you either load sounds at runtime (probably a bad idea), or using a sound manager to preload them:

ig.soundManager.load('media/explosion.mp3', true);
ig.soundManager.load('media/laser.mp3', true);
...
var deathSound = ig.soundManager.get('media/explosion.mp3');
deathSound.play();

This seemed to smooth out the first few sound effects which was a nice gain, but it didn’t actually solve the clicking problem at all!

Next I ventured into Audacity to try to learn more about what might be causing the noise. A little experimentation with various sound effects made it clear that abruptly stopping a sound (any sudden change in volume) can lead to that clicking effect, so I went off in search of any code path that could cause sounds to get stopped early.

I made the Sound objects multi-channel so that the browser is able to play them on top of each other, theoretically preventing a case where a sound is stopped early because a new one needs to start. This seemed to improve the overall sound quality but the click was still there. I was able to tell this working by logging which channel was being used in the Javascript console:

console.log("Returned channel #" + i);

So after circling the long way around the problem trying to find the bug in my code that was causing this, I dug back into Audacity and after playing various chunks of my explosion sound over and over, I came to an embarrassing realization: the clicking sound was actually in the sound file itself. It was an artifact of the original freeware sound I had downloaded. My code, instead of causing the bug, was actually just covering up the issue in many cases!

Example of a sharp volume change that could lead to a clicking noise when played at full speed

So after another web search for publicly usable sound effects and some rewiring and damping of the new explosion sound, Asteroids Runner is click free. It now has better initial performance and smoother overall sounds to boot!

After a few weeks of work, I’m finally ready to put up an early prototype of a little game I’ve been working on. It’s a vertical scroller that you control with the arrow keys and spacebar (definitely doesn’t work on a mobile device at this point). Everything is pretty rough at this point, but the basic idea is there. You can play it here: http://letxbe.com/AsteroidsRunner/

This is an exercise in using purely Javascript and HTML5 to make a game that’s portable to most platforms. Theoretically I can package it up so that it runs as an application anywhere. The only requirement is a fairly modern browser underneath (Internet Explorer 9 or later, equivalent for Chrome/Firefox/Safari).

It’s been interesting to learn a new Javascript framework and figure out how to program into it – the low-level graphics and input code is pretty much taken care of, so I get to spend all my time drawing graphics and writing the code for the behavior of each object. That’s turning out to be quite complex, particularly getting the input and movement of the player ship just right. There’s a lot of subtlety to getting it to accelerate/decelerate exactly right depending on the keyboard input.

At long last, my game for XNA called “WordBridge” is finally in a state where I’m willing to let others play with it. It’s not much of a game at this point, since there’s only one level and no penalty for just refreshing until you get tiles you like.

Successfully crossed the river!

Still, the engine for moving tiles around and checking whether you’ve created a working bridge is now done. You can connect point A to point B, click “Finish”, and find out if you did it correctly. There may be a couple minor bugs in there, but they shouldn’t be too easy to find (let me know if you do find one).

You can download the game here (Windows only): www.letxbe.com/WordBridge013.zip. There’s an installer in that package; I think it will prompt you to install a DirectX runtime if you don’t have one.

It’s probably possible to reverse-engineer some of the assets out of that package, so I am obliged to say that this is for individual demonstration purposes only, in case anyone nefarious is reading this.