Game

Create a game

To create a new Glue Game you can use the Game module. You you only need to startup your game once. After that, the running game instance will be available through the Game module. To start a game you can use the 'setup' method like in the example below. The setup method requires a configuration object. The canvas property is mandatory, because Glue needs it to get information about the canvas you want to use to render you game in. The canvas property needs tho contain the sub-properties "id" and "dimension". If there is a canvas present with the configured id, Glue will use this canvas, if not, Glue will automatically create the canvas for you. The dimension property needs to contain an object with the width and height of the canvas. You can see an example of this below.

glue.module.get(['glue/game'], function (Game) {
    Game.setup({
        canvas: {
            id: 'canvas',
            dimension: {
                width: 800,
                height: 600
            }
        }
    });
});

Add a Glue Component to the running game

Once you've created a running game, like explained in the previous chapter, you can add game components to your game. The most simple game component is a JavaScript object literal, containing an update and a draw method. To add this component to the game you can use the "add" method which is also within the Game module. Once the component is added to the game, it's update and draw methods will be called from the main game loop. The update function will receive the "deltaT" parameter which is the delta time since the previous call to the update method. The draw method also receives the "deltaT" parameter, and also receives the canvas context as a second parameter, which the component can use to draw on the game canvas. You can see an example of adding the most simple Glue component to the already running Glue game below:

glue.module.create(['glue/game'], function (Game) {
    Game.add({
        update: function (deltaT) {
            console.log('update', deltaT);
        },
        draw: function (deltaT, context) {
            console.log('draw', deltaT, context);
        }
    });
});