Chris Bowen's Blog

Development Practices, Tools, Technology, and Community

Using CreateJS in your JavaScript-Based Windows 8 Game

Using CreateJS in your JavaScript-Based Windows 8 Game

Rate This
  • Comments 2

So, you’re making a Windows Store game using JavaScript and HTML5?  Excellent!

The good news is many others have created games with web-based technologies and, with many common features that games need, some great libraries have emerged to make things easier.

imageCreateJS is a set of JavaScript libraries and tools for games and other kinds of apps:

  • EaselJS – The HTML5 canvas element is a great way to create games, but displaying, managing, and moving things can be tricky.  EaselJS makes this (and more) easier.
  • TweenJSTweening is about showing transitions from one state/value to another.  TweenJS offers ways to change, animate, and ease transitions of values and properties.  Move something across the screen, make something pulse when clicked, cycle through colors, whatever you’d like.
  • SoundJS – You want to play sounds.  Sounds aren’t always easy in JavaScript.  This helps change that.
  • PreloadJS – Helps manage the loading of sounds, images, data, etc. to help with efficiency and consistency.
  • Zoë – A tool that exports SWF animations to sprite sheets used with EaselJS

 

imageimageI’ve used CreateJS in my “Catapult Wars” WinJS tutorial series and, certainly far more impressively, the Atari arcade game experience was developed using CreateJS as well (and there are many other examples.)

We’ll focus on EaselJS for now, but more on the other parts of CreateJS at the end of the article.

Getting Started

First, you’ll need a Windows Store game into which you’ll plug CreateJS.  In Visual Studio 2012, create a new project and choose JavaScript –> Windows Store –> Blank App:

image

If this is your first look at JavaScript Windows Store apps, read Getting started with Windows Store apps and Part 1: Create a "Hello, world" app for a good background.  Also, read “JavaScript templates for Windows Store apps” to learn about the moving parts in the “Blank App” template.

The key places to put your own content are default.html, /js/default.js, and /css/default.css.

Go ahead and run it (just press F5).  Now, aren’t you glad you did?  We’ll make things less boring more game-like soon.

Plugging in CreateJS

imageLet’s get started.  We’ll focus on EaselJS here, but every part of CreateJS can be added the same way.

  1. Download EaselJS.  Grab as a ZIP, or clone with Github for Windows.
  2. Save/extract to a reusable place (like “C:\Code\CreateJS\EaselJS”).
  3. Find the “lib” folder and easeljs-<version>.min.js.  This has everything you’ll need, compacted and ready to go.  Keep this ready for step 5.
  4. Back in Visual Studio, in Solution Explorer, find the “js” folder.  Right-click and add a new folder named “createjs”.
  5. Drag and drop easeljs-<version>.min.js file from step 3 into that new “createjs” folder:

 

image

EaselJS is ready to use, but our game still doesn’t “know” about it.  Open default.html and simply drag the EaselJS file you added right into the source.  Visual Studio will wire up the reference for you:

image

Okay, let’s play!

How EaselJS Works

EaselJS focuses on making it easier to work with the HTML5 canvas element.  A few of the key classes:

  • Stage – The Stage is essentially your ambassador to the canvas, coordinating everything to be drawn and redrawing based on the “tick” (a kind of heartbeat), that’s very much aligned with game loop concepts.
  • Ticker – Keeper of the “tick”, this class lets you manage and get details about the timing of the game.
  • DisplayObject – Base class for things you’ll display and move:  Bitmap, Text, Shape, et al.
  • SpriteSheet – A set/series of images that are viewed one at a time to create an animation effect.  See the SpriteSheet demo for an example.
  • Filter – You don’t use Filter directly, but its subclasses (ColorFilter, ColorMatrixFilter, BoxBlurFilter, AlphaMapFilter, AlphaMaskFilter) are great for applying effects.  See the Filters demo to see them in action. 

There’s more of course (see the online EaselJS docs, and examples like the API Demo for more), but these will get things started.  Speaking of which…

Getting Started

First, we’ll need a canvas to draw on, so in default.html, replace the default <p> element with a new <canvas>:

<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
</body>

(For simplicity, the canvas is fixed size, but a real game would use JavaScript to scale it automatically based on screen size.)

Now, some JavaScript to get things started.  We’ll add an init() function and have it called when everything is ready.  In default.js, find the app.onactivated handler.  Change this line:

args.setPromise(WinJS.UI.processAll());

to this:

args.setPromise(WinJS.UI.processAll().then(init));

Then, just add the init() function after.  Something like this:

image

Setting the Stage

Init needs to:

  • Create a Stage and point to our canvas
  • Create some Shapes to draw – You could also add anything else derived from DisplayObjectBitmap, Text, etc.
  • Add the Shapes to the Stage – The Stage will then be able to manage them as “children”
  • Update the Stage – This refreshes the canvas, putting things into action

Let’s add that to init(), along with a few variables:

image

[Note that with recent versions of EaselJS, classes are namespaced so you’ll need “createjs.” before any uses.  Keep this in mind if you’re looking at older examples.]

Run the game and you’ll have something like this:

image

Yes, it’s your game equivalent of “Hello, world”, but at least there’s something game-like on the screen!

Getting the Ball Rolling

We won’t create the full game here, but here’s a taste of how to add a game loop with some basic motion.

Add the following to the end of init() and a new gameLoop() function:

image

We’re asking the Ticker class to start the game’s heartbeat.  30 frames per second, it will call the gameLoop() function, where you would place code to read input, move things about, check for collisions, end the game, etc.  [Note you need the stage.update() call to have EaselJS refresh the canvas based on what you’ve changed.]

image

For now, the ball simply moves slowly, sadly fated to move in one direction… forever.  Now’s your chance to step in to move the paddles, bounce the ball, score points, etc.

For deeper use of EaselJS, including input, collisions, and scoring, see my Catapult Wars tutorial series.  There are also some helpful demos on the CreateJS site, and more as part of the EaselJS download.

Other CreateJS Family Members

Congratulations!  You’re ready to put EaselJS to good use in your game, saving you time and trouble.  The other libraries in the CreateJS family can save you time as well, so a quick introduction is in order.

imageSoundJS

Sound can be very tricky in JavaScript-based games, and SoundJS handles detecting playback capabilities, and give you ways to play, pause, loop, and overlap sounds that would take a bunch of manual code to get working consistently.

You can get an idea of the supported features in this test suite:

image

imageTweenJS

Tweening is about adjusting values from a start to an end.  It could be animating the position of a ball, the size or rotation of a paddle, or even other attributes like something’s color.  TweenJS supports tweening, including chained calls and delays.  Here’s an example:

image

TweenJS also offers a set of easing functions.  Easing is a function that controls the rate of change. 

For example, you could simply move from A to B at constant rate, but for a more polished effect, you could start motion from A slowly, move quickly across the screen, then slow down to settle into position B.  (This is called ease in/out.)  Here’s an example that shows various easing functions:

image

imagePreloadJS

PreloadJS can be useful to load and instantiate your graphics, sounds, and other assets so they’re ready to go in your game.

You can load individual files, or specify a manifest of multiple assets to load and indicate how you’d like to process them.

I hope you find this guide and these libraries useful.  Good luck with your Windows Store game!

-Chris

  • Dear Chris,

    1. I have problem in your tutorial of catapults. After follow all the step I can see all the image but it did't fire anythings. Only got a static image for my game. The error message related to preload.js.

    Here is the error message prompt in Viusal Studio:

    Exception was thrown at line 32, column 273 in ms-appx://8cbfdfb4-58a2-409c-a044-380d366a4c60/js/CreateJS/preloadjs-0.1.0.min.js

    0x800a139e - JavaScript runtime error: InvalidStateError

    The program '[4288] WWAHost.exe' has exited with code 1 (0x1).

    2. My 2nd question the implmentation of init. This implementation also different in your Catapults tutorial.

    Inside tutorial there are nothing add to "args.setPromise(WinJS.UI.processAll()); ".

    But about sample is   " args.setPromise(WinJS.UI.processAll().then(init)); " The ".then(init) " was added.

    3. My 3th question is the " preload = new createjs.PreloadJS();" is different as well.  There are no createjs add to catapults tutorial.

    Would you please help me on this.

    Thanks in advance.

    kc

  • Dear Chris,

    I already figure out how to use the catapult sample game. All of them need to add "createjs." in front of Bitmap, Triker, Text, Point, Stage and Preload.

    If you add all this the sample will work.

    Thanks a lot.

    KC

Page 1 of 1 (2 items)