Posts Tagged ‘game development’

Working on a new HTML5 game engine for iPhone

February 24, 2010 2 comments

I’ve just completed the first stage of development on a new 2D HTML5 game engine for iPhone.

It is a complete re-write of the engine used in my iPhone platform game and it achieves a much higher and more consistent frame rate. I’m currently very pleased to be getting a consistent 17-18 FPS running full screen on an iPhone 3G.

It is a scrolling tile-based engine, meaning it should suitable for most 2D games. I’d like to use it to create another platformer, or maybe a shoot ’em up this time would be cool, but the engine could be used for other game types too.

Artist Wanted!

I need your help! to turn it into a finished game. This is a call out to any artists who would like to get involved, please drop me an email with examples of your work. My address can be found on the about page.

I intend to release 2 versions of the game:-

  • a demo version that runs in Mobile Safari but has no sound and few levels, and
  • a full version that can be purchased from the app store.

Revenues made from the app store version would be shared with the artist, so there might even be a few dollars in it for you!


HTML5 Platform Game for iPhone

February 4, 2010 37 comments

I’ve spent today porting my HTML 5 platformer, mentioned in an earlier post, to run on iPhone/iPod Touch.

The game uses the HTML 5 Canvas element and a few iPhone-specific HTML/JS extensions. It should still run on most desktop and mobile web browsers however.

I’ve tested the game on an iPhone 3G and 3Gs. The 3Gs performs as well as a desktop PC which is some feat! The 3G on the other had is a little sluggish, but the game is still playable; if you’re using a 3G I recommend playing the game with your phone upright (portrait) for best performance, since in this mode the game aims to draw to a smaller area of the display.

It is also possible to play the game full screen, that is without the Safari address bar & toolbar, by adding the game to your home screen.

According to Liam Green-Hughes on Twitter, the game also runs fine on the Nokia N900, running Firefox.

See my earlier post for the history of the game, or to play the desktop version. As before I invite you to take a look at the source code of the game. Simply hit your browser’s “view source” button to read the code.

Click the Play link below (ideally on your iPhone!) and be sure to leave a comment with your thoughts.


Or go to this address on your iPhone:

A Platform Game Written in HTML5

September 11, 2009 117 comments

Click to play

Nearly 15 years ago, when I was all of 15 years old, I wrote this little platform game which I have recently ported to HTML5/Javascript.

It’s a kind of Mario clone and at the time I named it “Fred Jones in Adventureland”… hmm, not a great name.

The themes of the game are intended to be tongue-in-cheek however. Hence the ridiculous title and deliberately unsubtle references to other games in the genre.

And it is somewhat incomplete; the player has unlimited lives and unfortunately there are only 5 levels. But as it stands it is playable and hopefully a little bit of fun. There are a couple of surprises along the way too.

Browser Compatibility

If you’re using Microsoft Internet Explorer 7 or 8 the game will run dreadfully slow. (Update: The game now supports the Google Chrome Frame plug-in. If you are using Internet Explorer I recommend you install it.)

Internet Explorer 6 and earlier, Firefox 1.x and I believe Opera 8 and previous will not run the game at all. This is because these older browsers do not support HTML5 (arguably, no version of Internet Explorer supports HTML5, however the game can run with the assistance of 3rd-party plug-ins and other workarounds). Please upgrade or switch to a different browser.


Left Arrow: move left
Right Arrow: move right
Spacebar: jump

iPhone Version

See HTML5 Platform Game for iPhone


Click the link above to play the game.

Technical Details

This is a port of the original game to HTML5/Javascript. This means it now runs in any modern web browser.

Unlike most web games the game does not use Flash. The HTML5 Canvas is used to draw the visual elements.

All the code for the game is all available to read if you hit “view source” in your browser and I invite you to take a look.

I was pleasantly surprised by the performance of Canvas drawing operations and javascript run-times in most modern browsers. However Internet Explorer users apparently will have to wait for version 10 before such features will grace the browser.

