HTML5 Blitting Using an Offscreen Buffer

One of the great benefits HTML5 has brought us javascript game hackers is the canvas and context. Or more important, the ability to create an off screen canvas and context. This brings us one step closer to game console animation. Video games use off screen buffers for rendering. This technique provides smoother animation to the video game. The process involves rendering all the video game updates to an off screen buffer. An off screen buffer means that all the animation is being written to a buffer that is not visible.  When the game code has completed the off screen rendering, the buffer is FLIPPED to the visible video memory buffer.  Your game console and pc has hardware that handles this in video hardware. We're going to emulate this functionality using software. The reason buffer flipping is used is because it produces smoother looking animation in your video game.

This javascript tutorial is going to draw a simple background and a sprite using off screen buffer rendering and flipping. I am going to keep this simple. In the next demo we'll make the sprite walk and use multiple frames of animation. I just wanted to "keep it simple stupid" so you could get the idea of what is going on in the code. 

The Game Console Class

Over time I have been revamping the original game console code so I can use it in a library to write games. The first objective in this endeavor is to create a Game Console class, js/GameConsoleClass.js.

Source Listing 1. Defining a Game Console class in Javascript

function GameConsole(width, height) {
    this.width = width;
    this.height = height;  
    
    // create the main canvas
    this.canvas = document.createElement( 'canvas' );  
    this.canvas.width = this.width;
    this.canvas.height = this.height;
    this.context = this.canvas.getContext( '2d' );
    
    // add the canvas to the DOM
    document.body.appendChild(this.canvas);
    
    // create the offscreen buffer (canvas)
    this.offscreenCanvas = document.createElement('canvas');
    this.offscreenCanvas.width = this.width;
    this.offscreenCanvas.height = this.height;
    this.offscreenCanvas.context = this.offscreenCanvas.getContext('2d');

} // END GameConsole class

Of course we're going to need some member functions to perform the initialization and rendering.

Source Listing 2. Game Console member functions in Javascript

GameConsole.prototype = {

    initGC: function() {
        this.context.fillStyle = '#000000'; // Black
        //this.context.fillStyle = '#f0eef9'; // Lavender
        this.context.clearRect(0, 0, this.width, this.height);
        this.context.beginPath();
        this.context.rect(0, 0, this.width, this.height);
        this.context.closePath();
        this.context.fill();
    },   // END initGC
    
    // render to the offscreen canvas
    renderOffscreenGC: function(image) {
     // render the background
        this.offscreenCanvas.context.drawImage(image, 0, 0);
    
    }, // END render 
    
    bitBlitOffscreenGC: function(sprite, srcx, srcy, srcwidth, srcheight, dstx, dsty, dstwidth, dstheight) {
        
        this.offscreenCanvas.context.drawImage(sprite, srcx, srcy, srcwidth, srcheight, dstx, dsty, dstwidth, dstheight);
        
    },
    
    // flip the offscreen canvas to the visible GC canvas
    flipGC: function () {
        this.context.drawImage(this.offscreenCanvas, 0, 0);
    }, // END flipGC
    
}; // END GameConsole.prototype

Again, I kept everything really simplistic to give you a good idea of how the code works. I too have spent time in javascript books where the author's intent isn't to educate but to demonstrate how great their coding skills are. What is going on in their code is not blatantly obvious to the casual observer.

The Main Driver Code

Ok, let's draw some sprites. The source code js/MainGame.js contains the demo code to create a Game Console object in javascript and render to it. The code is logically straight forward with no sneaky coding demos. The demo code loads a background image and a sprite. That's it. Nothing fancy.



Source Listing 3. Loading and Blitting Sprites in Javascript

// create a Game Console object
var gc = new GameConsole(592,448);
gc.initGC();

// Background image
// load the image
var backgroundReady = false;
var backgroundImage = new Image();
backgroundImage.onload = function () {
    backgroundReady = true;
};
backgroundImage.src = "img/Level_1_warehouse.png";


// load the sprite
// load Sprite Sheet
var sprite = {};
var spriteSheetReady = false;
var spriteSheetImage = new Image();
spriteSheetImage.onload = function () {
    spriteSheetReady = true;
};
spriteSheetImage.src = "img/aliensvspredator_ltlinnkurosawa_sheet_sclx2.png";
var spriteWidth = spriteSheetImage.width /4;
var spriteHeight = 118;

gc.renderOffscreenGC(backgroundImage);

sprite.x = 250;
sprite.y = 250;

gc.bitBlitOffscreenGC(spriteSheetImage, 0, 144, spriteWidth, spriteHeight, sprite.x, sprite.y, spriteWidth, spriteHeight); 
gc.flipGC();

The code can be downloaded from GitHub   https://github.com/retrogamecode/tutorials.
Unfortunately, I can't upload the images there. So I will add them at the end of this article where you can grab it and download it.

