Game Developement with CreateJS and Creatine

CreateJS is a collection of 4 libraries: EaselJS, PreloadJS, SoundJS and TweenJS. EaselJS provides tools to work with the HTML5 canvas; PreloadJS helps you to load the application assets; SoundJS to work with all kind of sounds; and finally, TweenJS provides interpolation functions for easing effects. Together, they allow you to create graphical and interactive applications in an easy and fast manner.

The thing is, the CreateJS suite does not focus on game development, thus, it lacks of important structures and algorithms that helps you to develop games. creatine logo

Having this in mind, I’m developing Creatine, which the first version was published today. Creatine aims to provide all algorithms and structures present in games today and that are not implemented on the CreateJS suite.

Take a look at some examples above, use the following code as base:

<!DOCTYPE html>
<html>
<head>

<script src="http://code.createjs.com/createjs-2013.12.12.min.js"></script>
<script src="creatine-0.1.min.js"></script>

<script>
    var canvas   = null;
    var stage    = null;
    var director = null;

    function init() {
        // code here

        createjs.Ticker.addEventListener('tick', onTick);
    }

    // update stage every tick
    function onTick() {
        stage.update();
    }
</script>
</head>
<body onLoad="init();">

<canvas id="canvas" width="600" height="300">alternate content</canvas>

</body>
</html>

 

Creating some Random Scenes

Let’s create some random scenes using Creatine. First you need to create the base objects:

function init() {
    canvas   = document.getElementById('canvas');
    stage    = new createjs.Stage(canvas);
    director = new creatine.Director(stage);
    
    director.replace(newScene());
    
    createjs.Ticker.addEventListener('tick', onTick);
}

Together with the base object, we create a new scene and add it to director at line 6, and registered 2 events at lines 8 and 9. The line 6 uses the function newScene(), let’s define it:

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

function createScene() {
    var scene = new creatine.Scene();

    var background = new createjs.Shape();
    background.graphics.beginFill(getRandomColor());
    background.graphics.drawRect(0, 0, canvas.width, canvas.height);
    scene.addChild(background);

    return scene;
}

The createScene function create a new empty scene and add a background with a random color. Now, when the user click on the stage let’s change the scene. Put this on init:

stage.on('stagemousedown', onClick);

And create the function onClick:

function onClick() {
    director.replace(createScene());
}

Done! Now check it out the result:

 Changing Scenes with Effects

To put some effect on the scene transition, just change the onClick function:

director.replace(createScene(), new creatine.transitions.MoveOut(creatine.LEFT));

Resulting on:

Learn More

To see more examples, check it out the official repository: https://github.com/renatopp/creatine

To know more about creatine, take a look at the official page: http://guineashots.com/creatine/

Your email address will not be published. Required fields are marked *

*