Develop a Windows 8 app in 30 days
Feel free to check out Chris Bowen's blog at http://blogs.msdn.com/cbowen?
Creating a Simple Windows 8 Game Series:
- Part 1 – Windows 8 App Basics
- Part 2 – Game Basics & CreateJS/EaselJS
- Part 3 – Game Logic
- Part 4 – Input & Sound
The game is based on the XNA sample game "Catapult Wars Lab". We’ll reuse the assets from that game as we develop a new version for Windows 8 that’s based on web technologies.
This game focuses on simplicity, so there are a number of intermediate techniques that aren’t used in this sample. For more comprehensive samples, see "Further Reading" at the end of this post.
Let’s get started. In this post, we’ll focus on the basics of a Windows 8 project.
To develop this game (or any Windows 8 Metro style application) you need to have both Windows 8 and Visual Studio 2012. Download and install these before moving on. We won’t cover that here because it’s explained well online.
Creating the Project
Name the project "CatapultGame" and click OK create the project. There is some guidance about the Blank App template, but I’ll give you a quick tour now.
Understanding the Project
So, what did we get? Open some files in Solution Explorer and take a look around. If you expand all of the folders, you’ll see something like this:
Here are the main parts to focus on:
- /css/default.css – Starter CSS, including basics for handling screen changes via media queries. We’ll also build on this later.
- default.html – The root HTML page for our game
- package.appxmanifest – Contains many settings that help you personalize the application. It’s XML, but if you double-click to open you’ll get a friendly interface for changing settings.
Also, the "images" folder has some default content used by the app for logos and a splash screen. You’ll want to add your own.
Running the Game ... Well, the Empty Project
So, let’s run the project to see what we get. First, there are some options for running the project:
Using the local machine is the default, but it’s also easy to connect to another machine with Remote Machine so you can run and use the project on the target machine, while debugging on your local machine. Simulator lets you test various screen sizes/resolutions, simulate touch input, adjust location, and more.
For now, let’s run with Local Machine (click the button, press F5, or choose DEBUG -> Start Debugging).
A fun game, indeed!
So, where did that "Content goes here" text come from? Open default.html, and here’s what you should see:
What’s going on here?
- Line 1 – Says we’re targeting HTML5
- Lines 12-14 – Other references, including the default JS and CSS files. We’ll be adding others here later.
- Lines 16-18 – The body of our HTML page
As you can see, it’s just basic HTML. Go ahead and have a little fun changing the HTML in the <body> and running again.
Where CSS Fits In
CSS styles work by identifying (selecting) target elements and applying effects – color, shadow, text, transitions, transforms, layout… the list goes on. CSS has so many features to help us create amazing effects, it would be ridiculous to attempt an overview here. Just know that Visual Studio 2012 has many features to help you create and modify styles, and the more CSS you know, the more effective you’ll be.
Take a look at /css/default.css:
By default, no styles are being applied, but what is this for?
- Lines 1 & 2 – This selects the <body> tag of any page that references this file and will apply to that content any style rules we add.
- Lines 4-14 – These are CSS Media Queries, incredibly useful for adapting layout based on how the content is being displayed. In this case, there are states in which Metro style apps can run – full screen landscape, filled, snapped, and full screen portrait - and these map to the four regions. You can use this approach to customize your game to best utilize the available screen space.
We’ll add to this later. Stay tuned.
We’ve seen HTML content & CSS styles, but how do things come to life? How can the game "know" what’s going on?
Let’s switch over to the js/default.js file and take a look:
It may look like a lot, but it’s pretty straightforward, just there to help us get started:
- Lines 6-7 – Variables for the frequently-used Application and Activation classes.
- Line 8 – Calling WinJS.strictProcessing enables strict declarative processing (helping to detect errors more easily)
- Lines 10-21 – Activation code. First TODO is when the app is newly launched, second TODO is where we can load saved state when the app returns from being suspended by Windows.
- Lines 23-30 – A chance to save state before the app is suspended. Particularly important because suspension can be followed by termination, and if the game’s state isn’t saved here, the player has to start over when he/she returns to the game.
This is where we’ll soon add the game’s logic. From code to load images, managing the game world, and various helper functions, to the game loop to control updating state and displaying content.
That was a brief overview of the basic gears and pulleys behind a Metro style application. In part 2, we’ll start creating the game by bringing in content from the "Catapult Wars" starter project and getting the game’s basic structure in place.