Getting Started with Game Development in CreateJS ~ Web Speaks

CreateJS is a suite of JavaScript libraries and tools for creating rich and interactive web applications. CreateJS can be used for creating web pages, presentations as well as rich HTML5 games. CreateJS is basically a bunch of 4 different libraries which are:

EaseJS
TweenJS
SoundJS
PreloadJS

Introduction to CreateJS

Live Demo Download Script

In this beginners tutorial we will see how to create our first application using createjs. We will see the folder structure as well as the code creating for the createjs application.

Folder Structure

HTML Markup

CreateJS works on HTML5 canvas. So we will include a canvas element on our web page.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
 </head>
    <body onload="onDeviceReady()">
        <div id="main">
   <h2>Click on the butterfly <br>to make it fly</h2>
            <canvas class="canvas" id="canvas" style="border:1px solid;" width="1000" height="800" />
  </div>

        <script src="js/easeljs-0.7.0.min.js" charset="utf-8" async defer></script>
        <script src="js/tweenjs-0.5.1.min.js" charset="utf-8" async defer></script>
        <script src="js/preloadjs-0.4.1.min.js" async defer></script>
        <script src="js/myapp.js" charset="utf-8" async defer></script>

        <script type="text/javascript" charset="utf-8" async defer>
            function onDeviceReady() {
                init_app(); 
            }
        </script>
    </body>
</html>

Initializing the App

Here is the JavaScript code to initialize our application. We have defined few global variables that will be used throughout the application. The important part is to create the createjs 'stage' object. Stage acts as the base container for our application. All the future objects are added to this stage. We can say that the entire scope of our application lies within this stage object.

//Global variables
var canvas,
 stage,
 manifest,
 preloader,
 butterfly;
var loaderOut,
 loading,
 loader;

//Bootstrap our application
function init_app() {
 canvas = document.getElementById("canvas");
 //create the stage
 stage = new createjs.Stage(canvas);
 //Mouse events are enabled on the stage
 stage.mouseEventsEnabled = true;

 WIDTH = canvas.width;
 HEIGHT = canvas.height;

 show_loader();
 load_resources();
}

Show the Loading bar

CreateJS load our resources asynchronously. It supports resource preloading, so it is easy to trap the progress of resource loading. This is enabled by the use of 'PreloadJS' library. Here we can see how we can trap thhe file loading and show a loading bar when the appplication starts.

//Show the Loading bar
function show_loader() {
 //Create the rectangular loader
 loaderOut = new createjs.Shape();
 loader = new createjs.Shape();
 //Place the loader at the center of canvas
 loaderOut.y = HEIGHT/2;
 loader.y = HEIGHT/2;
 
 //The loading text
 loading = new createjs.Text("Loading the app...", "bold italic 26px Papyrus, fantasy", "#ff7700");
 loading.x = 400;
 loading.y = 350;
 //Add to stage
 stage.addChild(loading);
}

//Asynchronously load the resources in our app
function load_resources() {
 //All resources to be loaded are added to the manifest
 manifest = [
  {src: "assets/bg.jpg", id: "bg"},
  {src: "assets/butterfly.png", id: "butterfly"}
 ];

 //Create a resource queue
 //'true' means use AJAX will be used to load resources
 preloader = new createjs.LoadQueue(true);

 //Attatch tthe file load event handlers
 preloader.on("progress", handleProgress, this);
 preloader.on("fileload", handleFileLoad, this);
 preloader.on("complete", handleComplete, this);
 preloader.loadManifest(manifest, true);
}

//Update the progress bar
function handleProgress(e) {
 loader.x = WIDTH/2 - 100;
 loader.graphics.beginFill("#C33").setStrokeStyle(3).beginStroke("rgba(232,230,231, 1)")
  .drawRect(0, 0, 200*e.progress, 30);
 stage.addChild(loader);

 loaderOut.x = WIDTH/2 - 100;
 loaderOut.graphics.beginStroke("#C33").drawRect(0, 0, 200, 30);
 stage.addChild(loaderOut);
 stage.update();
}

//Individual file load event handler
function handleFileLoad(e) {
 console.log("File loaded");
}

//All files have finished loading
function handleComplete(e) {
 //create the scene after files have finished loading
 createScene();
}

Application Start Screen

Now our required resources have been loaded. SO we can start our application. We will add individual object to the stage. The objects can be placed at any position within the stage. CreateJS allows us to manipulate the properties like opacity(alpha) and scaling of the objects.

function createScene() {
 var background = preloader.getResult("bg"); //bg is the id of resource in manifest

 //Create the background
 var bg = new createjs.Shape();
 bg.x = 0; //distance from left
 bg.y = 0; //distance from top
 bg.graphics
  .beginBitmapFill(background, 'repeat')
  .drawRect(0, 0, WIDTH, HEIGHT); //create the rectangle

 //Add the background to the stage
 stage.addChild(bg);

 var _b = preloader.getItem("butterfly");
 butterfly = new createjs.Bitmap(_b.tag);
 butterfly.x  = WIDTH/2 - butterfly.image.width/2;
 butterfly.y = HEIGHT/2 - butterfly.image.height/2;
 butterfly.scaleX = 0.3;
 butterfly.scaleY = 0.3;
 
 //Attach click event to the butterfly
 butterfly.on("click", butterflyClicked);
 stage.addChild(butterfly);

 //Set the ticker
 createjs.Ticker.setFPS(20);
 // in order for the stage to continue to redraw 
 // call the tick event
 createjs.Ticker.addEventListener("tick", stage);
}

Animate the Objects

CreateJS provides us a very rich library 'TweenJs' for animating/tweening individual objects on the stage. Here we have animated the butterfly on the canvas. More rich animation effects can be generated.

function butterflyClicked(e) {
 createjs.Tween.get(e.target, {loop:true}, true) // get a new tween targeting circle
  .to({x:500, y:200, alpha:0.8}, 1000, createjs.Ease.get(1)) // tween x/y/alpha properties over 1s (1000ms) with ease out
  .to({x:0}, 1000, createjs.Ease.get(-1)) // tween x over 0.5s with ease in
  .to({x:600, y:500, alpha:0.8}, 1000, createjs.Ease.get(1)) // tween x/y/alpha properties over 1s (1000ms) with ease out
  .wait(300) // wait for 0.3s
  .to({y:200, alpha:1}, 800); // tween y/alpha over 0.8s
}

Getting Started with Game Development in CreateJS