new iPhone game – Wizard Wars

During the crafting of my Gauntlet-esque game I lost some motivation. The issue of rotation vs collision took its toll. I needed something to just jump in to so that I could get a game completed. It’s hugely frustrating for me not to finish something once I set my mind to it.

So I took a look at the iPhone. I’d looked at Objective-C and scratched my head enough to ask the question “Can I make games for the iPhone without Objective-C and Cocoa ?”. So much infact that I punched exactly that in to Google.
Incredibly a book available on Amazon called Building iPhone Apps with HTML, CSS, and JavaScript: Making App Store Apps Without Objective-C or Cocoa was returned. I wasted no time buying it.
When it came I devoured it. It’s not a big book but gives you every bit of markup and code that you need to present a game in an iPhone / iPod Touch.

Safari Mobile is sturdy and executes at a good pace. I tested the game using desktop Safari on a PC and my wife’s iPod Touch. Although the framerate drops on the actual device it’s certainly good enough to present a good game.

Wizard Wars game for iPhone (in development)

It’s not quite finished but you can still see it here:

I didn’t waste too much time on game design issues. I pretty much knew from the outset that I wanted a colourful game with a wizard battling another evil wizard in a fixed arena. I wanted the game to feel nice. When you touch the screen the character moves to that point. I also reflected the target position using a simple red blob sprite that fades over time. The effect when you drag the wizard is quite pleasing if totally accidental.

As a GameBoy artist I learnt very quickly that colour is vital. Bright, vibrant colours can make a simple game experience really enjoyable. So I set out to create bright colourful sprites.

The easiest way to achieve this was to wash out the backdrop. So I set the entire game on a patchwork stone floor that is actually quite dark. I then crafted a bunch of sprites using the opposite end of the spectrum. The effect is very nice and rather rewarding for an artist / game designer.

When I first set out to create the game I was concerned about frame rate. I needn’t have been. Safari Mobile handles things nicely. So much so that I was able to spawn my trademark spark flashes all over the place. The process of picking gems and stars up is dull if you don’t visually reward the player. The 8 way explosion of sparks is perfect feedback.
I also invested some time making this bob and bounce a little. So stars, gems and bonuses don’t just appear they drop a short height and bounce in to position. Very little code used for a thoroughly worthwhile effect.

I hope to blog a bit more about the game’s development once it’s complete. Just now I’m wrapping up the sound issues (AUDIO tag) and tightening up the code and resource files. I’m desperate to keep the whole project under 300k.

Have a look at the game. You can play it on a PC using the mouse to click the arena or the keyboard arrow keys to move the wizard.
Let me know what you think.

Post a comment or leave a trackback: Trackback URL.


  • Cody  On November 17, 2010 at 8:34 pm

    I like how you used subdued and vibrant colors. Very nice stuff. The mechanics of the game seem pretty sound. I do get some frame rate issues in Firefox 3.6.12 on XP, but I know that has a lot to do with my browser. Other browsers far outperform Firefox’s current release when it comes to JavaScript and canvas manipulation.

    There are some interesting performance techniques for looping, accessing variables, conditional statements, and such that are just a bit faster than traditional coding practices. Of course, a lot of these performance sites are based on old browsers so the best thing to do is to time your code against alternative solutions and output each duration in milliseconds to tell the difference. Something to consider at least. Honestly though, your code looks pretty clean so I don’t know if it’s worth the effort to gain an extra frame or so per second.

  • markw1970  On November 18, 2010 at 10:25 am

    I probably lose a frame here and there with my slightly more verbose style of coding. I just like to be able to read my code at a glance and understand it :)
    I could do with taking a look in to this though since my mobile version of Invaders from Mars is currently stuck at around 15FPS on the iPhone.
    By contrast the same code running in Google’s Chrome on my desktop is up to about 90FPS. It should be higher than that ! So I’m getting something wrong. Possibly checking too much during collision routines or duplicating something somewhere.
    I don’t think it’s the amount of drawing. It’s really not drawing that much.

  • Cody  On November 18, 2010 at 9:07 pm

    The back-end engines that run JavaScript vary between platforms and browsers. IE had quite a few memory leaks in it’s earlier days that were only remedied with awkward code fixes.

    • markw1970  On November 19, 2010 at 12:00 pm

      If everyone adopted the V8 engine it’d make my life a lot easier.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: