game development

Counting Down to Seven: Exploring XNA

by Joey deVilla on March 5, 2010

exploring xna largeCounting Down to Seven (Mar 15th at MIX 10): A series about ideas for mobile apps

Welcome to another article in the Counting Down to Seven series and the first article in the Exploring XNA series — it’s like the chocolate and peanut butter of mobile development!

If you haven’t read Windows Phone team member Charlie Kindel’s latest blog entry yet, do so now. In explaining what’s different in Windows Phone 7, he also lists some technologies that form it basis:

  • .NET
  • Silverlight
  • XNA
  • Web 2.0 standards
  • Microsoft’s developer tools

That’s right: along with Silverlight, one of the core elements of Windows Phone 7 is XNA, the toolset that makes it quite easy to build games for the PC, Xbox 360 and Zune. Kudos to those of you who ratiocinated that Silverlight and XNA would figure into Windows Phone: both are proven user interface technologies that have also shown that they’re capable of living on different platforms.

I’ll cover each of the core elements of Windows Phone 7 in the fullness of time, but for now, why don’t we start with what I consider to be the really fun one – XNA?

(It’s not only fun – it’s the gateway to customers: according to eMarketer, the number of people who play games on their phone has more than doubled in the past couple of years, from 155 million in 2007 to a predicted 340 million by the end of 2010.)

XNA: A Quick Overview

In the venerable geek tradition of using recursive acronyms to name things, XNA is short for “XNA’s Not Acronymed”. In the Microsoft-y tradition of using one name to represent a smorgasbord of things, XNA is a framework, toolset and runtime that makes it easier to build and deploy games.

XNA provides a great skeleton for building 2-D and 3-D games with a set of game-centric class libraries and a straightforward programming model. Its design frees you from a lot of the “yak shaving” and related drudgery involved in game development, letting you spend more time on programming the gameplay instead. Its “simple but not stupid” quality recently allowed me to walk a workshop of Humber College students from an initial “let’s draw a static sprite on the screen” project to a pretty decent “run around the game field, dodging the flying spinning blades” game, complete with animated sprites, sound effects and soundtrack and scoring, all in about three hours. Better still, we had fun doing it.

Required and Optional Tools for XNA Development

Here’s what you need (and some nice-to-haves) to get started with XNA development:

Required

  • Windows 7, Vista or XP, with the latest service packs installed.
  • Visual Studio 2008, which costs money, or Visual C# 2008 Express Edition, which is free-as-in-beer. Don’t let its being free throw you off; it’s a complete IDE and more than enough for developing games. As of this writing, the 2010 editions of Visual Studio, which have not yet hit the “Release to Manufacturing” stage, don’t support XNA game development yet.
  • XNA Game Studio 3.1. This is a set of Visual Studio add-ons and tools for developing games for Windows, Xbox 360 and Zune using XNA. This is also free-as-in-beer.

Optional

Platformer: XNA’s “Right Out of the Box” Game

If you’re the sort who wants to play a game before doing some game development, you’re in luck. XNA provides Platformer, a fully-functional “platform jumper” game as one of its project templates. You can simply treat is as a game, but that would be a waste – its true value is that in its source code are a lot of lessons in building 2-D games with XNA. I’m going to show you how to build a Platformer project.

