Writing custom characters to the canvas from a .png file and some frame rates

Firstly my apologies for the random theme change. I’m forever trying to find the perfect theme for this blog. FWIW I rather like this one so will stick with it for about a week or so :-)

Castle Adventure II screenshot

Castle Adventure II screenshot

I added a feature whereby I could write numbers to screen based on my own character set.
The character set is actually little more than an image with characters positioned at equal space throughout and then called up using the drawImage() method.

Numbers The above is 240×48 pixels in dimension. Each number is sat within a 24 x 48 grid. My x offset is therefore set to 24 pixels.
Where I have a String  such as “00001950” that might be used for a score I simply step through each character in the string using the JavaScript substr() method. I can then multiply the value of the integer by the x offset to find the position of the desired character within the .png file.
So in the case of “00001950” the first four numbers  use the calculation 0 x 24 to locate the left hand side of the desired character. The y offset is constantly 0 (zero).

Using drawImage(image, xoffset, yoffset, width, height, canvasx, canvasy, width, height) I can then print a string of numbers from my numbers.png file.

e.g. for the 6th character in the string I would be using

drawImage(numbers, (9 * 24) ,0 ,canvasx ,canvasy ,24 ,48);

where canvasx is bumped by the x offset each time.

Once I had this figured as a function I knew that I could pass a string and a starting x, y to it. So I implemented a frame rate counter and dumped it bottom right on the screen.

Interestingly I got best results from Internet Explorer 9 P6. Chrome was a very close second with Opera, Safari and (a surprisingly poor) Firefox 3.6 in last place. At best I was getting around 22 FPS which when the loop is throttled at around that in the code is no surprise. Despite this Firefox couldn’t get close pulling in around 16 to 18 instead.

When the code is run flat out (i.e. setTimeout() set to zero) Chrome can get over a hundred. IE close behind.
To see such fabulous performance across all popular browsers is thrilling to say the least.
IE finally playing the game just does it for me. It means that games using this technology can be played by everybody someday.

Note: I also tested using the iPad and got around 7FPS. Room for improvement in the way that I throttle the loop perhaps.

Play the latest version here: www.wilfscorner.co.uk/sandpit/1/castle.php

Post a comment or leave a trackback: Trackback URL.


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

    Speaking as a fan of Firefox, I couldn’t help but notice that you tested your application in Explorer 9 P6. Firefox 4.0 should be nearing the end of it’s beta phase soon. ;-)


    FYI: I had to turn off my Firewall/Anti-virus, but just for the installation process. Seems stable to me.

    If you do install it, let us know the FPS you get.

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: