Game State Management for N00bs Like Me

Last week, I finished writing a design document that I’d been working on for about a month. The design review meeting seemed to go well — at least, I think it did. There were a lot of nodding heads around the room as I presented my design, and I like to think they were nodding in approval. The alternative is that they were nodding off to sleep, but I’m going to assume that wasn’t it. :-)

Anyway, after so long working on the same thing, I decided to take a look at something new and different this past weekend. I installed XNA Game Studio 2.0 and VC# 2005 Express Edition on my laptop at home and started to poke around at some samples. I downloaded Nazeeh’s Game State Management project template — something that I consider to be a terrific example of what a starter kit should really be — and created a project from it.

For those of you who are not familiar with this template, I’ll briefly describe it. It creates a project for a game that has a couple menu screens, and an animated loading screen to entertain people while larger screens (aka, game levels) load asynchronously in the background. It is a slick starting point for just about any game.

I ran the project and put breakpoints in a few places to see how things were being invoked to get a better understanding of the code. Then I modified a few things and found it was reasonably easy to make changes and customize the screens.

For those of you who don’t know me, my background is in tools. I make the programs that make it easier to develop games with the XNA Framework, but I don’t work on the XNA Framework libraries, and I hardly know anything about game programming. So when I looked at the sample code and saw how easy it was to customize the game state, the first thing I thought of was, "That’s pretty cool — but I can make this easier!"

The funny thing about things being easy is that they are usually easy to automate. Building menus, changing properties, handling input events… Hmm, where have I seen that before?

Instead of playing around with XNA Game Studio to finally learn about game programming, I decided to build a designer for Game State Management! :-)

Tonight, I have a working menu designer. I used the WinFormsGraphicsDevice sample to create a design surface that actually draws the menu screen as menu items are added to it, and updates in real-time as properties are edited. To design a menu, I just need to declare a class that derives from my MenuScreen type, then double-click on the code file, and up pops the designer!

I only have two types of menu items to play with at the moment — a counter and a toggle. There is a lot of work to do before it would be suitable for general use, but I’m excited about the possibilities. The samples provided a big head-start!

Here’s a series of screen shots to show you what I’m talking about.

Figure 1 – Shows the code required to get started (an obvious template candidate). The context menu provides a "View Designer" command to open the designer. Double-clicking the code file in Solution Explorer works just as well.

Figure 2 – The initial design view. This is an XNA GraphicsDevice cleared to CornflowerBlue and rendering a menu with no items.

Figure 3 – Shows the menu after editing the Title property, then adding a ToggleMenuItem and editing its label and name.

Figure 4 – Back to code view to see what the designer generated.

It might not look like much today, but it kept me busy for the past four evenings and was kind of fun! My goal really is to make it easier to get going right away. When I’ve worked through all the kinks enough to share the designer, I’ll blog about how the designer works.

Now it’s time for bed!

About these ads

About badcorporatelogo

My name is Stephen Styrchak, and I work as a software developer in Seattle, Washington, USA.
This entry was posted in XNA Game Studio. Bookmark the permalink.

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