(In the screenshots below, I opted to use free Visual C# 2008 Express. If you have one of the full version of Visual Studio, the experience will be similar.)

Start up Visual C# 2008 Express or Visual Studio. From the File menu, select New Project… You should see a dialog box like the one shown below appear.

image

In the Project types: list on the left-hand side of the dialog box, select Visual C# and the select XNA Game Studio 3.1 from its sub-menu. In the Templates list on the right-hand side of the dialog box, you should see a number of game application templates. Select Platformer Starter Kit. Fell free to the edit the contents of the Name: textbox if you want to give your project a different from the default and click the OK button.

Visual Studio will generate a new project. You’ll know because the Solution Explorer pane will be filled with projects and their files:

image

Press F5 to run the game. In moments, you’ll be greeted by the screen below:

image

Platformer looks like an homage to both platform games as well as Raiders of the Lost Ark. You’re represented by an Indiana Jones-esque sprite and must reach the “Exit” sign before time runs out. You have the option of collecting gems to increase your score.

You move to the next level if your reach the exit sign before time runs out:

image

Here’s level two, which features more platforms, more gems and a shambling mummy who can kill you with a touch:

image

Here’s level three, which is filled with platforms that you can jump through:

image

Make sure you check out the code for Platformer. Reading it is a great way to learn XNA game development techniques and tricks.

Hello, XNA!

Once you’re done playing Platformer, you might want to try your hand at XNA development. I’m not going to show you how to write anything resembling a game in this article (I’ll do that over the next few articles in this series), but I thought I’d quickly show you how to get the world’s simplest XNA application – in the best “Hello, World!” tradition – up and running.

Just as you did with Platformer, click on the File menu, select New Project… This time, when the New Project dialog box appears, select Windows Game (3.1), give the project a name in the Name text box (I chose HelloXNA) and click OK:

image

Visual Studio (or Visual C# Express) will then generate your game project.

A newly-created XNA game project has all its code living in a single class, which is given the name Game1, which in turn is stored in the file Game1.cs. I want to rename that class to HelloXNA. That’s easily done by moving the cursor over Game1 at the start of the class declaration, right-clicking on it, selecting Refactor from the menu that appears, and then Rename… from the submenu:

image

I could use good ol’ search-and-replace, but it blindly taking the search term and changing it into the replacement term, no matter where it is. Refactor –> Rename… is smarter; it does a true renaming of the identifier without mangling other identifiers that happen to contain the search term. It also allows you to specify whether you want to do the renaming in comments and string literals, which old-school search-and-replace doesn’t do.

When the Rename dialog box appears, enter the new name for the Game1 class, HelloXNA, into the New name: text box. Make sure that the Preview reference changes checkbox is checked before clicking OK:

image

If you checked the Preview reference changes checkbox in the previous dialog box, you’ll see a preview of the changes that will result if you apply Refactor –> Rename…. Click Apply to finalize the renaming:

image

You’ll see that the Game1 class and any references to it in the code have been changed to HelloXNA. For consistency’s sake, we’ll rename the Game1.cs file in which the class formerly known as Game1 to HelloXNA.cs in the Solution Explorer:

image

By default, a brand-new XNA game project without any code added to it does a very simple thing: it draws a blank screen with a cornflower blue background. If you hit F5 to run the application right now, you’ll see this:

image

Now “all you have to do” is write some game code! I’ll walk you through that process over the next few articles in this series.

Next Steps

Cover of O'Reilly's book "Learning XNA 3.0"

You could wait for the next article in this series, but if you’re rarin’ to learn how to develop games with XNA, let me recommend Learning XNA 3.0, written by Aaron Reed and published by O’Reilly. It has a 4.5-star rating at Amazon.com, which it’s earned – it’s a great introduction to XNA development. The first half of the book is devoted to 2-D game development, starting with drawing a sprite on the screen and finishing with a pretty complete game. The second half of the book adds the third dimension and works towards building a 3-D game.

image

You should also get a look at XNA Creators Club, the online community for XNA developers. It features:

  • Links to all the downloads you need to get started developing games with XNA
  • Starter kinds for various game genres – you get Platformer with XNA; you can download starter kits for other game genres, including:
    • Marblets: a marble colour-matching puzzle game.
    • Spacewar: the classic “spaceship vs. spaceship” game that comes in two flavours – retro and evolved.
    • Role-Playing Game: A tile-based RPG engine with support for character classes, multiple party members, items and quests.
    • Racing Game: A 3-D auto racing game featuring advanced graphics, audio and input processing, where you race against the ghost car for the best time.
    • Ship Game: 3-D spaceship combat in a tunnel system with advanced lighting and textures, a full GPU particle system and an advanced physics engine.
    • Net Rumble: A 2-D shooter showcasing XNA’s new multiplayer features in an arena with asteroids, power-ups and up to 16 players.
  • Forums to discuss ideas and ask questions with your fellow XNA game developers
  • A catalog of games created by members of the XNA game developer community. You can try out their games, submit games and vote for games to be included in the Xbox Indie Games catalog, whose games can be purchased through Xbox Live.

If you want to be a rock star on Windows Phone 7, you’re going to want to sharpen your XNA chops. Get a head start and take it out for a spin!

This article also appears in Canadian Developer Connection.

{ 1 comment }

Hello, Kodu!

by Joey deVilla on February 8, 2010

kodu game lab

Last week, I presented Kodu (pronounced “Code-ooh”) to a group of teachers and high school students at Corpus Christi Catholic Secondary School. Kodu is a system created by Microsoft Research for programming videogames without using a traditional programming language; instead, you use a combination of menus and visual programming. It was designed to be a gentle introduction to programming that would appeal to children, but many adults – myself included – have ended up getting drawn into it, spending hours constructing and tweaking game worlds.

Kodu was built using XNA, Microsoft’s framework, toolset and runtime environment for building games for Windows, Xbox 360 and Zune. It was released for the Xbox 360 last summer as an Xbox Indie Game; you can download it for 400 Xbox points — about 5 bucks – or you can try the free trial version (it’s time-limited, but full-featured). If you don’t have an Xbox 360, you can download the Windows version of Kodu for free.

Kodu’s a little tricky to describe – it’s one of those things that’s much easier to show rather than tell. Here are a couple of videos that should give you a bit of Kodu’s flavour. First, here’s IGN’s look at Kodu:

Here’s XNA Roundup’s review of Kodu:

Kodu was designed to be programmed with the Xbox 360 gamepad, which you can use if you’re programming it on the Xbox 360 or a computer (if you’re using a computer, you’ll need either a wired Xbox gamepad plugged into one of its USB ports or a USB adapter for your wireless Xbox gamepad). If you’re using Kodu on a computer, you have the additional option of using the keyboard and mouse.

This is the first of a series of articles on Kodu programming that will appear here from time to time. If you’ve got kids (or know some) who are curious about programming, or if you’re looking to try a completely different kind of programming, get Kodu on your Xbox or PC and give it a try!

In this first installment, I’ll show you how you can build a simple little program that lets you drive an avatar around a small world. In later installments, I’ll show you more game-like elements and the “code” for a game of mine called “Stupid Sparkling Vampire Game”.

Touring Teran00bia

In addition to a programming “language”, Kodu provides you with tools for editing the worlds in which your games take place. I often start with a simple, no-fuss world that I created called “Teran00bia”. It’s a small, flat square world suitable for experimentation. If you have the Windows version of Kodu, you can download Teran00bia here. I can also share the Xbox 360 version, but you have to “friend” me on Xbox Live first – my gamertag is “Accordion Guy”.

Teran00bia is a blank slate, a world with nothing in it. Here’s what it looks like when you load it:

kodu 00

In this exercise, we want to stick a single character – Kodu – into the world and allow the player to drive him around using the controller’s left stick.

To start programming, get into Edit Mode. Press the “Back” button on the gamepad to switch to Edit Mode. Your screen should now look like this:

01 world view

In Edit Mode, the left thumbstick moves your “cursor” (the purple “donut”) around the world, while the right thumbstick changes your camera angle. You use the left bumper (that’s the button just above the left trigger) to zoom out and the right bumper (the button above the right trigger) to zoom in. The screenshot below shows a zoomed-in view of Teran00bia:

02 closer up

The floating icons near the bottom of the screen make up Kodu’s menu. You use the left and right triggers to scroll through the menu and the A button to select a menu item.

Select the Object Tool from the menu. It’s the second menu item from the left, and its icon is Kodu, who looks sort of like a blue fish with an antenna. When you select the tool, the Kodu menu disappears and you’re now using the object tool, as shown below:

03 about to add

The Object Tool lets you add items to the world or edit any existing ones. There aren’t any items in the world at the moment, so let’s add one. Use the left thumbstick to move the cursor to the spot where you want to place an object, then press the A button. The following menu will appear:

04 add menu

This menu lists the items available to you. Starting at the top and going clockwise, the items in the menu are:

  • Kodu (the game system’s mascot, who can be used as either a player character or a non-player character)
  • Apple (useful as a health power-up, but nothing stops you from making them poisonous or explosive)
  • Bots 1 (a set of characters that can be used either as player characters or non-player characters)
  • Bots 2 (more characters that can be used either as players characters or non-player characters)
  • Objects (things that characters in the game can interact with, such as rocks, coins, castles and factories)
  • Tree (another object that characters in the game can interact with – I have no idea why trees weren’t part of the set of Objects)
  • Path (lets you draw paths which Kodu and the other bots can follow)

Use the left thumbstick to select Kodu from the menu, then press the A button to confirm the selection. A Kodu will appear:

05 kodu added

You can move Kodu around by pressing the A button to select him, using the left thumbstick to pick a new location and then pressing the A button to drop him there.

What we want to do is program Kodu to move in response to the left thumbstick, as is the convention for most Xbox 360 games. While Kodu is selected, press the Y button. The screen should look like this:

06 programming

Every programmable object in the Kodu game system has a set of behaviours, each one having two parts:

  • When, which describes the event that the object will respond to
  • Do, which describes what the object will do in response to the event

The behaviours are numbered starting at 1 and are listed in order of descending priority – that is, behaviour 1 has first priority, followed by behaviour 2, then behaviour 3, and so on.

Your programming “cursor” is the pencil. Move the pencil over the “+” in the “When” part of behaviour 1 and press the A button. You’ll see a menu pop up:

07 when menu

This menu lists the events to which Kodu can react. For now, we’re concerned with making him respond to the left thumbstick, which is part of the gamepad. Select “Gamepad” from the menu with the left thumbstick, then press the A button to confirm the selection. The menu will vanish and you’ll see that a “Gamepad” tile has been added to the “When” part of behaviour 1:

08 gamepad added

We need to specify which gamepad control Kodu should respond to. Make sure the pencil is over the “+” of the “When” part of behaviour 1, then press the A button. A menu containing various controls on the gamepad will appear:

09 gamepad menu

Use the left thumbstick to select “L stick”, then press the A button. The menu will disappear and you’ll see that the “When” part of behaviour 1 has two tiles: “Gamepad” and “L Stick”:

10 ks added

We’ve just described an event that Kodu should respond to. Now it’s time to describe the response. Move the pencil over the “+” of the “Do” part of behaviour 1 and press the A button. A new menu will appear:

11 move selected

This menu lists responses to events. In this case, we want Kodu to move where the player tells him to move, which is specified by the left thumbstick. Select “Move” from the menu with the left thumbstick, then press A to confirm the selection. The menu will vanish, and you’ll see that a “Move” tile has been added to the “Do” part of behaviour 1:

12 move added

We’ve now completely defined a single behaviour for Kodu: “When the player moves the left thumbstick, move in that direction”. It’s time to take our (admittedly simple) game for a spin.

Press the Back button to stop programming Kodu. You’ll now be in the Object Tool. Press the Back button again to return to Edit Mode, where Kodu’s main programming menu will become available. Use the left trigger to select Play Mode and press A to confirm the selection.

13 play selected

The program will start with the intro screen. Press A to dismiss the intro screen.

14 opening screen

You’ll now be in the game world. Use the left thumbstick to move Kodu around:

15 gameplay

Kodu moves, but he’s not so fast. Let’s look at a way to speed him up a little. Press the Back button to exit the program and return to Edit Mode. Use the triggers to select the Object Tool from the menu, then press the A button to confirm the selection.

16 stopped

Move the cursor under Kodu so that he’s selected:

17 kodu selected

Press the Y button to program Kodu. You’ll be return to his set of behaviours:

18 current program

Move the pencil over the “+” of the “Do” part of behaviour 1, the press the A button. A menu will appear:

19 quickly selected

The menu will contain modifiers for the “Move” response. Select “Quickly” from the menu using the left thumbstick, then press the A button. The menu will disappear and you’ll see a “Quickly” tile has been added to the “Do” part of behaviour 1:

20 1 quickly

To make Kodu move even faster, you can add another “Quickly”:

21 quickly selected 2

…in fact, you can add up to three “Quickly” tiles to push Kodu to his maximum speed:

23 3 quicklies

Play Around

I could cover more Kodu features, but you should use it the way it was meant to be used – experiment! Try adding other objects to the world and adding behaviours to them. Take a look at the  programming behind the worlds that were provided with the Kodu game system (be sure to check out “Left 4 Kodu Classic”, a cute Kodu version of the zombie thriller game Left 4 Dead).

Links

This article also appears in Canadian Developer Connection.

{ 3 comments }