Friday, March 11, 2011

Canvas 2d Context and Frame Swapping

While it may be a consequence of the programming languages of which I was reading, every game programming tutorial I have ever read introduces the concept of a buffer frame and frame swapping fairly early on.  The idea is conceptually simple:

You establish two frames, the first you are currently showing to the player, the second you are actively drawing on.  Once you are finished drawing the second frame, you swap the first frame with the second such that the second frame is now the one being shown to the user and the first is free to be used for the drawing of the next frame.

When I first started down the path of learning the 2d drawing context on the canvas,  I spent a good couple hours searching for the HTML5 canvas equivalent of frame swapping and buffering.  I came up empty handed.  That being the case, as is my way, I decided to just start coding, leaving the buffering problem as one to be solved later.  What I found out, much to my happy surprise, is that there is no need for this practice within the 2d context.  

As you draw to the canvas using the 2d drawing context, what you draw does not appear on the canvas immediately.  This is opposed to drawing in, let's say, Java.  Consider the following bit of pseudo code:

function drawStuff() {
  c = get Canvas;
  c.drawImage( something-great.png, 20, 250 );
  c.drawImage( something-else-amazing.png, 52, 17 );
  c.drawImage( a-so-so-image.png, 189, 442 );

If you were to code this in Java and watch it render, you would see something-great.png drawn to the screen first, followed by something-else-amazing.png, and then a-so-so-image.png.  There would be a delay between the appearance of each of these.  And even thought said delay might be barely perceptible, it would be there, and if you are drawing a hundred images to the screen each frame, you would start to notice it and it would become quite irritating.  This is why some form of frame swapping is needed in this case.  You don't want to show the user your frame until all the things you are going to place on it are rendered.

Contrast this to the 2d drawing context.  The way Javascript interacts with the 2d drawing context is such that nothings is actually visibly drawn to the canvas until the scrip doing the drawing has finished executing.  That is to say, looking at the example above, nothing new will be drawn to the canvas until the Javascript interpreter has reached the end of the function (assuming there are not other functions to run after that which are going to do more drawing).  You could argue that this in and of itself is an implementation of frame swapping however the implementation is baked into the browser itself so even if you are making a game engine you don't need to think about it. 

Additional Note of Potential Ignorance
I admit there may very well be a way to achieve the same result in Java without frame swapping.  I haven't done a lot of game programming in Java so I don't know all the magic secrets.  And certainly, many Java game engines hide this detail, however if you are MAKING the game engine you need to worry about it.

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.