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.
- 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.
- TweenJS – Tweening 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.
- 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
I’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.
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
- Download EaselJS. Grab as a ZIP, or clone with Github for Windows.
- Save/extract to a reusable place (like “C:\Code\CreateJS\EaselJS”).
- 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.
- Back in Visual Studio, in Solution Explorer, find the “js” folder. Right-click and add a new folder named “createjs”.
- Drag and drop easeljs-<version>.min.js file from step 3 into that new “createjs” folder:
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:
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.
First, we’ll need a canvas to draw on, so in default.html, replace the default <p> element with a new <canvas>:
<canvas id="gameCanvas" width="800" height="600"></canvas>
Then, just add the init() function after. Something like this:
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 DisplayObject – Bitmap, 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:
[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:
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:
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.]
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.
You can get an idea of the supported features in this test suite:
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:
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:
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!