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.


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:


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

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:


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

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:


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

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:


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

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

4.4 rating from 47 votes


Comments feed TrackBack URI

This is unbelievable. The minute after this post came online, my hosting companies server park completely died. I called them and they don’t know when it will be back up again…

Comment by TommyMaintz — October 28, 2008

A mirror can be found at http://www.ugame.net/gamejs/ for interested people.

Comment by TommyMaintz — October 28, 2008

nice idea! :)

Comment by kyriakos — October 28, 2008

This is excellent! The speed (fps) is astounding compared to similar libraries. I’ll definitely be looking into using this for a few upcoming projects of mine.

Comment by Ryura — October 28, 2008

This is a *great* idea and what JS in the app level really should be used for (my opinion)…
Great work :)

Comment by ThomasHansen — October 29, 2008

Leave a comment

You must be logged in to post a comment.