Please note that working example of these games will be posted soon, they are currently being adapted for mobile screens, if you are on a desktop you can see Roboscroller demo at
http://catplusplus.org.uk/catpsite/plotpixels/canvas.html Thanks for your patience, please check back soon!
After completing the DOM based rendering system for the Smorgasbord project I was anxious to have a look at rendering using the HTML Canvas element.
I came accross an article on hacks.mozilla.org entitled ‘Faster Canvas Pixel Manipulation with Type Arrays’ – the article encourages users to ‘eschew the higher level methods for drawing images and primitives to a canvas’ and use typedarrays an the canvas’ imageData.
To get hands-on experience I implemented Pix Elf – a Javascript based rendering engine for games based on the methods outlined in the article.
When you’re dealing with manipulating pixel arrays then you can look at techniques used in any other language where pixels are kept in arrays and ‘BLock Transfered’ to screen memory (BLiTted).
So this is where the fun starts, at a local charity shop I found copies of ‘Teach Yourself Game Programming in 21 Days’ by Andre LaMothe from 1994, ‘PC Game Programming Explorer‘ by Dave Roberts also from 1994 and ‘Tricks of the Game Programming Gurus‘ which is also from 1994 by LaMothe, Ratcliffe, Seminatore and Tyler. (1994 must have been a bumped year for DOS games programming books). I got all 3 for £1.50
Cover of Teach Yourself Game Programming from 1994
These books pre-date windows technology like Direct-X and for the most part use C, which I like to code in – if I was building industrial strength 10,000 line programs I probably would pick C++ but, to quote Bartelby ‘I prefer not to’.
In the days of DOS you worked all your pixel data as character (byte) arrays then via a specially granted ‘long’ pointer you copy your pixel data directly to sreen memory to be converted into an image by the hardware – you can also read from the screen data which is why when multiwindow/multiprogramming environments came in this sort of thing had to stop for security reasons).
In order to get my hands dirty with the C, I installed dosbox the dos emulator – and found online a free version 5 of Microsoft C, now I could compile a C source file to target DOS, then copy the executable into the Dosbox directory and run it!
I followed each excersize faithfully and then followed up with a equivelent example in JavaScript, simultanuously building a small game library. The features of the game library from ‘Teach Yourself Game Programming in 21 Days’ are:
- Animated Sprites and Sprite Sheets
- Double Buffering
- Scrolling backgrounds
- Tiled scrolling backgrounds
From ‘Tricks of the Game Programming Gurus’ I got
- Infinite (repeating) scrolling
- Parallax scrolling
From this I took the assets that come with the book’s CD and built a side scrolling demo: RoboScroll
A screenshot of RoboScroll
As my knowledge of C improved I went on to explore some intermediate C books, one in particular ‘C Interfaces and Implementations‘ brought home again the importance of clean and usable API, so I decided to clean up the JavaScript library code, I christened it Pix-Elf, – a helper (like the Elves and the shoe maker tale) for Pixels.
I decided the nearest thing out there that I was aiming for was the API for SDL, I’d toyed with SDL and built a couple of example games from text-books (I used codeblocks on ubuntu as my IDE which also comes with some nice SDL example code and compiler settings). So I refactored Pix-Elf to have as similar API to SDL as it made sense with the features I have – this is not as easy as you might think, since JavaScript is asynchronous, and in game engines many things need to happen in the right order for things to work.
The test for this was to rebuilt the SDL game ‘Penguin Warrior’ from Loki softwares ‘Programming Linux Games‘ book.
screen shot of penguin warrior made with pix-elf Aside from the fact that on Linux if Firefox is set gfx.xrender.enabled to true then the using the game assets from the book take 2 whole minutes to initialise the game (set it to false with about:config and it takes 4 seconds) then I got the basic game working fine.
Pix-Elf, like many of my projects, is a work in progress, so at the time of writing there’s still plenty of places it could be improved, but as a proof of concept it does seem pretty nippy as a bitmap renderer.