The game currently has no sound but this could be added using the HTML5 <audio> element.

My BBC Red Button games blog post is up…

March 23, 2009 8 comments

My BBC Red Button Aracde blog post is live on the BBC Red Button blog.  Follow the link to read about the challenges of writing simple games on interactive television platforms.

The post includes a video and screenshots of the games I’ve written during my “10% time” at the BBC.  This is time we are given — half a day each week — to work on our own projects and try to innovate.

The games are written in the MHEG programming language, a subject I often discuss on this blog.

Update: The post is now linked to from the front page of the BBC News Technology section.

MHEG+ Game Development Tutorial, Part #2 — Animation

December 14, 2008 6 comments

In part #1 of this series we built a basic MHEG+ scene which was capable of firing timer events at a consistent rate.  In this part we will look to extend the code by adding an animating graphic to the scene.

A further aim of this part is to explain some more of the language features exclusive to MHEG+, including foreach loops, sequential blocks and ifs.

Adding our graphics to the scene

I have hand crafted the following 5 png graphics to use for this tutorial:


Using an MHEG+ foreach loop, we can add all these graphics to our scene in one fell swoop:

  foreach num (0..4) {
    {:Bitmap bmpPac<num> = [constPacObjectIdOffset + <num>]
     :OrigPosition          [(720 - 32) / 2] [(576 - 32) / 2]
     :OrigBoxSize           32 32
     :OrigContent           :ContentRef ('/tut/<num>.png')
     :InitiallyActive       false
  } endfor

There a number of subtleties of this loop which are probably worth discussing:-

  • foreach loops are preprocessor instructions, not run-time loops.  Because of this we can use foreach loops around object declarations, or in fact any code section at all.
  • In this case, the contents of the foreach loop will be duplicated 5 times, this is controlled by the (0..4) range on the first line.  This range need not be numeric, text may also be used, for example: foreach key (red, green, yellow, blue) is allowed.
  • The Bitmaps we declare will be named bmpPac0 through bmpPac4, <num> is substituted with each value in the range.
  • The object identifiers for the Bitmaps will be 100 through 104, assuming constPacObjectIdOffset has the value 100.  We use the MHEG+ notation: objectname = objectid to declare both names and object identifiers for our Bitmaps.
  • <num> is also substituted in the png filename

Read more…

MHEG+ Game Development Tutorial, Part #1 — Timing

November 26, 2008 5 comments

Introduction to this Series

One of the joys of my job at the BBC is staying back after hours and trying to nut out how best to write real-time games on current interactive television platforms.  That is, trying to write the kind of games that you might have once played in an arcade, or maybe on your BBC Micro, but allowing you to play them via the ‘Red Button’.  See this post for a video of some of my efforts so far.

Here in these tutorials I hope to share with you some of my findings in trying to get the best out of the MHEG platform.  I also hope to demonstrate the power of the MHEG+ programming language, an extension to MHEG.  MHEG+ has been developed in-house at the BBC and compiles down to traditional MHEG/ASN, but is a far richer langauge than its predecessor.

For these tutorials I will assume you have some background in programming generally and hopefully some experience writing MHEG or interactive TV applications (MHP, OpenTV, etc.).  The code samples will all be in MHEG+ which at time of writing is not available outside the BBC, however efforts are being made to attempt to open source MHEG+ development tools, so watch this space…

I guess for the time being then you most likely won’t be able to compile or run these applications, but hopefully one day soon you will be able to.  Therefore I suppose the code herein is currently just for educational purposes, but then that is the point of the series 🙂

So, without further ado…

Part #1: Timing

The first significant challenge that I came across when writing MHEG games was that of timing.  How could I ensure my game would run at virtually the same speed on any set top box?

Unlike more sophisticated languages (yes, I openly admit that MHEG is not the most sophisticated language, but then it was never designed to be) MHEG does not provide the developer with a means of retrieving accurate clock information.  The most fine-grained time information you can retrieve (achieved by a call to the GetCurrentDate resident program) provides no better than whole second precision. Read more…