Windows Phone 7 Game Development Tutorial Lesson2

Welcome back to this workshop. In this lesson you will learn your way around the Visual Studio 2010 express IDE.

If you closed VS2010 since the last lesson you will be greeted by this screen on startup. Your empty project from Lesson one should show up under recent projects.

VS2010 Startscreen

Visual Studio Start Up Screen

Select your project by clicking on it or follow the instructions in lesson 1 to create a new one.

The first thing you need to do when your project is loaded is changing the target from a real phone to the emulator. To do this you find a pulldown on the lowest toolbar right over the editor window. Change this from ‘Windows Phone 7 Device’ to ‘Windows Phone 7 Emulator’.

EditorView

Visual Studio 2010

Now let’s have a look around the screen. On the right side you see the solution explorer. All files in you project are shown here. You see there are quite some files already, even if we did nothing other than creating an empty project. If you know XNA 3.1 you should pay attention to the fact, that the Content is now in a separate project.

Please activate line numbers before you read further.

Okay, let’s check out the code already generated.

Everything starts here in the Programm.cs. The file is closed, you have to open it by double clicking on it.

ProgrammCS

Programm.cs

Basically all that happens here is that an instance of a game object is created and told to run.

Wait! What? What the hell is an instance of a game object?

Quick introduction into object oriented programming: Skip if you know what you do.

Object oriented programming is a way of structuring your code in a way that groups code parts into different classes. A class is the description for an actual object. A class could for example be ‘computer’. The class has certain attributes and things it can do, named methods. So let’s say out computer has the attributes cpu and ram to make it simple and can do certain things. To keep this simple a computer can be started and stopped. That would look like this:

class Computer{
string ram;
string cpu;
bool running;
public Computer(String memory, String processor)
{
this.ram = memory;
this.cpu = processor;
this.running = false;
}
public void start()
{
this.running = true;
}
public void stop()
{
this.running = false;
}
}

This is a description how a Computer object is build. So when i use this somewhere in my program/game i would do something like this:

Computer my_example_computer_1;

Computer my_example_computer_2;

my_example_computer_1 = new Computer(“2GB”, “Pentium 4”);

my_example_computer_2 = new Computer(“8GB”, “i5-2500K”);

//And than i start e. g. the i5 with this command

my_example_computer_2.start();

the method ‘public Computer(String memory, String processor)’ is called the constructor. This one is executed whenever a new object of the type ‘Computer’ is created. You may have more than one constructor in your class, but they must have different parameters. A constructor public Computer(int mem, string cpu) would be allowed, a constructor public Computer(String name, String colour) isn’t allowed.

In Programm.cs on line 13 you see a constructor call to create a new object from the type Game. The description for the game object is the Game class. You find it in the Game.cs file.

So let’s see what is in there.

Game.cs

Game class

In the upper half of the Game class we see the methods:

The methods commends are really good so you should read them.

  1. The constructor: This is the method that controls the building of the Game object. It is called to ‘construct’ a Game object, hence the name.
  2. Initialize: This method is first called when your Game object starts running. Remember in Programm.cs there is a game.run() call after the constructor is used to build the object. In this method you can do all the stuff that you need to do before your game really starts. But you cannot do any graphic related stuff here. For that you can use the …
  3. LoadContent: Here you load your graphic related content. UnloadContent is does the opposite. Usually it is not required to unload your content, but in complex games there might be a need in special cases.
Game.cs part 2

Game class

  1. Update is called every frame. In here you do all the logic stuff. You update e. g. play positions, Artificial intelligence information and states. You handle the user input, play sounds etc.
  2. Draw does what the name hints at. Here all the drawing to the screen happens.

Before we take a closer look at the code already in this methods, let’s have some fun and have this ‘game’ running on the emulator.

To compile, that means translate the written code into something the machine (phone in this case) understands, you need to click on the small green arrow in the toolbar. Make sure you have changed the target from ‘Windows Phone 7 Device’ to ‘Windows Phone 7 Emulator’. I forgot this in some of the screenshots.

compile

Run Game

The Windows Phone 7 Emulator starts automatically and you see this screen:

Windows Phone 7 Emulator

Windows Phone 7 Emulator

Followed by the screen of your first game. It still doesn’t do much … it is just a ‘CornflowerBlue’ colored screen. And that is the first thing we change.

Find this line in your Draw method “GraphicsDevice.Clear(Color.CornflowerBlue);”

This line is doing some important stuff for your. It calls Clear(parameters) on the GraphicsDevice object. Clear cleans you screen of any output already on it. This is important because you want only your current frame on it and not everything else from all the previous frames. Color.CornflowerBlue tells the GraphicsDevice what the background color should be. As nothing else is drawn at the moment, the whole screen is filled with this color.

End your game  and try changing this color to something else.

You can end your game by closing the emulator, don’t worry about the error shown by Visual Studio. Or by clicking on the Stop symbol in the Visual Studio toolbar.

How to change the color (try it on your own first!): Answer

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: