Bizzy Bees Step 1: Setting the stage (XNA walkthrough)

This is part of a walkthrough series on creating a game (Bizzy Bees) in XNA

Overview
Step 1: Setting the stage (projects and assets)
Step 2: Drawing the scene
Step 3: Adding flowers
Step 4: Making things move
Step 5: Adding some bees to the mix
Step 6: User interaction
Step 7: Rounding it up

The architecture of a game with a gameloop

XNA is very different from winforms applications or Silverlight apps in that it is not eventdriven but rather uses the concept of a GameLoop where you update and redraw the whole surface for each frame. On Windows Phone by default you draw 30 frames per second, so 30 times per second you update the locations of the objects, check for user input and redraw the screen.

The picture below shows the lifetime of any game written in XNA, whether it is on Windows Phone, XBox or Windows

Initialize – This is where we set the stage, set up the levels etc.  this is essentially the constructor of the whole game

LoadContent – This is where we load all the graphical assets, sounds and fonts we will use later

The Update/Draw loop – This loops 30 times per second (if you use the defaults for WP7).  If, for example you have a car that will move from the left to the right on the screen you would update it’s x position a small fraction in every update, and then in draw you would draw the image of the car with the updated position.  If you think of it as a film reel, you draw one frame in the real everytime draw is called, and the update is there to be able to change the scene between draws.

UnloadContent – most XNA developers never have to care about this since content is unloaded automatically if you use the content pipeline provided with XNA, but this method is called at the end of the game and can be used to clean up complex structures.

When you create an XNA project in Visual Studio this is all set up for you. 

The architecture of the Bizzy Bees game

The assets we are going to use in our game consist of 5 png images. 

First off we have the background layer that always sits statically in the background.

Same with the foreground layer and the HUD (score panel)

Think of it a little bit like a puppet show where these are the background and the foreground and then our main characters (the flowers and the bees) will be positioned in front of the background layer but behind the foreground layer.  This is a trick we can play so that the flowers look like they disappear when they reach the bottom, and we don’t have to do a bunch of funky clipping of images etc.

Our “players” are a number of colored bees and flowers, and because it is quite costly to load images, rather than putting them in separate files we use something called spritemaps where all the bees exist in one single image. When we want to display a blue bee for example, we just display the first part of the bee spritemap.

I have choosen to create 4 different classes to help out with separating the code.  Column, BeePicker, Bee and Flower. 

The columns corespond to the blue and purple columns you see on the background, and each column contains a list of flowers that it updates and draws.  All the logic for removing and adding flowers is also contained in the columns.

A flower just has some basic information about where it is positioned and what color it is.

The beepicker is the bottom area of the screen where the bees appear  and it, in turn has a list of bees and handles the selection, updating and drawing of the bees.

Similar to the flowers, the bees have a color.

If you want to follow along you can download the images above, you are welcome to use them in demos or samples, but I would like to kindly ask that you put a note in about where you got them if you do so.

Setting up the projects and importing the assets

1. Download the developer tools for Windows Phone from https://create.msdn.com

2. Create a Visual C#/XNA Game Studio 4.0/Windows Phone Game project

3. In the content project that is created along with the game project, drop the images. (you can see this project in the solution explorer)

as soon as you have dropped them there the XNA content pipeline has turned them into Texture assets that we can use in the project.  No matter if you drop a jpg, a bmp or a png, the content pipeline will know what to do with it and turn it into a Texture2D, so you dont have to worry about dealing with different file formats in your code.

In the next article we’ll get started by drawing the backdrop for the game.