The first post was a quick introduction to the moving parts in a basic Windows 8 App. In this post, we’ll start creating a game in earnest.
What Are We Building?
Here’s what the game looked like in the original XNA version:
We won’t go through adding all of these features, but we’ll get close!
Adding the Assets
- Download and extract the “Catapult Wars Lab” sample (CatapultWars_4_0.zip)
- From a Windows Explorer view of the folder, select and drag all four folders from the
/Assets/Media/Texturesfolder and in Visual Studio, place them under the images folder. (This will copy and add them to the project.)
- Create a new folder called
soundsin the root of the project.
- Copy the files from
/Assets/Media/Soundsto the new
Your project should look like this:
Now that we have some assets, let’s put them to use.
The Splash Screen & Logos
Notice that when you run the game, you first see an “X” in a square? That’s the splash screen, by default showing the
/images/splashscreen.png image, but we can do better. To adjust the splash screen, double-click the
/images/Backgrounds/gameplay_screen.png is what we want to use, but the image must be 620×300 pixels. So, open the image in your favorite editor, resize and save as
title_screen_620x300.png. Add that new file into the project.
Now we can set the
Splash screen field to
imagesBackgroundstitle_screen_620x300.png. While we’re here, pick whatever background color you’d like to complement the image (e.g.
darkGray). Now when run, the game greets us with a new splash screen:
We can also adjust the app’s tile, which by default looks like this:
Also in the app manifest, we see a number of places for logos. We can add 150×150, 310×150, and 30×30 logos for use in various places.
Now we have square and wide format custom tiles:
Looks good! Now if only we had a game to play…
Adding the HTML5 Canvas
First, we’re going to need something to display the game. The HTML5
canvas element is essentially a sandbox of pixels that you can draw to dynamically. We’re going to use a canvas to render the game, so we need to add it to our HTML page. Open
default.html and replace Line 17 (the
Content goes here line) with a canvas tag, so it looks like this:
Normally, you’d specify width & height and add fallback content in case canvas isn’t supported, but we’ll set width/height later and we know canvas will be supported. However, this is just one of the many times you should consider coding practices in case you want to reuse some of your app code as a traditional web application – but that’s a story for another series of posts…
Making Things Easier with CreateJS
/js/CreateJS, and copy in the scripts (from the
lib folders) as follows:
Tip: You can add script references by dragging the script from Solution Explorer onto the page. (Extra Tip: in HTML5, you don’t need the
We’ll use PreloadJS to help load assets before to use in the game and EaselJS to make it easier to manage the game loop and the drawing of image assets.
Starting the Game
To start the game, we need to know when the page is ready to run. For that, we use the
DOMContentLoaded event to tell us when the page structure has been loaded and scripts are ready to run. This is different from the onload event, which waits for all referenced content to be downloaded.
default.js, add an
initialize() function and have it called by
DOMContentLoaded. While we’re at it, let’s add the basis of the game loop as well:
app.oncheckpoint function is collapsed to make things easier to read.
To work with the canvas, store images, and create bitmaps, we’re going to need a bunch of variables. Also, because the original game assumed a 800×480 screen, we need to scale the images we draw to the actual screen size.
Add the following variables to
Initializing Canvas and Using PreloadJS
initialize() as follows:
Now we need to load our images so we can draw them to the canvas. There are many ways to do this, but PreloadJS is helpful because we can list what we’ll use and it ensures they are loaded before we reference them. If we don’t do this, we may not reliably get details like image sizes at runtime, creating bugs.
PreloadJS works by reading an array of resources, then calling a function when complete. We’ll specify all of the images we’ll be using.
initialize() function as follows:
When PreloadJS has readied our assets, the
prepareGame() method will be called.
Using EaselJS to Create and Draw Images
Now we need to get those images to the screen (via the canvas). Fortunately, EaselJS has a number of features we’ll find useful:
- A Stage class that manages the canvas and the scene we’re drawing
- Bitmap, Text, and SpriteSheet classes, useful for representing items to draw
- Point class to help position items on the canvas
- A Ticker class to help manage the game loop (think of it as the heartbeat of the game)
We’ll get to the Ticker a bit later, but now let’s add the Stage so we can start populating it with content. In
default.js, add the following to the
This creates the stage and connects it to our game’s canvas element. Now we can add items (called children) to the stage.
Right below the
initialize() function, add a
prepareGame() function. (Remember we told PreloadJS to call
prepareGame when it’s done loading assets.) For now, let’s just add one item – the background:
What’s going on here?
- Line 62 –
preload.getResult()is asking PreloadJS for the image it has already loaded for us
- Line 63 – Create an EaselJS
Bitmapinstance, using the image as it’s source
- Lines 64 & 65 – Scale the
Bitmapto the resolution of our screen (relative to 800×480 of the original assets)
- Line 66 – Add the
Stageas a child
- Line 68 – Ask the
Stageto tell the canvas about everything it knows
Let’s run the game. After the splash screen, we now see:
A Quick Change with CSS
As you can see, the background image we added is transparent, so our background color is showing through. The black background is spooky, but quite not what we’re looking for.
One thing we can do is to change which WinJS CSS base we’re using. By default, we use
ui-dark.css, but a quick change in
default.html to point to
ui-light.css, and things automatically pick up new styles:
A quick run now shows:
However, let’s try for a more sky-like color… say, “azure”. We can override the WinJS background color by setting our own via CSS. Open
/css/default.css and change the body style as shown:
A beautiful sky, ready for war!
Adding the Remaining Assets
Now that you’ve seen how to add the background. It’s mostly a matter of repetition to include the others (with a bit more math thrown in.) Head back to
default.js and include the following in
A few notes on this:
- The catapults appear at “ground level” which we need to scale along with the overall size of the images
- Drawing player 2’s catapult is tricky because we need it to face the other direction. Using
regXto set a transform point and setting a negative scale gets the job done.
- We create and add the ammo (boulder) image, but hide it until it’s fired later.
Adding Some Text
To wrap things up for this post, let’s use EaselJS’s
Text class to add a game title along with indicators for each player’s remaining catapults. First, we’ll need a few variables near the top of
Then, add the following to
Text instances are children just like the
Bitmaps we added earlier.
What does the game look like now?
Things are looking pretty good, but unfortunately that’s about it – nothing’s moving. In the next post, we’ll dive in to the game’s mechanics, fleshing out the game loop by adding motion, collision detection, scorekeeping, and the endgame.
Chris Bowen is a Principal Technical Evangelist with Microsoft, based in the Boston area and specializing in Windows 8 development. An architect and developer with over 19 years in the industry, he joined Microsoft after holding senior technical positions at companies including Monster.com, VistaPrint, and Staples. He is coauthor of two books (with Addison-Wesley and WROX) and holds an M.S. in Computer Science and a B.S. in Management Information Systems, both from Worcester Polytechnic Institute.