Now that we're rendering balloons to our game screen, we're going to introduce a concept called the game loop. All games basically do three things when they're rendering content to the screen. They will load the content when they start, then will apply updates to the game world, and then they'll render and draw that game world to the screen. Efficient code here is really important to your game's performance. So we want to make sure we're unloading resources if we're not using them. And we also want to make sure we're only turning on sensors like the accelerometer when we need them. So a game loop looks a lot like this.
We're going to initialize and load some content and then we're going to go into what's called an update draw loop. Update will take all changes that are happening to those objects on the screen and then we'll go ahead and draw and render a frame to the screen. At the end, we'll unload that content. If you have done any kind of game development on the web, you maybe familiar with something called setInterval. In this example, I have an initialize function where I call setInterval and I tell it my game loop will be called gameLoop and then I do some math. So frames per second, if I want 30 frames per second, I'm dividing 1000 because this is in milliseconds by 30 and then gameLoop will update and draw.
It will continue to update and draw throughout my game. Windows 8 is built on a bunch of HTML5 features. One of those features is called RequestAnimationFrame. RequestAnimationFrame will allow you to render objects to the screen across the GPU. So this is fully hardware accelerated. The way that we declare this is to do a function update, I'm creating anim, my variable for handling the RequestAnimationFrame, and I'm calling into window.msRequestAnimationFrame with update as the parameter.
Note for our game, we won't have to add the ms prefix because RequestAnimationFrame has now become a standard. If you're using old code on the web, you may want to keep in msRequestAnimationFrame as well as other browser prefixes. But because we're coding for Windows, we can be assured that we have the latest copy of IE and we only need to do RequestAnimationFrame. Then we're checking to see if we have the menu. If we do, we draw the menu, else we update draw. This is the actual game loop that we'll be using in our game.
So let's go over to our game and we're going to add a new handler, so the anim handler for default.js. We'll put this at the top, and then we're going to add the update function inside of our initialize method. Now we need to implement that method. We are going to put that before app.onactivated. You'll see we're calling in to function update and now for anim, we're doing window.RequestAnimationFrame, removing the ms prefix.
This is going to give us very fast performance running against the GPU. Our update and draw methods will be called updateBalloons and drawBalloons. Let's go ahead and implement them now. So I now have a function for update and a function for draw. Because I'm not feeling out updateBalloons or drawBalloons, when we run this, we now have a running game loop. Let's go ahead and look at implementing that with some changes.
- Setting up your Visual Studio 2012 development environment
- Laying out the interface with Canvas
- Creating a game loop
- Adding a menu
- Supporting snapped, filled, and full-screen modes
- Working with the Touch API
- Playing music
- Creating a scoring and leveling system
- Working with the Application Bar
- Accessing the camera and accelerometer
- Debugging and deploying your application