In my last blog post I described two environments for developing Windows Phone 7 applications: XNA for games and graphical applications, and Silverlight for more traditional touch-based, data oriented applications.
In this blog I will demonstrate the beginnings of re-engineering a QML causal game application for the Windows Phone 7 XNA framework. This blog will concentrate on the setup of the game board and definition of each game component.
The demonstration application is a game called QML bounce. It is an animated interactive version of the Russian fable “Kolobok,” which is about a ball of dough that grandma is preparing for baking bread that comes to life and leads grandma and grandpa in a game of cat and mouse across the countryside. In our game, the “Kolobok” will move or bounce around the game board and avoid obstacles that can block its way or diminish its health. To make the game fit on a small screen, “Kolobok” is allowed to bounce vertically in addition to moving across the screen. The vertical direction is divided into 4 or 5 levels with each containing obstacles such as walls, cacti, or fire. To make the game visually appealing, the fire is animated to give it a burning effect. The source for the game can be found at https://projects.developer.nokia.com/qmlbounce.
The image below shows the QML Bounce game board:
The QML version of the game is broken into several files. Each one of these represents a game component. The main QML files are:
- gameboard.qml – the game board and all of the static game board components such as rocks and cacti
- Fire.qml – the animated fire obstacle
- Kolobok.qml – the animated “Kolobok” character that interacts with the user
- Menu.qml – the on-screen menu for performing in app purchases
The QML Bounce game also requires three C++ support files for reading the game board obstacles from a “game level” database and providing the level’s obstacles to the QML game board. These files include:
- level.cpp – the current game board’s level, containing obstacle locations, and methods for detecting collisions between the obstacles and the “Kolobok”
- levelmodel.cpp – the object and methods for accessing the game level database
- levelcontroller.cpp – which provides the means for purchasing new game board levels from the OVI store.
To re-engineer the QML Game to the Windows Phone, we must re-engineer each of these files. We will begin the process by moving the functionality of each QML file into a corresponding XNA C# file. Next we will add the objects and methods to implement the game level, game level model, and the ability to purchase new game levels within the application. Finally, we will implement the game board update and draw methods to handle the rendering of the game board and user input.
The next few blogs will concentrate on re-implementing the QML files in C# XNA.
One of the more noticeable differences between QML and XNA is that QML visual elements are self displaying, whereas XNA objects must be drawn by the XNA game object. To re-engineer the game for Windows Phone 7, we start by creating an XNA game project in visual studio that will generate a file game-1.cs which includes an XNA graphics component, derived from the class Microsoft.Xna.Framework.Game. This class contains a “GraphicsDeviceManager” and “SpriteBatch”. The GraphicsDeviceManager will be managed by XNA itself. The spriteBatch will provide a context to the drawing method for rendering the game graphics onto the screen. We will modify this file to create all of the top level components including the game board, pieces, controls, and menus.
The XNA game file includes three main virtual methods that must be implemented for the game to operate. These are the Initialize, Update, and Draw methods. The initialize method is called after the game object is constructed and allows the game to perform any initialization it requires before starting to run. The Update method will be called whenever we need to update the state of the game and collect input from the user. For our game, the Update method will be called at the game frame rate of 60 times per second. After each update, XNA will call the Draw method to update the game graphics. Usually Draw will be called at the frame rate, unless an update occurs before Draw is called. This might happen if an Update takes too long and extends beyond the period of the frame rate.
We will handle input and call methods to update the game board in the Update method. We will call methods to re-draw the game board from the Draw method. The game board, in turn, will update and draw all the lower level game components.
In my next blog I will demonstrate how to re-engineer the QML game board in gameboard.qml and the Kolobok character in kolobok.qml to corresponding XNA / C# files for Windows Phone 7. The following blog will show how I animate the fire obstacle and process input.