Walking through the not so obvious code....

var sprite = {}; 

Creates a simple javascript object I will use for storing values for the sprite's current x (sprite.x), and y, (sprite.y) position. 

gc.renderOffscreenGC(backgroundImage);

sprite.x = 250;
sprite.y = 250;

gc.bitBlitOffscreenGC(spriteSheetImage, 0, 144, spriteWidth, spriteHeight, sprite.x, sprite.y, spriteWidth, spriteHeight); 
gc.flipGC();

In the bitBlit operation, the sprite.x and sprite.y are the destination positions I will draw the sprite. The x=0, and y =144 values for the bitBlit are values I pulled from photoshop when examining the sprite's location. It's a quick a dirty demo.

Since this is retro game coding we are blitting!!!! A bit blit is bit block transfer. We're kicking it old school here. Even though most low end PCs now have far more computing power than the CRAY computer of the early 90s. Anyhow, video game consoles of ages since past had hardware blitters in them for this operation. We're doing it in our software.

When the blit is completed -we FLIP the offscreen buffer to the visible buffer with the class method,

gc.flipGC();

Play around with the code and the sprites.


Source Listing 4. The HTML source file index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>RetroGameCode</title>
    </head>
    <h1>Game Console Offscreen Tutorial</h1>
        
        <script src="js/GameConsoleClass.js"></script>
        <script src="js/MainGame.js"></script>
    <body>
</html>

That's it for this demo. Have fun coding! Next venture we will move the sprites and do cell animation!

img/aliensvspredator_ltlinnkurosawa_sheet_sclx2.png

img/Level_1_warehouse.png

Creating a Console Game Screen Using HTML5

 After some time off from playing with this code from tutorials 1-3, I decided to go back and optimize and clean up a few things before we move on. This edition of retrogamecode we're going to look at creating a dynamic game console interface using HTML 5 canvas object.

I ripped out a lot of code for the examples to stand on their own and be clear to you the student or the developer.

Here are the basic javascript code snippets for creating a game console using the HTML5 canvas object.

You can download the entire HTML source file from github: create_html5_canvas.html

Source Listing 1. Defining a Super Nintendo Game Console in Javascript

// game console variables
var gc_canvas;                    // 'gc' 'game console'
var gc_context;                   // gc context
var gc_width = 592, gc_height = 448;   // game console viewport width and height Super Nintendo parameters
var gc_light_lavender = '#f0eef9';  // color light lavender
var gc_lavender = '#f0e7f9';   // color lavender
var gc_black = '#000000';    // color black

We're creating a Super Nintendo console of 592 pixels wide by 448 pixels high. The var gc_canvas is our game console HTML5 canvas object. Let's take a look at the javascript function we'll use to do this.

Source Listing 2. Dynamically creating an HTML5 canvas object in Javascript

// function: initGameConsoleCanvas
// description:
//    initialize the canvas element
//    and the drawing context API 
//    components.
//
function initGameConsoleCanvas( width, height) {
    
    // create the HTML5 canvas object
    gc_canvas = document.createElement( 'canvas' );   
    gc_context = gc_canvas.getContext( '2d' );
    
    // attach the canvas to the HTML document object
    document.body.appendChild( gc_canvas );
    gc_canvas.width = width;
    gc_canvas.height = height;
    
}
// END initGameConsoleCanvas(width, height)

We're going to need to a function to clear the screen for animation. And for right now we just want to throw something out on the screen to see if our game console canvas is working. The following function erases the game console canvas and fills the screen black.


Source Listing 3. Erase the HTML5 canvas object using Javascript

// function: clearGameConsoleCanvas
// description:
//    erase the game console using the 
//    specified color.
//
function clearGameConsoleCanvas(width, height, color) {
    // Fill the screen with a black background
   gc_context.fillStyle = color; //'#000000';
   gc_context.clearRect(0, 0, width, height);
   gc_context.beginPath();
   gc_context.rect(0, 0, width, height);
   gc_context.closePath();
   gc_context.fill();
}
// END clearGameConsoleCanvas(width, height, color)

Putting it all together, we call the document.onload() function to initialize the game screen as the web page initializes.

Source Listing 3. Erase the HTML5 canvas object using Javascript

// initialize on document load
window.onload = function() {

  // create the HTML 5 game console canvas 
  initGameConsoleCanvas(gc_width, gc_height);
  
  // initialize the game console canvas to black
  clearGameConsoleCanvas(gc_width, gc_height, gc_black);  
        
}
// END window.onload()

That's basically it. I hope by stripping out all the code the initialization of the game console canvas makes perfect sense to you. Ideally, all the game console code will be moved out to a javascript source file and then sourced in from the HTML file. We will do this in the next tutorial as we move along.

Have fun scripting! Go make some games.