Ajaxian

Tuesday, October 28th, 2008

GameJS: Canvas Game Library

Category: Canvas, Games

Tommy Maintz has created a fun project called GameJS a 2d game development framework using JavaScript and Canvas.

The API

GameJS.framework.Game - This is the main game class you extend when creating the game. It has the following methods which you have to override: initialize, loadContent, update and draw. This is all very similar to the XNA framework. Tetris.js is an example of how to extend this class.

GameJS.content.ContentManager - This class handles the asynchronous loading of resources saving you some headaches. The following code loads a new texture which can be drawn in the games draw() method:

PLAIN TEXT

JAVASCRIPT:

1.  
2. loadContent: function() {
3.     // set the screen rect
4.     this.screenRect = new Rectangle(
5.         0, 0,
6.         this.screenWidth,
7.         this.screenHeight
8.     );
9.  
10.     // Create the background texture. The third argument argument
11.     // makes this texture is not redrawn every frame (gives
12.     // performance boost since the background doesn't change)
13.     this.backgroundTexture = new Texture(
14.         this.graphics,
15.         this.content.load('Textures/BackgroundTexture.png'),
16.         false
17.     );
18.  

GameJS.graphics.GraphicsDevice - This file sets up the main canvas. It also manages the Z-buffering, and has a method that creates a new resource context which individual textures can use. You can easily change its properties. A simple example:

PLAIN TEXT

JAVASCRIPT:

1.  
2. constructor: function() {
3.     var ds = this.graphics.deviceSettings;
4.  
5.     ds.screenWidth = this.screenWidth;
6.     ds.screenHeight = this.screenHeight;
7.     ds.target = document.getElementById('tetris-container');
8.     ds.fullScreen = false;
9.     ds.applyChanges();
10.  

GameJS.graphics.SpriteBatch - This class acts as a wrapper around the canvas element. It has a draw method which allows you to draw a texture to the graphicsDevice. You can pass it a destination and source rectangle. Code example:

PLAIN TEXT

JAVASCRIPT:

1.  
2. draw: function(gameTime) {
3.     // clear the device
4.     this.graphics.graphicsDevice.clear();
5.  
6.     var spriteBatch = new GameJS.graphics.SpriteBatch(this.graphics);
7.     spriteBatch.begin();
8.  
9.     // Draw the background
10.     spriteBatch.draw(this.backgroundTexture, this.screenRect);
11.  
12.     // Draw the gamefield.
13.     spriteBatch.draw(this.gameFieldTexture, this.gameFieldRect);
14.  

GameJS.input.Keyboard and GameJS.input.KeyboardState - These classes handle the keyboard input. Since JavaScript is an event based language and a game cycle is something continues, the framework takes care of storing the pressed keys. This looks something like the following:

PLAIN TEXT

JAVASCRIPT:

1.  
2. update: function(gameTime) {
3.     // Get the current input state.
4.     var keyboardState = this.keyboard.getState();
5.     if(this.isGamePaused) {
6.         if (keyboardState.isKeyPressed(Keys.ENTER)) {
7.             this.isGamePaused = false;
8.         }
9.     }
10.  

You can't build a game frameworking without creating a game, and Tommy did the old favourite, creating Jetris as a clone of Tetris.

Posted by Dion Almaer at 9:15 am
5 Comments