Monthly Archives: April 2014

I always wanted to program a game engine and this easter weekend boredom gave me some time to do so. I thought this exercise could help other people so I will describe here the different steps to build such an engine. Here is the first part of this tutorial series.

Canvas definition and basic drawing

First we will need an HTML element to draw onto it. The <canvas> element is what we are looking for. You need to specify its size explicitly as it will be the available pixels we have in our canvas which can be different than the actual size on the screen defined with CSS properties. This is an important point, canvas has an intrinsic size (which define the available size for all drawing functions) and an extrinsic size (real size on the page) for which the canvas scale automatically. If you want to keep it simple, only define the intrinsic size and do not define the size of the canvas in CSS.

<canvas id="game-window"width="1024"height="640"></canvas>

From the javascript endpoint we require a specific object to actually draw on the canvas. This object (CanvasRenderingContext2D) is available from the canvas element:

And now come the interesting part, we will draw something onto the canvas. I am not describing every possible drawing function here, you’ll find all you need on the CanvasRenderingContext2D reference page.

// Get an image from an urlvar img =new Image();
img.src="imageurl.jpg";// Wait for image to be loaded before rendering it
img.onload=function(){// Draw image at position (100,100)
context.drawImage(img,100,100);};

Game loop in javascript

If you’ve wrote a game before you know that at the core of every game you’ll allmost allways find the same paradigm. A game loop responsible for updating the environment (update scene, move sprites, handle user input) and rendering the game. This loop is infinite and only exit when the game ends. The same paradigm applies here however as the javascript is mono-threaded we need a way to ensure the browser can have some “spare” time to do its internal work. This is done by delegating the loop to the browser, we just ask to be called for each frame update. Modern browsers offer the requestAnimationFrame method to do so.

// request the browser to call again gameloop function
requestAnimationFrame(gameloop);}

// First call to start game loop
requestAnimationFrame(gameloop);

In this example I haven’t included the timing function required to update the environment according to the elapsed time. Again this is a common pattern in game programming. If you want to know more about it you can read this article about the game loop. Here is the example with this pattern implemented:

// request the browser to call again gameloop function
requestAnimationFrame(gameloop);}

last = getTimestamp();// First call to start game loop
requestAnimationFrame(gameloop);

Sprite animation

So we have seen how to render an image and how to construct a game loop in javascript. We have everything needed to animate a sprite. A sprite animation is pretty straightforward as it is only a sequence of different frames of the same sprite rendered in a loop.
For example if we have the following sprite composed of different frame, all in the same image :
We can render each frame alternatively which will “animate” the sprite. The update() function will be responsible for determining which frame to render and render() will render the frame.

Source Code

With the help of the tutorial you should be able to animate sprites on your screen. The enhanced source code for this tutorial is available here: JS Game Engine part 1 source code. I have also added the source of a basic scrolling background object.