Channel 9

Intro to XNA Part 3: More Sound and adding Text

Andy Dunn — Sat, 28 Apr 2007 00:11:29 GMT

In this article, The ZMan walks through the steps required to add some more sound effects and text output to TinyTennis, a Pong clone.
The ZMan (Andy Dunn)
TheZBuffer.com

Difficulty: Easy

Time Required: 1-3 hours

Cost: Free (Creators Club membership required to deploy to Xbox, additional cost applies)

Software: Visual C# Express , XNA Game Studio Express

Hardware: Xbox360

Download: Starting point C# code, Final C# code

Welcome to part 3 of the introduction to XNA series. Last time you converted the TinyTennis sample to run on the Xbox 360 and added the sound effects back in. This time I will cover some more audio effects and also add the scores back in as well as explain some of the background behind XACT and font rendering in the XNA Framework.

Before you go any further I need to explain how XNA works on the Xbox 360. Microsoft created a version of the .Net compact framework that runs on the Xbox 360, as well as Xbox versions of the XNA assemblies. To get these assemblies onto your Xbox 360 and enable deployment of XNA framework requires that you join the Creators Club which has a cost associated. The changes you will make for this article will work on the PC too, but you will not be able to play on the Xbox 360 without this. Microsoft have provided a video to help you get this installed: Getting Started with the XNA Creators Club.

Note that XNA Game Studio Express has an upgrade. The 1.0 Refresh was released on April 24th 2007. The code for this and future columns will be based on the updated version so if you have not already upgraded then go and download now. Then read about the new features and check out the API changes.

One Quick Audio Fix

There's an interesting bug in the build from last time which is hard to reproduce. Occasionally the code will crash with a InstancePlayLimitException. The reason for this is due to a) the default options in XACT and b) a possible bug in the XNA Framework. The bug occurs when the ball bounces twice very close together like when the bat is near the top or bottom of the screen. The reason is that the default sound settings in XACT limit each cue to play a single instance. If the cue is called a second time and the first is still playing then XACT should just not play the second sound. However the XNA framework sees this as something that requires an exception to be thrown. You can see the discussion about this item in the XNA Audio forums.

To fix this you should change the sound cue to allow multiple instances. Open up the .xap project from the project folder and open the sound bank window and make the following changes.

Now you can have as many instances of the beep sound playing as you want.

Changing the pitch of the sound

If you followed the sound tutorial from last time you would probably be thinking "wow, that's a LOT of work compared to calling the .Net SoundPlayer class". Instead of 2-3 lines of code you had to create special files in a tool, package those files in your project and after all of that it was still more lines of code to play the sound. The only obvious advantage is that you can play more than one sound at a time.

So I would like to show you one of the cool things you can do using XACT - changing the pitch of the sound as the ball bouncing speeds up. In the past the audio designer would have had to describe the effect to the developer, the developer would have to get a sound library or write code to do the sound manipulation and each change would have had several iterations before everyone was happy. With XACT the sound designer has all of the control and the only thing the developer has to do is pass in a single variable.

First, open up the XACT project that you created last time. Don't forget to use the version of the XACT editor that is in the XNA Game Studio Express folder. Since XACT often changes with the DirectX SDK you need to use the one which is compatible.

When the Variable Settings dialog appears all you need to do is rename the variable to BallSpeed.

You have just created a variable which will be visible from your code. When you change the value of that variable you want it to have an effect on the sound. To create the effect you need to create an RPC Preset. RPC in this case stands for Runtime Parameter Control and allows you to manipulate the cues based on an input value. Create the RPC Preset by right clicking the node in the project tree:

For now ignore the dialog that appears I will get back to that in a moment. Right click the RPC Preset node that just created and rename it to BallSpeedEffect.

To associate a sound with an RPC preset you must drag and drop the sound onto the preset.

You should see that the BallSpeedEffect dialog box now shows 'beep' at the top. While you are looking at the dialog change the Parameter to Sound::Pitch - because we want to change the pitch based on the speed - and the Variable to BallSpeed - which is what we will pass in to the program.

Now the question you need to ask yourself is 'how do I want the pitch to vary based on the input variable?'. Since XACT is a sound designers tool it allows you to set this relationship in great detail. But to know if you have it right means you have to be able to listen to the sound. The architecture of XACT means that you cannot play sounds directly from the tool but you have to run a separate auditioning application before the 'Play' buttons will work. You can find the XACT Auditioning Utility in the same place as you found the XACT editor in the Game Studio Express folder.

When you run this tool you will just see a console window appear. Minimize it and forget it's there.

Now you can use the control buttons on the top of the dialog to audition the beep sound.

Right now all you will hear is the normal beep that you heard in the game. But now comes the fun part. Press the 'repeat' button and then the 'play' button so that you hear the beep repeatedly. Then in the section below you can move the black dots up and down to represent the curve that relates the input variable to the output variable. You can drag the dotted line left and right to simulate passing in different values to the BallSpeed variable and you will hear the effect in real time. This diagram is made from multiple screen shots (should be obvious since there are 3 mouse pointers) but you should get the general idea.

I have created a curve where an input of 0 will drop the pitch by a factor of 8 and an input of 100 will raise the pitch by a factor of 8. You can add points to the curve, make flat parts - whatever you want.

So the work in XACT is done. Save the project and open the C# solution file.

Firstly you need to speed the ball up when it bounces off each bat. In Ball.cs add the following 2 lines of code:

//Bounce off the bats
if ((Velocity.X < 0 && collision(_player1))
    || (Velocity.X > 0 && collision(_player2)))
{
    //The ball speeds up with each bat bounce
    Velocity.X = Velocity.X * 1.05f;
    Velocity.Y = Velocity.Y * 1.05f;

Finally you need to translate the ball velocity into a variable in the range 0-100 to pass into XACT. The code to play the sound changes a little too.

private void playBounceSound()
 {
     //Calculate a variable in the range 0-100 to pass to the sound engine
     float ballSpeed = (float)Math.Max(Math.Min(((Math.Abs(Velocity.X) + Math.Abs(Velocity.Y)) /2.0  - _initialSpeed)/4 , 100f), 0f);

     Cue _beep = TinyTennis.soundbank.GetCue("beep");
     _beep.SetVariable("BallSpeed", ballSpeed);
     _beep.Play();
 }

Run the app and listen to the pitch of the bounce increase as the ball speed increases.

Adding the Scores

I'm sure many of you are wondering why its taken this long to add the scores back into the game, after all displaying some text is usually the first program people write in any new computer language or framework. The big problem is (or rather WAS) the lack of text support in the XNA Framework. Text rendering on windows is done using the Truetype font system which is part of GDI and exposed to managed developers through the System.Drawing APIs. If you have used D3DXFont from native DirectX or its managed wrapper then you would be forgiven for thinking that DirectX also understands fonts. In reality the D3DX code uses GDI to render the requested font into a bitmap which is then used by DirectX to render the text. In the case of the Text3D sample GDI is also used to get the outline description of the font and create a 3d model from that data. Since the DirectX we know and love only runs on windows, having a dependency on GDI is not an issue. However whatever the core OS of the Xbox is (its not something Microsoft make public) it certainly doesn't have any Truetype or GDI support - its just not something professional game developers need and the Xbox 360 is a specifically focused piece of hardware. This would make the font parts of D3DX very hard to implement and, in fact, D3DX is also not supported on the Xbox 360 version of DirectX.

This left the XNA Framework team with a dilemma - how can you support fonts on both Windows and Xbox 360 given that only one platform has the font rendering technology. For the first version they did not have time to implement a solution but within weeks several 3rd parties provided solutions such as bitmap based Nuclex Fonts and XNA Font Creator and vector based stroke based fonts. The bitmaps versions do a similar job to the D3DX implementation, except they create the texture either in the compilation process or in a separate tool that you have to run before you run your application. Eventually Microsoft released a Font Sample themselves which created a content pipeline add in to create the bitmap font at compile time. In the Game Studio Express refresh they included font support in the base product. It works in a very similar manner to the previously release font sample and integrates into the SpriteBatch API that you have used in previous columns.

So after that history lesson how do we actually add the scores to TinyTennis? Thankfully the XNA Framework guys have made it very easy.

Start by adding a new item to your project. From the dialog choose the new Sprite Font item and call it PongScore. After you have created it you will see an XML file appear that describes the font you want to make.

Change the name to the name of the font you want to use, the size and the style. In addition since you only need 0-9 you can tell Game Studio Express to only use characters 48-57. Your XML file should look similar to this: (I've removed the comments for size here)

    <FontName>Comic Sans MSFontName>

    <Size>48Size>

    <Spacing>2Spacing>

    <Style>BoldStyle>

    <CharacterRegions>
      <CharacterRegion>
        <Start>0Start>
        <End>9End>
      CharacterRegion>
    CharacterRegions>

After you have saved it don't forget to drag and drop the PongScore.spritefont into the TinyTennis360 project too.

To draw the font you use a SpriteBatch - which we already have around from drawing the bats and ball - and a SpriteFont. Declare the SpriteFont at the class level in TinyTennis.cs

private SpriteFont _font;

Load the font in LoadGraphicsContent()

if (loadAllContent)
{
....
    _font = content.Load("PongScore");
....
}

and draw it with the new DrawText overload in the Draw() function

//Draw the scores
SpriteBatch.Begin();
SpriteBatch.DrawString(_font, gameState.Player1Score.ToString(), new Vector2(300, 30), Color.Red);
SpriteBatch.DrawString(_font, gameState.Player2Score.ToString(), new Vector2(470, 30), Color.Green);
SpriteBatch.End();

Notice the color overloads to give each player a different color score.

That's all for this time folks.... please send me feedback if you have any ideas, find bugs, or have requests about which bits of XNA you would like tutorials for.

The ZMan runs the #1 Managed DirectX & XNA community website http://www.TheZBuffer.com. If you have a question for the ZMan that you would like to se answered in a future column then send it to zman@thezbuffer.com.

Intro to XNA Part 2: Running Tiny Tennis on the Xbox 360

Andy Dunn — Fri, 23 Mar 2007 15:26:34 GMT

In this article, The ZMan walks through the final steps required to get TinyTennis, a Pong clone, running on your Xbox 360.
The ZMan (Andy Dunn)
TheZBuffer.com

Difficulty: Easy

Time Required: 1-3 hours

Cost: Free (Creators Club membership required to deploy to Xbox, additional cost applies)

Software: Visual C# Express , XNA Game Studio Express

Hardware: Xbox360

Download: Starting point C# code, Final C# code

Welcome to part 2 of the introduction to XNA series. Last time we converted the TinyTennis sample to use the XNA framework for rendering and keyboard input. However at the time that article was written deployment was not available on the Xbox 360. In this article you will make additional changes to the project to enable the game to be deployed and played on your Xbox 360.

Some people have asked why I am using such a simple game for these articles. My reasoning is that I do not want to introduce many new things at the same time. TinyTennis is a very simple game and the GDI version has been on MSDN for a long time now and is well documented so I do not need much explanation. Future articles will use more advanced code such as the SpaceWar starter kit.

Errata for part 1

Firstly an update to part 1. In the rush to get the article out at launch date I converted all the GDI PointF structs into XNA Point structs. This meant that everything was stored as integers rather than floating point values. The rounding is not noticeable in a game this simple, but it was incorrect. The correct thing to do was convert to XNA Vector2 structs and this has been corrected in the article and the code for part 1.

Making it work with Gamepads

Those of you with an Xbox 360 will notice that there is no keyboard so controlling the paddles will be a problem. In fact the Xbox 360 does support a standard USB keyboard if you plug one in, its just that very few games look for this input device so there is little point in coding for it and certainly no point in mandating it. All Xbox 360 games of course work with the gamepads and TinyTennis will be no exception.

Xbox 360 gamepads work on the PC as well as on the Xbox. If you have wired controllers you can just plug them in to a vacant USB port and let Windows download the drivers. If you have wireless controllers then you need to buy the wireless controller adapter for windows. Note that the charging pack looks like it has a USB connection but that is purely to take electricity to charge the controller - it won't allow you to use the controller on Windows. In addition since the XNA framework only supports the XInput API you can ONLY use controllers that support this API. In general right now this is Xbox 360 controllers. Any older controllers rely on the DirectInput API which is not available in the XNA framework.

Reading the gamepad is as simple as reading the keyboard in XNA. You simple get the current state of a particular gamepad using the PlayerIndex enumeration (one, two, three or four corresponding to the players) and then read strongly named properties from the gamepad.

Firstly you need to know which player controls each bat so add a PlayerIndex field to bat.cs and modify the constructor to take a PlayerIndex:

private PlayerIndex _playerIndex;

public Bat(int x, Keys up, Keys down, float minPosition, float maxPosition, PlayerIndex playerIndex)
    : base()
{
    initialize(x, minPosition, maxPosition);

    //Keys to control this sprite 
    _upKey = up;
    _downKey = down;

    _playerIndex = playerIndex;
    _isHuman = true;
}

When the bat is created in the constructor of TinyTennis.cs you need to pass in the correct PlayerIndex for each bat (note player 2 is the commented out line)

//Create the bat Sprites - they need the keyboard controls and the gameplay area limits
_player1 = new Bat(30, Keys.Q, Keys.A, 0, Window.ClientBounds.Height, PlayerIndex.One);

//use this line for a second human player
//_player2 = new Bat(Window.ClientBounds.Width - 30 - Bat.Width, Keys.P, Keys.L, 0, Window.ClientBounds.Height, PlayerIndex.Two);

Finally change the humanMove function in bat.cs to read the gamepad state for the correct gamepad.

private void humanMove()
{
    KeyboardState keyState = Keyboard.GetState();
    GamePadState padState = GamePad.GetState(_playerIndex);

    double velocity = 0.0;
    //Set the velocity of the sprite based on which keys are pressed
    if (keyState.IsKeyDown(_upKey) || padState.DPad.Up == ButtonState.Pressed)
    {
        velocity += -_speed;
    }
    if (keyState.IsKeyDown(_downKey) || padState.DPad.Down == ButtonState.Pressed)
    {
        velocity += _speed;
    }
    Velocity.Y = (int)velocity;
}

Replacing Windows Sound with XACT

TinyTennis only has one sound for when the ball bounces. The code currently uses the SoundPlayer class from System.Media. Unfortunately System.Media is one of the assemblies which is not availalbe in the version of the .Net framework on the Xbox 360. The only audio API available on the Xbox is called XACT and its exposed in the Microsoft.Xna.Framework.Audio namespace in the XNA framework.

In addition to being the name of the API, XACT also contains a fairly complex sound management tool. In AAA titles the sound guy on the team uses XACT to create a bank of sounds that the programmer can simply play by referring to a 'cue'. The idea behind it is to separate the work the audio guy does away from the programmer in the same way as a 3D modeling tool allows an artist to work away from the programmer. If this sounds too complex just to play the bounce sound then you are right - XACT is overkill for this. But its the only way to play sounds at the moment, and thankfully you do not need to learn very much XACT to be able to play a WAV file.

Start by running the XACT tool from the start menu. Note that you MUST use the version of XACT that ships with XNA Game Studio Express and not one that you may find in a DirectX SDK. The file formats for XACT projects changes almost every SDK release and the XNA framework only understands the one it was shipped with. Also note that if you are running on Vista you should follow the instructions on Dave's blog to get it to work, and also set it to run as Admin. A future release of XNA Game Studio Express will make everything compatible with Vista.

You will see the XACT window:

For TinyTennis you do not need to understand most of this. However there are 2 concepts you need to grasp:

Wavebank: This contains the raw sound files
Soundbank: This contains the 'cues' that you, as the programmer, will play.

In the case of TinyTennis the 'cue' will just play the raw sound file but XACT gives an audio engineer a lot more flexibility than that such as merging multiple sound files, changing the pitch and volume and applying reverb effects.

Create a new wavebank and soundbank by right clicking and selecting New

You will now see the wavebank and the soundbank windows appear. Add the beep.wav from the project directory by right clicking the wavebank window and selecting Insert Wave Files. In Windows XP you can drag and drop from Windows Explorer into the wavebank window.

Then drag the beep from the wave bank window into the top half of the sound bank window (the Sound Name section). Then drag the 'beep' sound into the lower half of the sound bank window (the Cue Name) section. You will end up with something that looks like this:

What you have done is created an XACT cue that plays a sound which just contains a single wave file.

Now save the XACT project as TinyTennis.xap in the project folder.

XNA Game Studio Express understands .xap files and will compile correct Windows or Xbox 360 versions when the project is compiled. So the only remaining thing to do is add the .xap to the project. Simple browse and add. Since the .xap file knows which .wav files are required you do not need to explicitly reference beep.wav any more so it can be 'excluded from project' (Do not use 'delete' as that will actually remove the file from disc and the .xap file references it).

Playing the sound is a little more complex that the 2 lines of code required with the SoundPlayer class but its much more flexible. For a start you can have more than one sound playing at a time which is not possible with SoundPlayer.

The XACT sound engine needs to be initialized when the game starts up so add the following declarations to TinyTennis.cs (note this was called Game1.cs in part1 - I have renamed it for obvious reasons)

private static AudioEngine engine;
private static WaveBank wavebank;
public static SoundBank soundbank;

and then initialize the engine inside the Initialize() function

protected override void Initialize()
{
    engine = new AudioEngine(@"tinytennis.xgs");
    wavebank = new WaveBank(engine, @"wave bank.xwb");
    soundbank = new SoundBank(engine, @"sound bank.xsb");

In ball.cs you can remove the using statement for System.Media and add in Microsoft.Xna.Framework.Audio. Then remove all of the places that _beep and SoundPlayer are used.

To play the sound using XACT is a single line replacement inside PlayBounceSound()

private void playBounceSound()
{
    TinyTennis.soundbank.PlayCue("beep");
}

Compile and run and after all of that hard work you should be back exactly where you started, with the ball playing a beep sound when it bounces.

Running TinyTennis on the Xbox 360

Game Studio Express requires you to have separate projects for Windows and Xbox 360 development. For almost all XNA framework projects the source code is identical between the two versions - any slight differences can be handled using #if XBOX - so maintaining 2 code trees is almost always more trouble than it is worth. The easiest way to get round this is to create both projects in the same directory so that they can share files in a simple manner. You will still have to remember to add a file to both projects when you make a new file but that is a simple drag and drop operation.

Firstly create an empty Xbox 360 Game project somewhere on your hard drive - its a temporary location so anywhere will do. Then using windows explorer copy the .csproj file into the TinyTennisXNA folder and add it to your solution as a second project. It will complain about the source files that are missing but that doesn't matter as we will add our own.

Rename the project to TinyTennis360, remove Game1.cs and then drag and drop all the files from TinyTennisXNA into TinyTennis360 - from within the solution explorer. Even though the files are in the same directory they will get added to the new project. Now if you modify bat.cs in one project it automatically gets updated in the other project too. The only thing you have to do to keep in sync is remember to drag and drop any new files if you add them to one of the projects.

Now when you compile it will compile both projects. If you only want to compile the windows or the Xbox one you can select it from the platform drop down on the men bar

Also remember that now you have 2 projects you need to remember to set the right one to be the startup project by right clicking the project file. You will get confused when it tries to run the Xbox project and deploy when you really wanted to debug the windows one.

Now that everything compiles its time to deploy it to the Xbox. Rather than explain how to do it in words and pictures I recommend you take a look at the second half of the Getting Started with the XNA Creators Club video. If you fast forward to 6:02 you can see a demo of how to create the connection between Game Studio Express and your 360 and how to put your Xbox in receive mode. Once that is done you just hit f5 in Game Studio Express and the game will be deployed and run. Depending on what screen resolution you have set on your Xbox the paddles may not appear in the expected place, but the game is still playable. To quit the game on the Xbox 360 press the 'back' button on gamepad 1.

Next time I will cover some additional features for the Xbox version and add the scores back in.

2D Game Primer (Visual C#)

Andy Dunn — Tue, 20 Feb 2007 13:31:00 GMT

	This article is the first part of the Upgrade Your Game series of tutorials. It walks you through the basics of how 2D games work using Visual C#
Andy Dunn - The Z-Man The Z-Buffer Difficulty: Easy Time Required: 1-3 hours Cost: Free Software: Visual Basic or Visual C# Express Editions,

Visual C# Upgrade Your Game Series

2D Game Primer
Tiny Tennis (note:Tiny Tennis using XNA available)
Space Blitz
Crusader

Introduction

Welcome to the Upgrade Your Game series of tutorials. There are four tutorials, each covering how to write a simple computer game using Visual Studio Express products. Though the games are simple, each one teaches some game development techniques and builds on the last to improve your skills. The skills can be applied to more complex games including 3D games using Microsoft DirectX.

When you program games, you have to use math whether you want to or not. The simpler the game, the less math there is to learn, and 2D games use simpler math — but you cannot avoid it altogether. Today's top-selling 3D games are full of 3D vector math and complex simulations of physics. Fortunately, you do not need to know all of that for the simple games presented in this series.

This 2D primer covers some of the fundamentals of simple math needed for the games in this series.

Note: This documentation assumes that you have a basic knowledge of programming concepts and the Visual C# environment. You can learn more about these topics in the product documentation by clicking Help on the menu bar, and then clicking Contents, Index, or Search. You can also access Help by positioning the mouse cursor on language keywords or user interface elements such as windows or dialog boxes, and pressing F1.

2D Game Development Concepts

The Game Loop

Window Forms and ASP applications are often called "event-driven" applications — they sit doing nothing for most of the time waiting for an external stimulus, such as a button press from an end user or a Web service request from another application. This works really well for that kind of application.

Games, on the other hand, are generally not sitting doing nothing all the time. Even if the end user is not pressing a key or a button on the gamepad, the game must animate characters, perform AI functions, and play sounds and many other things depending on the game. You've probably done some of these background type tasks in Windows Forms applications using timer controls or background threads. But in general these don't scale to the computer game scenario, where there are multiple animations and multiple background tasks all happening at very different intervals.

The solution that most games use (and by "most games" I mean everything right up to the top-selling Xbox 360 titles) is usually called the "game loop." In pseudo code it looks something like this:

    While (game is running)
        Check for input
        Update all objects in the game 
        Draw all objects in the game

This might explain one reason why games almost always use 100% of your CPU even if they don't appear to be doing much. The faster your computer is, the faster this loop will run and the smoother the animation and the synchronization will be.

There is one slight problem with running a tight loop like that, at least in Windows. If you don't allow Windows to check for and process Windows messages and events, your application will be marked as "Not responding" by the operating system. You might have seen this in your applications if you have a loop that runs for a long time. You might also have solved it by putting a call to DoEvents into the loop, which allows Windows to process the events. This can work reasonably well if you know the loop will end eventually, but in this case the loop is the entire game and you need a better way.

The method I have chosen to use for these games is NOT the most efficient (for a full discussion on this under Managed DirectX see the MDX Game Loop FAQ), but it is the simplest, and none of the games covered here needs the more complex method.

private void TinyTennis_Paint(object sender, PaintEventArgs e)
{
    //Work out how long since we were last here
    in seconds
    double gameTime = _timer.ElapsedMilliseconds / 1000.0;
    double elapsedTime = gameTime - _lastTime;
    _lastTime = gameTime;
    _frameCounter++;
 
    //Perform any animation

    //Draw the game objects
 
   //Force the next Paint()
    this.Invalidate();
}

Sprites
Sprites are two-dimensional images that appear in a video game. Sometimes they are static images, but in general they are the building blocks for animation. They either move around the screen or change the image at regular intervals, giving a "flip book" kind of animation; or they do both, giving you characters like Mario and Donkey Kong that can move around the screen running and jumping. Positioning a Sprite
Just like Windows Forms controls, sprites are placed at an x,y position on the form. 0,0 is the top left and ClientSize.Width, ClientSize.Height is the bottom right. Just like Windows Forms controls, sprites have a height and width too.

However, unlike Windows Forms controls, sprites are primarily designed to move and animate, often hundreds of times per second, to get the smoothest animation possible. So while a sprite can only be drawn at an integer x,y position, its ACTUAL position at a subsecond point in time could be 1.45, 12.67. It's important to remember this position so that the animation doesn't get choppy. A sprite position is stored using a floating-point Point structure PointF rather than the integer-based Point structure like Windows Forms controls. This means you can store the subpixel accuracy and then just convert to integer screen positions when you draw them. Vectors
The more game programming you do, the more you will come across the term "vector." Though I've avoided the term in this series for the sake of simplicity, it's worth noting that the concepts are used when the positions of the sprites are updated for animation.

Simply put, a vector is just an offset. So a vector of (4,2) means that from some start point you move 4 units in the x-axis and 2 in the y-axis.

You will see positions referred to as vectors. In this case, a position of (4,2) means an offset of (4,2) from the origin.

Vectors can be added together, so (4,2) + (2,4) gives you a total offset of (6,6).

Vectors can have negative components, so (-2,1) means move 2 units to the left on the x-axis and 1 unit down on the y-axis.

All of these concepts are used when moving a sprite around the screen. Moving a Sprite
Sprites move with a certain velocity. Velocity is different from speed because velocity also contains information about the direction. For example, you could tell me you are driving at 60 mph, and I would guess that in one hour you would be 60 miles from the start point. But if you were driving round in a circle, that would not be the case. If I told you my velocity was 60 mph due east, then I would know for sure where you would end up.

Since your position is an x, y value you can store your velocity as another two-component vector (s, t): s is how fast you want to move on the x-axis, and t is how fast you want to move on the y-axis. If you add them together: (x,y) + (s,t) = (x+s, y+t), you get the new position of the sprite.

Example: Sprite is at (4,10) and has a speed of (1,0). (1,0) means the sprite will move right in the x direction only. (4,10) + (1,0) = (5,10). If you repeat this addition every second, then the sprite will move 1 pixel per second across the screen. You can see that any direction and speed can be represented just by changing the s, t values in that vector.

Time-Based Animation

Imagine a sprite that starts at x=0 and is moving to the right with a velocity of +10. If you walk through the game loop above, the sprite would have +10 added to its position each time the sprite was updated and would move from x=0 to x={some bigger number} where {some bigger number} is 10 times the number of times the loop has been run. But the question is, exactly how fast would it move? Well, it depends on how fast the loop runs, which depends on how fast your computer is running. This would mean that on your top-of-the-line gaming rig the sprite could cross the screen in half a second, but on your parents' four-year-old "we only use it for e-mail" computer it could take two seconds. Obviously this isn't something that is desirable in a computer game.

To fix this you need to think about what velocity really is. What does that +10 mean? Velocity is a measure of distance over a period of time, so you cannot think of the +1 as just a distance; it's really +1 pixel in some time that you need to define. So each time round the loop, you just need to know how long it's been since the last update and scale the movement by that time.

A sprite that has a velocity of +10 actually means you move +10 pixels per second. So if it's been half a second since the last frame, multiply that by the velocity and move 5 pixels. In reality the time between frames is fractions of a second. So on your fast gaming rig, where the loop runs very fast, the sprite will move with subpixel accuracy for some very smooth animation. On your parents' computer, where the loop only runs 5 times per second, the sprite will move 2 pixels each frame, but after 10 seconds the sprite will be in exactly the same place as it is on your computer.

The code will look something like this (notice that for accuracy elapsedTime is a double and therefore needs to be cast down to a float to match the PointF structure):

    //Move the sprite based on the velocity
    Location.X += Velocity.X * (float)elapsedTime;
    Location.Y += Velocity.Y * (float)elapsedTime;

The loop timings I mentioned here are very exaggerated — on most computers the loop will be running hundreds or thousands of times per second, meaning that your animations will be very smooth and accurate.

Sprite bounds

There are two ways to represent the rectangle containing the sprite:

X, Y, Height, Width
X, Y of top left corner and X, Y of bottom right corner

Whilst both of these are valid, you must usually find the first one in use. It's easier to update just one corner as the sprite moves around and calculate the other corner when it's needed. For tasks like collisions- and bounds-checking you need to calculate the bottom-right corner, so you will see X+Width and Y+Height as a very commonly used formula in games.

Simple Collision Detection
Collisions are a vital part of almost any game — they restrict where an object can move, whether an object has taken damage, and so forth.

Simple collisions can be described in terms of the positions and size of the sprites and the regions they need to collide with. Since everything is rectangular in this case, there is no need for any more complex collisions that need to be determined at the pixel level. All the collisions can be checked for by looking to see if the rectangles overlap or if the coordinates are outside of a certain range. Checking for rectangle overlap is quite simple.

private bool collide()
{
  return ! ( sprite1.Location.X > sprite2.Location.X + sprite2.Size.Width
    || sprite1.Location.X + sprite1.Size.Width  < sprite2.Location.X
    || sprite1.Location.Y > sprite2.Location.Y + sprite2.Size.Height
    || sprite1.Location.Y + sprite1.Size.Height < sprite2.Location.Y);
}

2D Game Primer (Visual Basic)

Andy Dunn — Tue, 20 Feb 2007 13:24:00 GMT

	This article is the first part of Upgrade Your Game series of tutorials. It walks you through the basics of how 2D games work using Visual Basic
Andy Dunn - The Z-Man The Z-Buffer Difficulty: Easy Time Required: 1-3 hours Cost: Free Software: Visual Basic or Visual C# Express Editions,

Visual Basic Upgrade Your Game Series

Introduction
Welcome to the Upgrade Your Game series of tutorials. There are four tutorials, each covering how to write a simple computer game using Visual Studio Express products. Though the games are simple, each one teaches some game development techniques and builds on the last to improve your skills. The skills can be applied to more complex games including 3D games using Microsoft DirectX.

This 2D primer covers some of the fundamentals of simple math needed for the games in this series.

Note: This documentation assumes that you have a basic knowledge of programming concepts and the Visual Basic environment. You can learn more about these topics in the product documentation by clicking Help on the menu bar, and then clicking Contents, Index, or Search. You can also access Help by positioning the mouse cursor on language keywords or user interface elements such as windows or dialog boxes, and pressing F1.

2D Game Development Concepts

The Game Loop

The solution that most games use (and by "most games" I mean everything right up to the top-selling Xbox 360 titles) is usually called the "game loop." In pseudo code it looks something like this:

While (game is running)
Check for input
Update all objects in the game
Draw all objects in the game

Private Sub TinyTennis_Paint(ByVal sender As Object, ByVal e As PaintEventArgs) Handles MyBase.Paint
  'Perform any animation here
  'Draw the game objects here
  'Force the next Paint()
  Me.Invalidate()
End Sub

Positioning a Sprite
Just like Windows Forms controls, sprites are placed at an x,y position on the form. 0,0 is the top left and ClientSize.Width, ClientSize.Height is the bottom right. Just like Windows Forms controls, sprites have a height and width too.

Vectors
The more game programming you do, the more you will come across the term "vector." Though I've avoided the term in this series for the sake of simplicity, it's worth noting that the concepts are used when the positions of the sprites are updated for animation.

Simply put, a vector is just an offset. So a vector of (4,2) means that from some start point you move 4 units in the x-axis and 2 in the y-axis.

You will see positions referred to as vectors. In this case, a position of (4,2) means an offset of (4,2) from the origin.

Vectors can be added together, so (4,2) + (2,4) gives you a total offset of (6,6).

Vectors can have negative components, so (-2,1) means move 2 units to the left on the x-axis and 1 unit down on the y-axis.

All of these concepts are used when moving a sprite around the screen.

Moving a Sprite
Sprites move with a certain velocity. Velocity is different from speed because velocity also contains information about the direction. For example, you could tell me you are driving at 60 mph, and I would guess that in one hour you would be 60 miles from the start point. But if you were driving round in a circle, that would not be the case. If I told you my velocity was 60 mph due east, then I would know for sure where you would end up.

Example: Sprite is at (4,10) and has a speed of (1,0). (1,0) means the sprite will move right in the x direction only. (4,10) + (1,0) = (5,10). If you repeat this addition every second, then the sprite will move 1 pixel per second across the screen. You can see that any direction and speed can be represented just by changing the s, t values in that vector.

Time-Based Animation
Imagine a sprite that starts at x=0 and is moving to the right with a velocity of +10. If you walk through the game loop above, the sprite would have +10 added to its position each time the sprite was updated and would move from x=0 to x={some bigger number} where {some bigger number} is 10 times the number of times the loop has been run. But the question is, exactly how fast would it move? Well, it depends on how fast the loop runs, which depends on how fast your computer is running. This would mean that on your top-of-the-line gaming rig the sprite could cross the screen in half a second, but on your parents' four-year-old "we only use it for e-mail" computer it could take two seconds. Obviously this isn't something that is desirable in a computer game.

The code will look something like this (notice that for accuracy elapsedTime is a double and therefore needs to be cast down to a float to match the PointF structure):

'Move the sprite based on the velocity
Location.X += Velocity.X * CSng(elapsedTime)
Location.Y += Velocity.Y * CSng(elapsedTime)

Sprite bounds
There are two ways to represent the rectangle containing the sprite:

X, Y, Height, Width
X, Y of top left corner and X, Y of bottom right corner

Simple Collision Detection
Collisions are a vital part of almost any game — they restrict where an object can move, whether an object has taken damage, and so forth.

Private Function collide() As Boolean
  Return Not (Sprite1.Location.X > Sprite2.Location.X + Sprite2.Size.Width OrElse _
  Sprite1.Location.X + Sprite1.Size.Width < Sprite2.Location.X OrElse _
  Sprite1.Location.Y > Sprite2.Location.Y + Sprite2.Size.Height OrElse _
  Sprite1.Location.Y + Sprite1.Size.Height < Sprite2.Location.Y)
End Function

This code uses an efficient algorithm for determining if the two rectangles overlap. It checks the bounds of both rectangles to determine whether they DON'T overlap and then negates the result. For example, the first line checks whether the left-hand edge of sprite 1 is to the right of the right-hand edge of sprite 2. If it is, then obviously they cannot overlap. The next three lines check the other three edges.

Intro to XNA Part 1: Building Tiny Tennis

Andy Dunn — Mon, 11 Dec 2006 04:27:00 GMT

In this article, the ZMan walks through creating Tiny Tennis, a Pong clone, using the XNA Framework
The ZMan TheZbuffer.com Difficulty: Easy Time Required: 1-3 hours Cost: Free Software: Visual C# Express , XNA Game Studio Express Hardware: Download: Download

December 11th... a day that we all hope will go down in history as the start of a new generation of hobbyist game developers. Today XNA Game Studio Express launches. It's not the first platform to allow home developers access to console development but its is the first one to be fully sanctioned and supported and running on a retail console.

So where do you start? XNA Game Studio Express is going to interest people who have no game development experience at all so starting with some simple games is a good idea. You may have seen the 3 games I did for MSDN for their Upgrade Your Game promotion - Tiny Tennis, Space Blitz and Crusader. For this series of articles I will walk you through simple XNA applications using as much code from these starter kits as possible. The original tutorials and screencasts will walk you through the game logic and these articles will add in the XNA know how.

Firstly a couple of points:

Even The ZMan didn't have access to the retail XBox 360 release before today so for the first part I will only cover the PC. Watch for part 2 to add in the things needed to run on the 360 and go into more detail.
XNA only supports Visual C# Express so although the original games were in Visual Basic, this series will be only in C#
You need to ensure you have C# Express and XNA Game Studio Express installed. If you have problems installing or running then ask in the XNA Game Studio Express Forum.

Making a new XNA game

Installing XNA Game Studio Express adds several new project types to C# Express:

The SpaceWar projects are complete games for the xbox and the windows platforms - they have all the source code, graphics and sound and Microsoft absolutely want you to use this to make your own games as well as learn about making simple 2d and 3d games.

The Windows Game and Xbox Game projects are for writing games on those 2 platforms and the Game Library projects are for making reusable components that are easy to use within the XNA game projects.

For this tutorial start with the Windows Game project. Once you have selected it you can immediately run the project and see a wonderful cornflower blue, blank screen. (It is widely speculated that cornflower blue is Tom Miller's favorite color).

Now we need to add the project files from the Tiny Tennis sample. Select Add Files by right clicking the project and then browse to the Tiny Tennis solution and add the following files:

Converting the Game

There are going to be a LOT of errors right now because Tiny Tennis relies heavily on Windows.Forms and System.Drawing neither of which are available when writing an XNA application that you eventually want to run on the Xbox 360 because the Xbox 360 does not support those libraries. So initially there are several big changes to make.

Game1.cs is the main XNA game file. It contains the initializer for the game as well as several methods that are called automatically for the game. If you have been through the tutorials for the Express games you will see that the games are designed to be continually updated. As fast as possible the keyboard is read, the positions are updated and the screen is redrawn. This is exactly the same method used in XNA so it is very simple for us to use the same logic.

You need to copy sections of code from the tennis.cs file into the game1.cs.

Firstly the declarations:

private Bat _player1;
private Bat _player2;
private Ball _ball;
private GameState gameState;

Then the constructor which goes into the end of the Game1 constructor.

gameState = new GameState();

//Create the bat Sprites - they need the keyboard controls and the gameplay area limits
_player1 = new Bat(player1Bat, 30, Keys.Q, Keys.A, 0, ClientSize.Height);

//use this line for a second human player
//_player2 = new Bat(player2Bat, ClientSize.Width - 30 - Bat.Width, Keys.P, Keys.L, 0, ClientSize.Height);

//use this line for a computer player
_player2 = new Bat(player2Bat, ClientSize.Width - 30 - Bat.Width, 0, ClientSize.Height);

//Create the ball sprite. It needs the gameplay area limits and references to the bats to be able to check for collisions
_ball = new Ball(ballControl, 0, ClientSize.Width, 0, ClientSize.Height, _player1, _player2, gameState);

//Connect the AI player with the ball
_player2.Ball = _ball;

The TinyTennis_Paint code gets moved into the Draw method in Game1.cs. The Draw method is continually called by the XNA Game class and this is where you should draw your graphics.

//Perform any animation
_player1.Update(gameTime, elapsedTime);
_player2.Update(gameTime, elapsedTime);
_ball.Update(gameTime, elapsedTime);

//Draw the scores
player1Score.Text = gameState.Player1Score.ToString();
player1Score.Refresh();
player2Score.Text = gameState.Player2Score.ToString();
player2Score.Refresh();

//and the game objects
_player1.Draw();
_player2.Draw();
_ball.Draw();

Notice that I have not copied across any of the timer/stopwatch code. XNA provides its own timer logic so that is not needed. Since XNA does not support Windows forms, it does not support KeyUp and KeyDown events so the code for those is of no use to us. You can now remove TinyTennis.cs from the project.

Now to fix up the errors. If you hit compile and walk through them one by one you will fix them in the following order:

The first thing to do is remove all the 'using' statements that mention Windows.Forms and System.Drawing. If you try to compile these will be the first errors on the list.
PointF in System.Drawing is replaced by Vector2 in Microsoft.XNA.Framework. If you change the type to Vector2 you can use the intellisense feature of C# express to add in the new using statement.
There is no SizeF type in XNA. Since it is just a pair of values you can reuse Vector2 type so change SizeF to Vector2. Change the Width property to X and the Height
Color in System.Drawing is replaced by Color in Microsoft.XNA.Framework. For most of these errors you just need to add the correct using statement with intellisense.
In TinyTennis I used windows controls to do the rendering. Since this is not possible in XNA all references to the Control type need to be removed
- in ball.cs and bat.cs remove the parameters in the constructor that refer to Control
- ControlSprite is a wrapper around Sprite that draws using windows controls. Since we no longer have windows controls we can remove ControlSprite from the project and just use the Sprite implementation
- Now that ControlSprite is missing Ball and Bat should be changed to inherit directly from Sprite
- In game1.cs remove the Control parameters from the new Bat() and new Ball() lines in the constructor
Keys is now found in Microsoft.Xna.Framework.Input so needs the correct using statement
ClientSize from Windows.Forms becomes Window.ClientBounds from Microsoft.Xna.Framework
In the WindowsForms version of TinyTennis I tracked the game time myself. This code is redundant in XNA and is removed because the Game class passes in gametime to the Draw() function. So replace the elapsedTime property with gameTime.ElapsedGameTime.TotalSeconds and the gameTime parameter with gameTime.TotalGameTime.TotalSeconds

//Perform any animation
_player1.Update(gameTime.TotalGameTime.TotalSeconds, gameTime.ElapsedGameTime.TotalSeconds);
_player2.Update(gameTime.TotalGameTime.TotalSeconds, gameTime.ElapsedGameTime.TotalSeconds);
_ball.Update(gameTime.TotalGameTime.TotalSeconds, gameTime.ElapsedGameTime.TotalSeconds);
There is no easy way to draw text to the screen in XNA. So for this article I am simply going to avoid the subject until there is time to go into it in more detail. Comment out the lines that display the score. You can use the ctrl-K-C keypress to easily to this. ctrl-K-U reverses it

//Draw the scores
//player1Score.Text = gameState.Player1Score.ToString();
//player1Score.Refresh();
//player2Score.Text = gameState.Player2Score.ToString();
//player2Score.Refresh();
Since the Point type uses integers in XNA there are some parameters to change to int from float and the calculations need to have their results cast into (int). For example:

public virtual void Update(double gameTime, double elapsedTime)
{
//Move the sprite based on the velocity
Location.X += (int)(Velocity.X * (float)elapsedTime);
Location.Y += (int)(Velocity.Y * (float)elapsedTime);
}

So you should now have a project that compiles. However when it runs you will see a runtime error about a missing sound file - copy the WAV file from the original project and add it to the project and set the properties to copy the file to the output directory. Now the project should compile and run but nothing will appear on the screen. This is to be expected since the previous version used windows forms to do the rendering.

Using XNA to Render

The simplest way to draw anything in XNA is using the SpriteBatch class. This uses your graphics card to draw 2d rectangular areas on the screen. Since Tiny Tennis uses rectangles this is perfect. The SpriteBatch allows you to set the location and size of the rectangle - however it expects a graphic file to be used as the thing to draw. For TinyTennis a graphic file which is all white will work perfectly. I created a small graphic file using Windows Paint and added it to the project.

If you look at the file properties after you add the bitmap you will see another addition that XNA Game Studio Express adds. Image files are now a recognized project item. This is what you may have heard of as the content pipeline. It allows game content to be created and checked at compile time and the content to be treated as part of the game rather than some external files.

For the most part you don't need to change or even look at the properties window. Make a note of the Asset name - this is how you will be able to refer to it in code. It defaults to the name of the file without the type extension.

Rendering involves 2 steps - loading the graphic and then using it to draw.

Loading the graphic is done in the Game1.cs class. Using the already declared reference to the content pipeline it requires a simple declaration:

public static Texture2D SpriteTexture;

and a single line of code in the LoadGraphicsContent function:

protected override void LoadGraphicsContent(bool loadAllContent)
{
if (loadAllContent)
{
spriteTexture = content.Load("whitePixel");
}
}

To draw the sprite you need a sprite batch object for this simple application its easiest to just create a single SpriteBatch and make it static so that the bats and balls can share it.

public static SpriteBatch SpriteBatch;

And create it in the initialize function.

SpriteBatch = new SpriteBatch(this.graphics.GraphicsDevice);

Drawing with SpriteBatch has many overloads - however to draw a rectangle uses the simplest overload which simple stretches the white pixel to a rectangle of the required size and color in sprite.cs

public virtual void Draw()
{
Game1.SpriteBatch.Begin();
Game1.SpriteBatch.Draw(Game1.SpriteTexture, new Rectangle((int)(Location.X + .5f), (int)(Location.Y +.5f), (int)Size.X, (int)Size.Y), Color.White);
Game1.SpriteBatch.End();
}

Now if you run the game you will see the bats and balls on the screen. The final thing is to add the new keyboard code. Since there is no events in XNA you need to simply check each time around the game loop if the key is up or down, Just like everything else in XNA this is a few simple lines of code. Replace the humanMove() function in bat.cs with the following:

private void humanMove()
{

KeyboardState keyState = Keyboard.GetState();
double velocity = 0.0;
//Set the velocity of the sprite based on which keys are pressed
if (keyState.IsKeyDown(_upKey))
{ velocity += -_speed; }

if (keyState.IsKeyDown(_downKey))
{ velocity += _speed; }

Velocity.Y = (int)velocity;

}

Now you can play the game. The keys Q and A control the bat on the left and the bat on the right uses some rudimentary AI.

Running on the Xbox

As I mentioned earlier running on the Xbox is something I will cover in the next article. But I'm sure you want to try so here are some pointers:

There is no keyboard on the xbox so you will need to replace the key press code with reading the xbox controller instead
Sound on the xbox is done using XACT so the SoundPlayer class is not available. You need to create an XACT project and add the .wav file to that

Take a look at the SpaceWar sample for examples of ow to do both of these things - or just wait till next week.

The code in this article uses Visual C# 2005 Express Edition and the October 2005 DirectX SDK

The ZMan is here to solve your XNA Game Studio Express and Managed DirectX programming problems. If you have a question for the ZMan then send it to zman@thezbuffer.com.

Credits:

Thanks to

Carlos Aguilar for the code colorizer

The ZMan runs the #1 Managed DirectX community website http://www.thezbuffer.com.

Upgrade Your Game: Crusader (C#)

Andy Dunn — Thu, 09 Nov 2006 14:31:00 GMT

	Welcome to the Upgrade Your Game series of tutorials. In this article, we will develop a role-playing game Crusader!!!
The Z-man Andy Dunn The Z Buffer Difficulty: Easy Time Required: 1-3 hours Cost: Free Software: Visual Basic or Visual C# Express Editions Hardware: Download: Download

Download Video

Visual C# Upgrade Your Game Series

2D Game Primer
Tiny Tennis (note:Tiny Tennis using XNA available)
Space Blitz
Crusader

Introduction

Not all games are real-time action games. Role-playing games (RPGs) are generally slower paced and involve more thinking. Usually there's no penalty if you turn your attention to something else for a few moments. Many, many, many years ago, sometime in the 1970s, RPGs were played using text or graphics made up from text. Since we're no longer in the 1970s, we can do a little better than that using the sprites from the previous games.

For the fourth and final game, I will be creating a tile-based role-playing game. These days, role-playing games have as good graphics and special effects as any first person shooter. But the origins of graphical role-playing games are tile-based games such as the early Final Fantasy and Ultima games. Because this is a beginner series with limited code, I cannot create even games as complex as those early works; however, I can give you most of the techniques you will need to put together similar-looking games. After that, it's really just up to your imagination.

Getting Started

Building and Running Crusader

Once your project is loaded into the Visual C# environment, you can compile and run the program in one step.

To build and run Crusader:

Press F5 to build and start the game under the debugger.

The game launches and you can use the arrow keys to control the hero and press P to use magic potions. Find the keys to open the doors and kill the wizard who has captured the princess.

Files

File	Use
Area.cs	Represents an 8 x 8 area of the world. Each area stores a set of tiles and current state of any dynamic objects. In addition, it stores connectivity information about which areas surround it.
BitmapCache.cs	A static class that stores bitmaps in a cache. This is used by the Sprite class to save on memory and loading time by reusing bitmaps.
Crusader.cs	The main display form. Other than UI initialization and keyboard events, little gameplay code is performed in here. Most code calls into GameState.
GameObject.cs	Abstract base class that represents an object that requires updating and drawing once per frame.
GameState.cs	Stores the current state of the game and controls all gameplay.
MapTile.cs	Stores an individual tile. Each tile has a background sprite and an optional transparent sprite in the foreground. In addition, for dynamic sprites such as monsters, we store the current state of that monster, for example, Health.
Sounds.cs	A static class that plays any of the game sounds.
Tile.cs	Represents a tile from the data file.
World.cs	The world is a collection of Areas. This class handles reading of the tile and map files and any gameplay related to the world.

Game Development Concepts

If you are new to 2D game development, check out the 2D Game Primer (C#).

Tile-based Games

Tile-based games get their name from the way the graphics are built up. Instead of having a single graphic for each area in the game, the area is built up from several small tiles. So there is one tile for grass, another with a tree, and another with a brick wall. By combining these squares like a patchwork quilt, you can make a huge number of different-looking levels from a small number of graphics. Take a look at the tiles.bmp in the GameData folder to get an idea of what the tiles look like for this game.

I asked the artist to cover three themes:

Outdoor — grass, trees, and paths.
Castles — walls, floor, and decorations.
Dungeon — different walls and floor.

I asked him to create all the sections needed to make paths that connect in any direction, so there are 11 different combinations for each one. In addition, he created three doors of differing colors with both open and closed positions. The doors are themed to fit into the castle wall.

You will also see that this file includes tiles for all of the in-game objects. These are not drawn as part of the tile-based background but instead are layered over the top of the tiles depending on the location of the item in the game.

Extracting Sprites and Animation from Sprite Sheets

It's far more efficient to load all of the graphics in one go rather then having many different files as I did in Space Blitz. As you have already seen, the graphics for this game are all in one file. Well, actually they are in two. I asked the artist to put the multi-frame animations in a second file, so that we could control the layout without having to fit them around the other tiles. Take a look at animations.bmp.

The Sprite class currently loads its own bitmap with a file name, which is not really very efficient either; in SpaceBlitz you loaded the same bitmap multiple times each time it was used. To improve this, I added a constructor that takes an already loaded bitmap and just stores the reference to it. Now multiple sprites can share the same bitmap. This doesn't make sense for sprites that you want to change (like the bases in SpaceBlitz), but those are the exception to the rule.

So how does the sprite know which bit of the large bitmap it should draw? In the same constructor, you pass a rectangle structure that describes the top, left, height, and width of the region you wish to extract. When the sprite is drawn it uses this to draw only the relevant part. The function also takes the number of frames of animation within that rectangle and automatically subdivides the rectangles to extract the correct frame into the _frames collection.

Visual C#

public Sprite(GameState gameState, float x, float y, Bitmap bitmap, Rectangle rectangle, int numberAnimationFrames)
{
    for (int i = 0; i < numberAnimationFrames; i++)
    {
        _frames.Add(bitmap);
 
        //Set the location and use the height and width from the 1st frame
        initialize(gameState, x, y, rectangle.Width / 
            numberAnimationFrames, rectangle.Height);
 
        _rectangle.Add(new Rectangle(rectangle.X + i * rectangle.Width / 
            numberAnimationFrames, rectangle.Y, 
        rectangle.Width / numberAnimationFrames, rectangle.Height));
    }
}
 
public override void Draw(Graphics graphics)
{
    graphics.DrawImage(_frames[CurrentFrame], outputRect,
        _rectangle[CurrentFrame].X, _rectangle[CurrentFrame].Y, 
        _rectangle[CurrentFrame].Width, _rectangle[CurrentFrame].Height, 
        GraphicsUnit.Pixel);
}

Using Color Key to Make Sprites Transparent

If the game objects were drawn over the top of the tiles in the same way that all of the other sprites are drawn, they would look like this:

In SpaceBlitz, all of the aliens were actually being drawn inside a black box (try changing the form background color and running the game). Since the game background was black, you could not see this. That was fine for SpaceBlitz but obviously isn't suitable for Crusader. The technique used is called Color Key and it's the same one used in movies to put actors in front of a green screen into a sci-fi setting. It's more often called chroma key. The general idea is that you do not draw a pixel where it is a certain color. I requested the artist choose an RGB color that he was not using in the artwork and set the backgrounds to that color. He chose (75, 75, 75), which is the dark grey you see in the image above. When you ask GDI to draw the shape, you tell it which color to remove and all the magic is done for you giving this corrected image:

The code is just a few lines of modification to the sprite drawing routine: colorKey is Color.ToArgb(75, 75, 75).

Visual C#

//Set the color key for this sprite;
_attributes= new ImageAttributes();
_attributes.SetColorKey(_colorKey, _colorKey);
 ...
graphics.DrawImage(_frames[CurrentFrame], outputRect,
    _rectangle[CurrentFrame].X, _rectangle[CurrentFrame].Y,
    _rectangle[CurrentFrame].Width, _rectangle[CurrentFrame].Height, 
    GraphicsUnit.Pixel, _attributes);

Data Driven Map Architecture

Describing what goes where in a game like this makes much more sense in a data file than inside the code. This means that some aspects of the game are very easy for you to change without even recompiling.

There are two data files that drive most of the look and feel of the game. Things like how the doors open, how the monsters fight, and what happens when you pick things up are, for this sample, hard-coded in the code. But there's no reason why you couldn't change the data files to make them even more descriptive and then drive the game from the new files. You could debate file formats and how they are laid out forever, so find something that works for your game and stick to it. To keep down the amount of code, the error checking is minimal. For a game that is designed to be modded by the end users, this is something that would have to be improved

Tilelookups.csv

This file describes all of the tiles and sprites in the game. It's a comma delimited format that contains the following information:

Name: text name of the item.
Shortcut: an abbreviated lookup. This value must be unique and for background tiles must be a single character.
Path to bitmap: the bitmap this tile comes from.
X: the x count into the tile sheet. 1 is the 1st column. Assumes that the tiles are all the same size.
Y: the y count into the tile sheet. 1 is the 1st row. Assumes that the tiles are all the same size.
Transparent: Y or N (not case sensitive); if Y the (75, 75, 75) will be color-keyed out.
Number of frames: how many frames of animation. The frames must be laid out from left to right with X,Y being frame 0.
Traversable: Open or Block (not case sensitive); if Block then the hero cannot pass.
Special: For doors and keys this is the color, for characters this is the default health.

Example:

        DoorGreenOpen,G,Door,gamedata\tiles.bmp,5,1,N,1,Open,Green

Map.txt

This file describes the set of 8 x 8 areas that make up the world. There is a single blank line between each area.

line 1: name of the area (must be unique).
line 2: the area you move to when you go North or —
line 3: the area you move to when you go East or —
line 4: the area you move to when you go South or —
line 5: the area you move to when you go West or —
lines 6-13: an 8 x 8 grid made up of the shortcut characters from tilelookups.csv.
lines 13 onwards: x,y,shortcut. A list of objects and their x,y position in the area; x and y are zero based.
final blank line:

Example:

start
-
forest1
-
-
>>>>>>>>
>.>.....
>...^...
>....ccc
^.^.....
^^......
>..>....
>>^>>>>>
1,1,kbr
1,6,pot
3,1,arm
4,1,att
4,6,tro
5,6,tro
6,6,tro

Character Development and Gameplay

One thing that distinguishes RPGs from other kinds of games is that usually the story is very relevant to the plot rather than being a poor excuse for why the character is about to do something very unlikely. In addition, you usually take the character from a low start point to some high point in the game by changing or improving the way that character works. You have probably heard of games with levels, hit points, strength, agility, and more, though different games refer to these differently. The more advanced the game gets, the more of these there are to track and the more effect they have in different parts of the game.

Given the limited space for these games, I chose to have a very simple but often heard story. The princess has been captured by the forces of evil (in this case a wizard since that's what the artist drew) and it is your job to rescue her. The story plays out in three settings: an outdoor area, a dungeon, and a castle. Each has a distinct look and type of monster to fight.

The characters' attributes are:

Health, which should stay above 0 and is replenished by food items.
Experience, which is earned by killing monsters and gives attack and armor bonuses at certain levels.
Attack rating, which increases your damage and ability to hit.
Armor rating, which decreases the ability of others to hit you.
Potions, which do damage to all visible monsters.
Keys, which are the ones are you holding.

All of these attributes and the code to manipulate them can be found in the GameState or the World classes. There is too much to list here but spend some time looking through to see how the world works. Searching for "Health," for example, will show you all the places that the health points are increased or decreased.

Extending Crusader

Since most of the game is data driven, open up the maps in Notepad and make some of your own.
Change all of the graphics to make a space themed game.
Game too hard or too easy? Change the rules of the game in the code. Give each monster its own attack and armor rating. Let the monsters attack back with magic.
Make the monsters move toward you. You should be able to reuse some of the hero animation code but you will need to implement some path-finding algorithms to avoid obstacles.

Online Resources

Discuss this Starter Kit in Channel 9's Techoff forum.
Provide feedback on this documentation.
Check out Game Development on Coding4Fun.

Upgrade Your Game: Crusader (Visual Basic)

Andy Dunn — Thu, 09 Nov 2006 14:01:00 GMT

	Welcome to the Upgrade Your Game series of tutorials. In this article, we will develop a role-playing game Crusader!!!
The Z-man Andy Dunn The Z Buffer Difficulty: Easy Time Required: 1-3 hours Cost: Free Software: Visual Basic or Visual C# Express Editions Hardware: Download: Download

Download Video

Visual Basic Upgrade Your Game Series

Introduction

For the third and final game, I will be creating a tile-based role-playing game. These days, role-playing games have as good graphics and special effects as any first person shooter. But the origins of graphical role-playing games are tile-based games such as the early Final Fantasy and Ultima games. Because this is a beginner series with limited code, I cannot create even games as complex as those early works; however, I can give you most of the techniques you will need to put together similar-looking games. After that, it's really just up to your imagination.

Note: This documentation assumes that you have a basic knowledge of programming concepts and the Visual Basic environment. You can learn more about these topics in the product documentation by clicking Help on the menu bar, and then clicking Contents, Index, or Search. You can also access Help by positioning the mouse cursor on language keywords or user interface elements such as windows or dialog boxes, and pressing F1.

Getting Started

Building and Running Crusader

Once your project is loaded into the Visual Basic environment, you can compile and run the program in one step.

To build and run Crusader:

Press F5 to build and start the game under the debugger.

The game launches and you can use the arrow keys to control the hero and press P to use magic potions. Find the keys to open the doors and kill the wizard who has captured the princess.

Files

File	Use
Area.cs	Represents an 8 x 8 area of the world. Each area stores a set of tiles and current state of any dynamic objects. In addition, it stores connectivity information about which areas surround it.
BitmapCache.cs	A static class that stores bitmaps in a cache. This is used by the Sprite class to save on memory and loading time by reusing bitmaps.
Crusader.cs	The main display form. Other than UI initialization and keyboard events, little gameplay code is performed in here. Most code calls into GameState.
GameObject.cs	Abstract base class that represents an object that requires updating and drawing once per frame.
GameState.cs	Stores the current state of the game and controls all gameplay.
MapTile.cs	Stores an individual tile. Each tile has a background sprite and an optional transparent sprite in the foreground. In addition, for dynamic sprites such as monsters, we store the current state of that monster, for example, Health.
Sounds.cs	A static class that plays any of the game sounds.
Tile.cs	Represents a tile from the data file.
World.cs	The world is a collection of Areas. This class handles reading of the tile and map files and any gameplay related to the world.

Game Development Concepts

If you are new to 2D game development, check out the 2D Game Primer (Visual Basic).

Tile-based Games

I asked the artist to cover three themes:

Outdoor—grass, trees, and paths.
Castles—walls, floor, and decorations.
Dungeon—different walls and floor.

Extracting Sprites and Animation from Sprite Sheets

Visual Basic

Public Sub New(ByVal gameState As GameState, ByVal x As Single, ByVal y As Single, _
               ByVal bitmap As Bitmap, ByVal rectangle As Rectangle, _
               ByVal numberAnimationFrames As Integer)
    Dim i As Integer = 0
    Do While i < numberAnimationFrames
        _frames.Add(bitmap)
 
        'Set the location and use the height and width from the 1st frame
        initialize(gameState, x, y, rectangle.Width / _
        numberAnimationFrames, rectangle.Height)
 
        _rectangle.Add(New Rectangle(rectangle.X + i * rectangle.Width / _
        numberAnimationFrames, rectangle.Y, rectangle.Width / _
        numberAnimationFrames, rectangle.Height))
        i += 1
    Loop
End Sub
Public Overrides Sub Draw(ByVal graphics As 
Graphics)
    graphics.DrawImage(_frames(CurrentFrame), outputRect, _
    _rectangle(CurrentFrame).X, _rectangle(CurrentFrame).Y, _
    _rectangle(CurrentFrame).Width, _rectangle(CurrentFrame).Height, _
    GraphicsUnit.Pixel, _attributes)
End Sub

Using Color Key to Make Sprites Transparent

If the game objects were drawn over the top of the tiles in the same way that all of the other sprites are drawn, they would look like this:

The code is just a few lines of modification to the sprite drawing routine: colorKey is Color.ToArgb(75, 75, 75).

Visual Basic

'Set the color key for this sprite;
_attributes= New ImageAttributes()
_attributes.SetColorKey(_colorKey, _colorKey)
 ....
graphics.DrawImage(_frames(CurrentFrame), outputRect, _
_rectangle(CurrentFrame).X, _rectangle(CurrentFrame).Y, _
_rectangle(CurrentFrame).Width, _rectangle(CurrentFrame).Height, _
GraphicsUnit.Pixel, _attributes)

Data Driven Map Architecture

Describing what goes where in a game like this makes much more sense to be in a data file than inside the code. This means that some aspects of the game are very easy for you to change without even recompiling.

There are two data files that drive most of the look and feel of the game. Things like how the doors open, how the monsters fight and what happens when you pick things up are, for this sample, hard coded in the code. But there's no reason why you couldn't change the data files to make them even more descriptive and then drive the game from the new files. You will be able to debate file formats and how they are laid out forever, so find something that works for your game and stick to it. To keep down the amount of code, the error checking is minimal. For a game that is designed to be modded by the end users, this is something that would have to be improved.

Tilelookups.csv

This file describes all of the tiles and sprites in the game. It's a comma-delimited format that contains the following information:

Name: text name of the item.
Shortcut: an abbreviated lookup. This value must be unique and for background tiles must be a single character.
Path to bitmap: the bitmap this tile comes from.
X: the x count into the tile sheet. 1 is the 1st column. Assumes that the tiles are all the same size.
Y: the y count into the tile sheet. 1 is the 1st row. Assumes that the tiles are all the same size.
Transparent: Y or N (not case sensitive); if Y the (75, 75, 75) will be color- keyed out.
Number of frames: how many frames of animation. The frames must be laid out from left to right with X,Y being frame 0.
Traversable: Open or Block (not case sensitive); if Block then the hero cannot pass.
Special: For doors and keys this is the color, for characters this is the default health.

Example:

        DoorGreenOpen,G,Door,gamedata\tiles.bmp,5,1,N,1,Open,Green

Map.txt

This file describes the set of 8 x 8 areas that make up the world. There is a single blank line between each area.

line 1: name of the area (must be unique).
line 2: the area you move to when you go North or —
line 3: the area you move to when you go East or —
line 4: the area you move to when you go South or —
line 5: the area you move to when you go West or —
lines 6-13: an 8 x 8 grid made up of the shortcut characters from tilelookups.csv.
lines 13 onwards: x,y,shortcut. A list of objects and their x,y position in the area; x and y are zero based.
final blank line:

Example:

start
-
forest1
-
-
>>>>>>>>
>.>.....
>...^...
>....ccc
^.^.....
^^......
>..>....
>>^>>>>>
1,1,kbr
1,6,pot
3,1,arm
4,1,att
4,6,tro
5,6,tro
6,6,tro

Character Development and Gameplay

The characters' attributes are:

Health, which should stay above 0 and is replenished by food items.
Experience, which is earned by killing monsters and gives attack and armor bonuses at certain levels.
Attack rating, which increases your damage and ability to hit.
Armor rating, which decreases the ability of others to hit you.
Potions, which do damage to all visible monsters.
Keys, which are the ones are you holding.

Extending Crusader

Since most of the game is data driven, open up the maps in Notepad and make some of your own.
Change all of the graphics to make a space themed game.
Game too hard or too easy? Change the rules of the game in the code. Give each monster its own attack and armour rating. Let the monsters attack back with magic.
Make the monsters move toward you. You should be able to reuse some of the hero animation code but you will need to implement some path finding algorithms to avoid obstacles.

Online Resources

Discuss this Starter Kit in Channel 9's Techoff forum.
Provide feedback on this documentation.
Check out Game Development on Coding4Fun.

Ask the ZMan: A Holiday Screen Saver with DirectX

Andy Dunn — Wed, 01 Nov 2006 06:48:00 GMT

	The project is a holiday-themed screen saver called DirectXmas.
The ZMan ZMan's Diary Difficulty: Intermediate Time Required: 1-3 hours Cost: Free Software: C# 2005 Express Edition, October 2005 DirectX SDK Hardware: Download: Download

The Coding4Fun team asked "Can we have some holiday-themed Coding4Fun articles?"

Of course it's important to answer questions from the readers too, so over the next few articles I will build a project that answers some questions and keeps the Coding4Fun "powers that be" happy. Here are some of the questions I will cover:

How can I build a screen saver using Managed DirectX?
Can you explain how the MatrixStack functions work?
Can I store my graphics in a resource file?

The project will be a holiday-themed screen saver that I imaginatively called DirectXmas (not because I want to recognize any particular holiday celebration over another, but purely because I get to use the X in DirectX twice). I will use the texturing techniques that I explained in the previous articles to animate a series of Christmas trees and other holiday decorations.

Creating the Screen Saver

As luck would have it, C# and VB.Net Express Editions both ship with a screen saver starter kit (Figure 1).

Figure 1. The Screen Saver Starter Kit project type in C#.

Reuse is just as important in tutorials as in code, so for instructions on how to create the project in the starter kit head over to Andrew Coates' weekend warriors column, also on Coding4Fun. You don't need to follow the entire article (unless you want to, of course). Just go as far as creating the project and running it.

The project will be using the DirectX sample framework code and code from previous articles so add references to Microsoft.DirectX, .Direct3D and .Direct3DX. Browse to the sample framework source (usually C:\Program Files\Microsoft DirectX 9.0 SDK (October 2005)\Samples\Managed\Common) and add the files that match dx*.cs (avoid the files beginning with w; they are beta files for a future DirectX SDK). Finally, add the Media folder and the three source files from the last texturing article. Solution explorer should look like Figure 2.

Figure 2. The project start point.

If you try to compile at this point, you will get two errors. The first one complains about unsafe code. The DirectX Framework has some unsafe code in it for performance reasons. You enable this in the project properties as shown in Figure 3.

Figure 3. Enabling unsafe code for this project.

The second error says that there are two entry points—which makes sense, because at the moment there are two projects merged together. Since the screen saver sample has some useful code in it, you should leave that as the main entry point and rename the one in Texture.cs:

static int Main()

becomes

public static int DirectXmas()

Everything should now compile and run and you should still see the default screen saver from the sample.

Making the Screen Saver use DirectX

Take a look in the program.cs source file, specifically at the Main() function. Screen savers are just normal .EXEs which have been renamed to .SCR. When they are run, a command-line parameter is passed to tell them if they are supposed to run as normal, show the options dialog or show in the preview window. The screen saver runs when the command line is /s or when there are no parameters. The code is in the ShowScreenSaver() function. To call the old entry point and run our DirectX code, replace the 2 lines of code in that routine with:

AskZman.Textures.DirectXmas();

Run the program now and you will see the textured earth from the last tutorial. But wait, that's really not how screen savers are supposed to look. Firstly, it's in a window, and secondly, it doesn't close when you move the mouse or press a key.

The sample framework makes it very easy to create a full screen application. Find the line that creates the DirectX device:

sampleFramework.CreateDevice( 0, true, Framework.DefaultSizeWidth, 
      Framework.DefaultSizeHeight, sample);

then change the "true" to "false". The second parameter controls whether the device is created in a window. You probably notice that it's running at a low resolution, since the default height and width are 640x480. This is something that could be a setting in the screen saver settings screen, but for now using the current screen resolution is acceptable. Change the code to read:

sampleFramework.CreateDevice(0, false,
      System.Windows.Forms.Screen.PrimaryScreen.Bounds.Width, 
      System.Windows.Forms.Screen.PrimaryScreen.Bounds.Height, 
      sample);

The program now runs full screen; however, you can only get out by pressing ESC.

Open the source code for the sample screen saver ScreenSaverForm.cs to see how they check for the mouse and keyboard. The KeyDown and MouseDown events just close the form and quit the program. The MouseMove event is a little more complex. The first time it is called, the code stores the position of the mouse. On subsequent calls it checks the mouse to see if it has moved significantly from the stored point. In this case significantly means more than 10 pixels in any direction. I'm not 100% sure why the code is like this, but I suspect it just stops desk tremors and minor earthquakes from cancelling the screen saver (vital on the West coast of the USA).

If you have looked at any of the DirectX samples in any detail, you will know that although you see a form, the code does not in fact inherit from a Windows form, so that code cannot be used unchanged. Fortunately, the sample framework provides similar functionality.

If you are still looking at the CreateDevice() call above, then look just one line higher to where the application hooks the KeyDown event.

sampleFramework.Window.KeyDown += 
      new System.Windows.Forms.KeyEventHandler(sample.OnKeyEvent);

You should add two more event handlers for the MouseMove and the MouseDown events:

sampleFramework.Window.MouseMove += 
      new System.Windows.Forms.MouseEventHandler(sample.OnMouseMove);
sampleFramework.Window.MouseDown += 
      new System.Windows.Forms.MouseEventHandler(sample.OnMouseDown);

The new OnMouseDown() function looks like this:

private void OnMouseDown(object sender, System.Windows.Forms.MouseEventArgs e)
{
      GraphicsWindow window = (GraphicsWindow)sender;
      window.Close(); 
}

And you should replace the OnKeyEvent() code with the same two lines.

Using the screen saver sample as an example, the OnMouseMove() function becomes:

private bool isActive = false;
private Point mouseLocation;
private void OnMouseMove(object sender, System.Windows.Forms.MouseEventArgs e)
{
  // Set IsActive and MouseLocation only the first time this event is called.
  if(!isActive)
  {
    mouseLocation = e.Location;
    isActive = true;
  }
  else
  {
    // If the mouse has moved significantly since first call, close.
    if ((Math.Abs(e.Location.X - mouseLocation.X) > 10) ||
        (Math.Abs(e.Location.Y - mouseLocation.Y) > 10))
    {
      GraphicsWindow window = (GraphicsWindow)sender;
      window.Close();
    }
  }
}

Running the program now gives the desired effect.

If you have been following along building the code from the last tutorial there is a little "bug" to fix from last time. The code has a hard coded path to the earth texture which won't work when the screen saver is in the system32 directory where screen savers live. You can use the sample framework Utility.FindMediaFile() function to help with locating this. If you look at the source for that function it searches a set of "likely" paths until it finds the named file. In texture.cs, OnResetDevice() replace the code that loads the earth texture with the following:

//Load the textures
sphericalTexture = TextureLoader.FromFile(e.Device, Utility.FindMediaFile("earth2k.jpg"));

To make the program work as a screen saver there are a few manual steps to follow:

Browse to the debug directory and find DirectXmas.exe and rename it to DirectXmas.scr
Copy the file to c:\windows\system32.
Browse to the Media directory and locate the earth2k.jpg and the UI folder
Copy them to c:\windows\system32. Be sure to copy the whole UI folder and its contents

Now right-click on your desktop and choose Properties, then select the Screen Saver tab (Figure 4).

Figure 4. Choosing the DirectXmas screen saver.

Select DirectXmas and press preview to see the result of your work. There's no screen shot because the screen looks exactly like it did at the end of the last tutorial; it just works as a screen saver.

The code is a long way from being finished:

The "Settings" dialog is for the old sample;
It only runs on one of my two monitors;
and worst of all, it really didn't put me in the holiday mood yet!

Stay tuned and if you have suggestions please let me know.

Homework for this time (though I've never had anyone send me an answer yet!):

Remove the UI code and special rendering, like the shape selection and transparency, from the sample, because it's really no use now that the mouse and keyboard have no function other than cancelling the screen saver.
Change the camera/view matrix code so that the screen saver shows rotation around the world—and for special credit, make the world point in the right direction!

The code in this article uses C# 2005 Express Edition and the October 2005 DirectX SDK.

The ZMan is here to solve your Managed DirectX programming problems. If you have a question for the Zman then send it to zman@thezbuffer.com.

Credits:

Thanks to

Carlos Aguilar for the code colorizer
Fridger Schrempp for the earth texture from the Celestia MotherLode

Ask the ZMan: A Holiday Screen Saver with DirectX, Part 2

Andy Dunn — Wed, 01 Nov 2006 06:48:00 GMT

	The project is a holiday-themed screen saver called DirectXmas
The ZMan ZMan's Diary Difficulty: Intermediate Time Required: 1-3 hours Cost: Free Software: C# 2005 Express Edition, October 2005 DirectX SDK Hardware: Download: Download Code Download Code

Last time you created the basic shell of a Managed DirectX screen saver. If you worked on the "homework" you should have a rotating earth screen saver. If you did not do the homework, then shame on you. You can download the slightly modified source code from the DirectXmas Homework for Part 1 link above.

This week I will begin the process of adding shapes into the scene to create the holiday theme and you will learn about scene graphs and the DirectX MatrixStack.

Drawing a Tree

In the texturing articles I talked about how DirectX does not contain APIs for mapping textures because it is something that is better done by an artist. Well, creating models falls into the same category. If you want a great-looking Christmas tree, you find one on the web, you learn to create models, or you pay an artist. Since this column is about programming, however, I will make a simple tree from the basic shapes in the API. You have a sphere, box, cylinder and teapot to choose from. The cylinder allows you to set a radius for the top and bottom, allowing us to make cone shapes. Using a thin cylinder for the trunk and 3 cone shapes for the branches, you can make a tree shape. It will look a little like it came from a cartoon, but that's what game developers call "Programmer Art"!

Start by replacing the code that renders the earth with the following:

Class declarations: This code creates transformation matrices to place each of the four objects in the correct place in the world. Since cylinders are created with their length pointing in the wrong direction, you have to rotate them as well as translate them:

private Mesh trunk;
private Mesh treeBottom;
private Mesh treeMiddle;
private Mesh treeTop;
private Material trunkMaterial;
private Material treeMaterial;
private static Matrix treeOrientation = Matrix.RotationX((float)(-Math.PI / 2.0));
private Matrix trunkPosition = treeOrientation * Matrix.Translation(0f, -1.1f, 0f);
private Matrix treeBottomPosition = treeOrientation * Matrix.Translation(0f, -.4f, 0f);
private Matrix treeMiddlePosition = treeOrientation * Matrix.Translation(0f, .4f, 0f);
private Matrix treeTopPosition = treeOrientation * Matrix.Translation(0f, 1.2f, 0f);

OnCreateDevice: This code creates a cylinder for the trunk and three cone shapes for the tree body:

//Create materials and Meshes here
trunkMaterial = new Material();
trunkMaterial.Ambient = Color.Brown;
trunkMaterial.Diffuse = trunkMaterial.Ambient;
treeMaterial = new Material();
treeMaterial.Ambient = Color.Green;
treeMaterial.Diffuse = treeMaterial.Ambient;
trunk = Mesh.Cylinder(e.Device, .2f, .2f, .4f, 32, 16);
treeBottom = Mesh.Cylinder(e.Device, 1.0f, .4f, 1f, 32, 16);
treeMiddle = Mesh.Cylinder(e.Device, .8f, .2f, 1f, 32, 16);
treeTop = Mesh.Cylinder(e.Device, .6f, 0f, 1f, 32, 16);

OnDestroyDevice:

//Dispose meshes here
if (trunk != null) trunk.Dispose();
if (treeBottom != null) treeBottom.Dispose();
if (treeMiddle != null) treeMiddle.Dispose();
if (treeTop != null) treeTop.Dispose();

OnFrameRender: In each render pass the trunk and three tree sections are drawn with the correct material and at the correct position and orientation:

//Draw the tree
device.Material = trunkMaterial;
device.Transform.World = trunkPosition;
trunk.DrawSubset(0);
device.Material = treeMaterial; ;
device.Transform.World = treeBottomPosition;
treeBottom.DrawSubset(0);
device.Transform.World = treeMiddlePosition;
treeMiddle.DrawSubset(0);
device.Transform.World = treeTopPosition;
treeTop.DrawSubset(0);

You may well ask where I got all of the numbers for the sizes and positions. I sketched it out on a good old-fashioned piece of paper and then tweaked them once I had the tree rendering.

There are a few extra lines of code to remove that had to do with the texturing, but once that is all done, the result should look something like this:

Problems, Problems, Problems

I'm sure many of you are thinking "that doesn't look like a very scalable way of doing 3D graphics" and you would be correct. I wanted to show the basics of drawing multiple objects in as simple a way as possible. You can see that for each object you have to set the state (materials, transformations, render states, textures, texture states, etc.) and then actually draw it. Position, scale and orientation of the objects is done by setting the world transformation before each draw call. You only have to set a state if it changes. For example, notice that I don't set the material for each of the tree segments because it's the same for all of them.

For a world which may have hundreds or thousands of objects to worry about this is not something that is going to work. A good object-oriented architecture groups together information about each object in a single class; and obviously, when you have multiple objects it's smart to store them in a collection. Before I solve those problems though, let's look at one other problem with the current code.

Imagine if you want to move the tree to the left. You might think that changing the position of the trunk like this would work, but it doesn't:

private Matrix trunkPosition = treeOrientation * Matrix.Translation(-1f, -1.1f, 0f);

It only moves the trunk. Although the tree looks like it is a single object it's actually 4 parts with no relationship between them. So you would have to alter the X position of each part to move the whole tree. Think about your favourite RPG game: When the character moves, his sword moves with him and so the tree should move when the trunk moves, as should any ornaments on the tree. The problem here is that each object is positioned absolutely. In other words, when you specify the position you are saying exactly where in the world it should be placed. To be able to connect objects you need to use relative positions. This means that instead of treeBottom being at position (x,y,z) it is at (dx, dy, dz) where dx is the change in position from the object to which it is connected—in this case, the trunk. Those of you who have done any Web or Windows Forms programming should know all about relative and absolute positioning. This is exactly the same, just with an extra dimension. It means that as well as state and position, it's necessary to know which object this one is relative to. If you drew the relationships out for our tree (and some ornaments) it would look something like this:

The tree object now has a single root called trunk and everything else is described in a way that is relative to the object above it in the structure. This means that if you move or rotate the root, everything else will move and rotate with it. I'm sure you have seen a tree structure like this in other code and you know they are fairly easy to implement. Each node in the tree has a collection of child objects of the same type. If you have done any reading on 3D programming theory then you already know that this is known as a scene graph. The "scene" is obvious because it represents the objects in our scene; the "graph" part comes from the fact that this kind of structure is more correctly known as a directed acyclic graph . I will leave it up to Wikipedia to tell you all about that!

Solutions, Solutions, Solutions

There are 3 problems to solve:

Collect all of the information about an object together
Store it in a structure for easier manipulation
Change the objects so that they draw relative to their parent objects

Add a new class to your solution called GameObject. (I know this isn't a game, but you can't use 3dObject as a class name.) Add the DirectX namespaces and System.Drawing. Make sure you use the same namespace as your main source code file, or include the correct using statements:

using System;
using System.Collections.Generic;
using System.Text;
using System.Drawing;

using Microsoft.DirectX;
using Microsoft.DirectX.Direct3D;

namespace AskZman
{
    public class GameObject
    {
        
    }
}

You need to add property accessors for a mesh, a color, a position, an orientation and the children collection. This is a great opportunity to use the snippets functionality in Visual C# 2005 Express Edition. Type "prop" and press Tab twice. You will see a template for a property with a private member and a public get/set accessor.

Type in the type—"Mesh"—and press Tab. Type in the name of the private member variable—"mesh"—and press Tab again. Finally, type in the name of the public property—"Mesh"—and press Enter. Notice that Visual Studio has filled in the correct places in the rest of the template for you.

You should repeat this for the following properties:

Type
private name
public name

Vector3
position
Position

Vector3
orientation
Orientation

List
children
Children

Notice that I am using the new generic collection types from .NET 2.0. Previously, this collection would have been just a List, which can only store things of type Object and so is not strongly typed. If you've written code using List you will know that your code gets filled with type conversions. With the generic collections everything is strongly typed, so the compiler and VS know exactly what is stored and will enforce it for you.

Modify the private definitions to set some sensible defaults:

private Vector3 position = Vector3.Empty;
private Vector3 orientation = Vector3.Empty;
private List children = new List();

Our example only needs to expose a general color rather than the entire material, so the property can be simplified to take a color and create the material as needed:

private Material material = new Material();

public Color Color
{
    get { return material.Ambient; }
    set 
    {
        material.Ambient = value;
        material.Diffuse = value;
    }
}

Since, most of the time, you will set all of the properties at the same time, it makes sense to have a single constructor to do that for you:

public GameObject(Mesh Mesh, Color Color, Vector3 Position, Vector3 Orientation)
{
    this.Mesh = Mesh;
    this.Color = Color;
    this.Position = Position;
    this.Orientation = Orientation;
}

The only additional code that is needed in this class is the code to render the GameObject. Since the data structure stores all of the relationships between the objects, all it takes to draw the entire object is to call a method on the root node. The root knows that it has to draw itself and all of its children. The code for rendering can be copied from the OnRender routine; rendering the children is a foreach loop and a recursive call to render each child:

public void Render(Device device)
{
    //draw this object
    device.Material = material; ;
    device.Transform.World = 
        Matrix.RotationYawPitchRoll(orientation.Z, orientation.Y, orientation.X) 
        * Matrix.Translation(Position.X, Position.Y, Position.Z);  
    mesh.DrawSubset(0);

    //if there are any children then draw them too
    foreach (GameObject child in Children)
    {
        child.Render(device);
    }
}

The world transformation is created from the orientation and position members for this object. This could be optimized a little by only creating the world matrix when position or orientation is changed, but I wanted to ensure everyone understands where it comes from.

Drawing a Tree for the Second Time

So let's start again now that there is a better architecture. In the final source code I have left the original code, but commented out, so that you can see both versions side by side.

Add a using clause for the generic collections:

using System.Collections.Generic;

Class Declarations:

private Mesh trunk;
private Mesh treeBottom;
private Mesh treeMiddle;
private Mesh treeTop;
private GameObject tree;

OnCreateDevice: Notice that the rotation is only applied to the root node. Since all of the transformations are relative, it means that any transformation applied to a parent node applies to all of the children below it; so rotating the trunk in the correct direction rotates the whole tree. Also notice that the positions are now relative and therefore easier to understand:

//Create materials and Meshes here
trunk = Mesh.Cylinder(e.Device, .2f, .2f, .4f, 32, 16);
treeBottom = Mesh.Cylinder(e.Device, 1.0f, .4f, 1f, 32, 16);
treeMiddle = Mesh.Cylinder(e.Device, .8f, .2f, 1f, 32, 16);
treeTop = Mesh.Cylinder(e.Device, .6f, 0f, 1f, 32, 16);

//For the screen saver we create the meshes and the scene graph at the same time
//this may not be the most efficient thing for your application to do
tree = new GameObject(trunk, Color.Brown, new Vector3(0f, -1.1f, 0f), 
     new Vector3(0f, (float)(-Math.PI / 2),  0f));
GameObject bottom = new GameObject(treeBottom, Color.Green, 
     new Vector3(0f, 1f, 0f), Vector3.Empty);
GameObject middle = new GameObject(treeMiddle, Color.Green, 
     new Vector3(0f, 1f, 0f), Vector3.Empty);
GameObject top = new GameObject(treeTop, Color.Green, 
     new Vector3(0f, 1f, 0f), Vector3.Empty);
tree.Children.Add(bottom);
bottom.Children.Add(middle);
middle.Children.Add(top);

OnFrameRender:

//Draw the tree
tree.Render(device);

But if you run that program you can see it really doesn't look much like a tree any more.

Although the code stores the positions and rotations as relative to each other, DirectX does not work that way. All DirectX knows about is a single world transform applied before a draw call. So the trunk is positioned and rotated correctly because it is at the root. But the other objects are all at absolute position (0,1,0) with no rotation instead of being relative to the trunk. The Render() routine needs to be modified to remember the position of the parent so that the children can take that into account when they are drawn.

Since this is such a common way of rendering a scene, DirectX provides helper routines. They are encapsulated in the MatrixStack class.

Drawing a Tree Using the MatrixStack

The matrix stack class provides a way for your code to remember the correct world transformation for each node in the tree as you walk through it. As you begin to draw each object, you save the current world transformation using the Push method. You then add in the transformations for this particular node and they are combined with the transformations already on the stack. You retrieve the final combined transformation by reading the Top property and use this to set the world transformation. Then you can draw the node and its associated children. Remember that each child will also use the MatrixStack to remember its transformation. After you have drawn the node and its children, you restore the state of the world transformation by calling Pop and you can then return from your drawing routine.

Modify the GameObject class to have a single static MatrixStack:

static MatrixStack stack = new MatrixStack();

Update the Render() method to push and pop and use the MatrixStack operations to do the transformations:

public void Render(Device device)
{
    //draw this object
    device.Material = material; ;
    stack.Push();
    stack.TranslateLocal(position.X, position.Y, position.Z);
    stack.RotateYawPitchRollLocal(orientation.Z, orientation.Y, orientation.X);
    device.Transform.World = stack.Top;
    mesh.DrawSubset(0);

    //if there are any children then draw them too
    foreach (GameObject child in Children)
    {
        child.Render(device);
    }

    //Restore the transformations
    stack.Pop();
}

The final rendering should look like a tree once again. You should be able to change the positions and rotations of the individual items and see that the translation affects all of the children automatically.

For the final source code I have added some decorations to the tree.

Homework

You've seen the tree made out of DirectX primitives. Try to make some other holiday models by using just these primitives along with transformations, rotations and the basic scene graph you created. If I get some good ones I will actually use them in the next column with your name attached if you want.

The code in this article uses Visual C# 2005 Express Edition and the October 2005 DirectX SDK

The ZMan is here to solve your Managed DirectX programming problems. If you have a question for the ZMan then send it to zman@thezbuffer.com.

Credits:

Thanks to

Carlos Aguilar for the code colorizer

Ask the ZMan: A Holiday Screen Saver with DirectX, Part 3

Andy Dunn — Wed, 01 Nov 2006 06:47:00 GMT

	The project is a holiday-themed screen saver called DirectXmas.
The ZMan ZMan's Diary Difficulty: Intermediate Time Required: 1-3 hours Cost: Free Software: C# 2005 Express Edition, October 2005 DirectX SDK Hardware: Download: Download Code Download Code

Last time you used a basic scene graph data structure to draw multiple shapes to create the fir tree with the decorations. Hopefully you had some fun creating new objects out of the basic mesh shapes provided by DirectX. Since the final download from last time, I have added another holiday object—a snowman. The body is three spheres, the hat is two cylinders, the nose is a cone just like the tree segments and the eyes are a couple more small spheres. In addition, I have added a very large thin box to represent the ground and put the tree creation inside a loop. Because the drawing process is now relative, all you have to do is change the position of the tree trunk and the whole tree will draw at a different position. All of the code is identical in style to the tree creation from last time and is almost all inside the OnCreateDevice function. I've also moved the camera slightly to give a better point of view and slowed the camera rotation. You can download the start point for this column from the link at the top of the article and compare it to where you left off last time. The start point looks something like this:

This week you will add some animation to the scene and tidy up the code.

Flashing Lights

Animation in a computer game is anything that changes in your scene with time—it's not limited to changing positions or shapes, but any change in the way something is drawn, such as color or a special effect.

The first animation I am going to cover is changing the colors of the tree decorations. The way the scene is currently described, the only reference to those particular shapes is inside the tree structure. It's possible to walk into the tree structure every time you need to change something and search for it, but it's better to be able to go straight to the items you want to change. The first thing to do, then, is add the decorations to a list so they are easy to access. Add the following declaration to store them:

private List decorations=new List();

Then store a reference as they are added to the scene graph. Modify the contents of the loop in addOrnaments to this:

GameObject decoration=new GameObject(bauble, Color.Red, 
      new Vector3((float)(baseWidth* Math.Sin(angle)), (float)(baseWidth * Math.Cos(angle)), -0.55f),
      Vector3.Empty);
decorations.Add(decoration);
treepart.Children.Add(decoration);

The sample framework provides a function called OnFrameMove which is always called before any rendering happens. This is the correct place to make updates to the scene, such as animation. Animation is almost always correctly done based on the current game time, rather than a fixed increment each time OnFrameMove is called. The combination of different processor speeds and different graphics hardware will mean that you can never guarantee how often OnFrameMove is called. So, while an animation may play at a perfect speed on your computer, you can be sure somewhere else there is a computer that will be faster and another that will be slower. If you base all of your animations on the current game time you can be sure that no matter what the frame rate, everything will move at the speed you want.

For example, imagine if you want to move an object 5.0 units in the x direction in one second. You could add 0.1 to the x value on each frame. This would move the object 6.0 per second if the frame rate is 60fps, but it would move it 12.0 in the same time if the frame rate was 120fps on a faster computer. The correct way is to use a calculation based on the current elapsed time of the application, such as x=startPoint + 5.0 * appTime. Then, no matter what the frame rate, x will have changed by exactly 5.0 in 1 second.

You can see how I already do this to change the position of the camera:

new Vector3(5f * (float)(Math.Sin(appTime/10.0)), .5f, 5f * (float)(Math.Cos(appTime/10.0)))

appTime is maintained by the framework and passed in to the OnFrameMove function.

In the case of this animation, you want to change the color of the decorations every N seconds, where N is a value that the user should be able to select in the Options dialog. There is no Options dialog yet, so for now this will just be a variable. You should also allow the user to disable the animation so there will be a boolean variable for that decision.

Add the following declarations:

//decoration animation control variables
private bool animateDecorations = false;
private double animateDecorationsTime = 0.2;
private double lastAnimationTickTime = 0.0;
private Color[] decorationColors = new Color[] {Color.Red, Color.Blue, 
      Color.BlanchedAlmond, Color.DarkOrange, Color.HotPink};

The animation is very trivial. If enough time has passed since you last animated, then loop through the decorations and give each a random new color in the OnFrameMove function:

if (animateDecorations)
{
    if (appTime - lastAnimationTickTime >; animateDecorationsTime)
    {
        lastAnimationTickTime = appTime;
        Random randomColor = new Random();
        foreach (GameObject decoration in decorations)
        {
            decoration.Color = decorationColors[randomColor.Next(5)];
        }
    }
}

If everything is going to plan you should see the lights change when you run:

Goodbye Frosty

That title probably only makes sense to those who have lived in the USA during the holidays. Frosty the Snowman is a classic US holiday cartoon during which Frosty goes out in the sun and suffers the consequences. I can't do an animation worthy of Pixar, but melting the snowman in this scene is as easy as changing the coordinates of the body parts so that they slide below the "ground." Leaving the hat on a pile of snow is a nice end point for the animation. The GameObjects to animate are currently local variables in OnCreateDevice, so promote their scope to the class and leave just their instantiation in OnCreateDevice:

private GameObject lowerBodyNode;
private GameObject upperBodyNode;
private GameObject headNode;
//melting animation control variables
private bool animateSnowman = true;
private double animateSnowmanSpeed = 120.0f; //2 minutes change to a lower number if you are not patient!
//replace the similar lines in OnCreateDevice with these
lowerBodyNode = new GameObject(body, Color.White, new Vector3(0f, .15f, 0f), Vector3.Empty);
upperBodyNode = new GameObject(body, Color.White, new Vector3(0f, .3f, 0f), Vector3.Empty);
headNode = new GameObject(head, Color.White, new Vector3(0f, .25f, 0f), Vector3.Empty);

To animate these three shapes toward the ground, you just have to decrease the y component of the position over a suitable period of time in the OnFrameMove function.

if (animateSnowman)
{
    if (appTime <; animateSnowmanSpeed)
    {
        Vector3 position = lowerBodyNode.Position;
        position.Y = (float)(0.15 - 0.35 * (appTime / animateSnowmanSpeed));
        lowerBodyNode.Position = position;

        position = upperBodyNode.Position;
        position.Y = (float)(0.3 - 0.2 * (appTime / animateSnowmanSpeed));
        upperBodyNode.Position = position;

        position = headNode.Position;
        position.Y = (float)(0.25 - 0.15 * (appTime / animateSnowmanSpeed));
        headNode.Position = position;
    }
}

Notice that because everything is relative, you don't have to worry about animating the hat, eyes, or nose. Since they are attached to the head, they just move wherever the head moves. The snowman has to stop melting at some point, so this animation stops once the application time passes the melting time. Each part of the snowman has its position changed based on the current application time and a speed factor that can be changed.

Tidying up the screen saver

So the graphics work of the screen saver is now complete. If that's all you were interested in, then I will see you next time. The small remaining part of this article is adding in the screen saver controls and removing the remnants of the RSS screen saver that you started with.

Since you don't need the RSS media, or the sample UI media, you can remove the media folder. You can also get rid of the documentation folder and the RSS folder as they are no longer needed either. Delete the ScreenSaverForm.cs and then remove the couple of lines that still refer to the RSS object. The easiest way is to compile and remove the lines with errors.

Finally, you need to update the OptionsForm with controls that map to the variables used in the animation. Since this is not a Windows Forms column I will not walk you through this step-by-step but you can download the example code to see how it works. The values are saved in the config file just like the screen saver starter kit and are read back when the screen saver starts up. The final code can be downloaded from the link at the top of the article.

Installing the screen saver is simpler than the first article because there is no media to worry about. Simply rename the .EXE to .SCR and copy it and the config file into the system32 directory. See the first part of this series if you need more detailed instructions.

You have now completed a Managed DirectX screen saver using the sample framework, created and used a simple scene graph and learned how to animate object in the scene. Remember that, as I explained in the first part, nobody really creates graphics using lots of spheres and cylinders. It's just a convenient way to introduce the scene graph and the animation effects without having to worry about complex models. Hopefully its also been fun in a "Lego" kind of way to think about building shapes out of other shapes.

Homework

I'm sure the first thing most of you did to the code was change the tree density so there were a lot more trees in the scene and I'm sure you were shocked about how quickly the performance of the screen saver dropped. After all you probably paid several hundred dollars for a graphics card that could draw millions of triangles per second and yet for some reason a few hundred trees with relatively few triangles is bringing it to its knees. The solutions to these will be in some future Ask The Zman columns, but for now I would love to hear your ideas on why you think things are going so slowly on such powerful hardware.

The code in this article uses C# 2005 Express Edition and the October 2005 DirectX SDK

The ZMan is here to solve your Managed DirectX programming problems. If you have a question for the ZMan then send it to zman@thezbuffer.com.

Credits:

Thanks to

Carlos Aguilar for the code colorizer

Upgrade Your Game: Space Blitz (Visual C#)

Andy Dunn — Tue, 31 Oct 2006 23:23:00 GMT

	This article enhances Space Blitz sample application by adding new features.
The Z-man Andy Dunn The Z Buffer Difficulty: Intermediate Time Required: 1-3 hours Cost: Free Software: Visual Basic or Visual C# Express Editions Hardware: Download: C# Download

Download Video

Visual C# Upgrade Your Game Series

2D Game Primer
Tiny Tennis (note:Tiny Tennis using XNA available)
Space Blitz
Crusader

Introduction

You probably noticed that the animation in the previous game was not as smooth as you would have expected for such a simple game with so little going on. The main reason for this is because of my choice of picture boxes for the sprites. As I mentioned, this is not something that is recommended because there is a lot of overhead that comes with Windows controls. It really is overkill to use a Windows control just to draw a rectangle or any other graphic on the screen. However, it served its purpose for making a simple game with only a few lines of code.

For the third game you will take on another classic, a Space Invaders type game. Because this game has sprites that are very clearly not rectangles, and because there are a lot more of them to draw, this example will implement the sprites using bitmap graphics.

Since most developers are not graphically inclined, this is the time that your game development team needs to grow. Most games these days use graphics that are far more complex than the original Space Invaders or Pac-man and it's just not realistic to create them yourself. You may be lucky enough to find some royalty-free artwork on the Internet, but if you intend to sell your game, be sure to check the specific licensing for that artwork. The safest thing to do, if you are not rich enough to hire someone to produce your art, is to make friends with someone who can.

Getting Started

Building and running SpaceBlitz

Once your project is loaded into the Visual C# environment, you can compile and run the program in one step.

To build and run SpaceBlitz:

Press F5 to build and start the game under the debugger.

The game launches and you can control the base ship using the left and right arrows. Use the spacebar to fire.

Files

Alien.cs
Inherits from Sprite. Represents a single alien.
Aliens.cs
Inherits from GameObject. Represents the group of aliens. Movement of aliens is done as a group. This file also has routines that work on the whole group such as random selection of an alien to drop a bomb.
Base.cs
Inherits from Sprite. Represents the bases you can shelter behind. Contains routine for per pixel collision and erosion of the bases.
BaseShip.cs
Inherits from Sprite. Represents the ship. Contains routines for movement controlled by the keyboard.
Bomb.cs
Inherits from Sprite. Represents bombs. Contains code for collision detection.
GameObject.cs
Abstract base class that represents an object that requires updating and drawing once per frame.
GameState.cs
Stores the current state of the game and controls all gameplay.
Keyboard.cs
Static class that stores the current up/down state of the control keys.
Missile.cs
Inherits from Sprite. Represents missiles. Contains code for collision detection.
PointFMath.cs
Helper routines for common PointF calculations not included in the PointF class.
Saucer.cs
Inherits from Sprite. Represent the bonus flying saucer.
SpaceBlitz.cs
The main display form. Other than UI initialization and keyboard events, little gameplay code is performed in here. Most code calls into GameState.
Sprite.cs
Inherits from GameObject. Handles basic 2D sprite manipulation and loading.

Game Development Concepts

If you are new to 2D game development, check out the 2D Game Primer (C#).

Bitmap Sprites

Drawing a bitmap to the screen only requires a few lines of code. Using the code from the TinyTennis sample, you can add a new member variable to store the bitmap and a new constructor that takes the file name of the bitmap file. The bitmap constructor takes a file name, which means it's very easy to load and store.

protected Bitmap _frame;
public Sprite(GameState gameState, float x, float y, string filename)
{
    //Load the bitmap
    _frame=new Bitmap(filename);
}

Drawing the bitmap is almost as trivial. Drawing to a Windows Form is done using the GDI graphics API, which is contained in the System.Drawing namespace. All GDI drawing is done to a Graphics object. This means that you have to provide the graphics object to the Sprite.Draw call. Fortunately, the Paint event gets the Graphics object for the window as part of its EventArgs, so this turns out to be simple to get hold of. Drawing the bitmap to the graphics surface is also a single line of code using the DrawImage method.

public override void Draw(Graphics graphics)
{
    //Draw the first frame at the current point
    graphics.DrawImage(_frame, Location.X, Location.Y, Size.Width, Size.Height);
}

All of the movement code comes right across from the TinyTennis sample. The aliens move based on a velocity assigned to them. The base ship moves based on a velocity set by the user pressing keys on the keyboard. Once a velocity is set, the Sprite base class will continue to animate as time goes by. In addition, the rectangle collision code can be used to check for collisions between missile, aliens, base ships, and saucers. Reuse is great!

Animating Sprites by Flipping the Image

Animation isn't just about moving things around the screen. Our aliens need to waggle their arms, legs, and antennae. If you look in the graphics folder, you will see that the artist provided two poses for each alien. To get the animation effect, you simply have to draw the images one after the other. Since this game only has two frames of animation, I have created a constructor that takes the two file names and stores them in a list of bitmaps. If you are new to .NET 2.0, generics may be new to you so you may want to go and read an introductory article. In the Draw call a decision has to be made which frame to draw and this is done by using the CurrentFrame member variable. CurrentFrame will be set in one of the Update() methods, usually in an inherited class, depending on how fast or slow the animation is to be. For this game, only the aliens need image flipping animation so the member is left at its default value of 0 for all of the other sprites.

Notice that just like the movement animation, the flipping speed is tied to the game time. Almost everything that happens in the Update() methods will be tied to the time, so that, no matter which machine you run on, the timing will stay exactly the same.

protected List _frames = new List();
public Sprite(GameState gameState, float x, float y, string filename1, string filename2)

{
    //Load the 2 animation frames
    _frames.Add(new Bitmap(filename1));
    _frames.Add(new Bitmap(filename2));
}

public override void Draw(Graphics graphics)
{
    //Draw the correct frame at the current point
    graphics.DrawImage(_frames[CurrentFrame], Location.X, Location.Y, Size.Width, Size.Height);
}

Per Pixel Collisions

For the bases, checking the rectangle as you did in TinyTennis will not be sufficient because the shapes need to slowly get destroyed by the base ships' bullets and the aliens' missiles. This means that the shape to collide against becomes non-rectangular very quickly. In this case, it's necessary to check the bitmap itself to see if the bullet has hit a non-black pixel. For a perfect collision, you need to check every pixel of the first sprite against the second sprite which, as you can imagine, gets slow very quickly. So, just like the bounding shape checks were an approximation to the perfect check, you can look for other ways to approximate this kind of collision. Since you know that our bullets only move in the Y direction, there is no need to check for anything other than the leading edge of the bullet, which cuts the pixel checks down to 6 pixels. But what if you just check the 2 leading corner pixels? You would miss any collisions that happen between them, but that's just 4 pixels and, for this game, this is an acceptable performance/accuracy trade off.

public bool CheckPixel(PointF point)
{
    //Check this pixel and one 6 to its right (the size of missiles and bombs) to see if we have hit anything
    return (isPixelOpaque((int)(point.X - Location.X), (int)(point.Y - Location.Y)) || isPixelOpaque((int)(point.X - Location.X + 6), (int)(point.Y - Location.Y)));
}
private bool isPixelOpaque(int x, int y)
{
    //If the pixel is out of range that counts as black
    if (x < 0 || x > _frames[0].Width - 1 || y < 0 || y > _frames[0].Height - 1) return false;
    //Otherwise check for anything that is not black
    return (_frames[0].GetPixel(x, y) != Color.FromArgb(0, 0, 0));
}
  [from Aliens.Update()]
sprite.CurrentFrame = (int)(((gameTime * _speed) / 50f) % 2f);

.....

Destroying Bitmaps

Now that you can collide on a per pixel basis with the bases, the sprites need to be updated so that they appear to get damaged over time. It's important to do this not just because you draw the sprites in every frame, but because a user could switch applications or minimize the game. When the game is restored, you need to be able to redraw the whole screen.

Since each sprite stores its own copy of the bitmap, it's possible for the Base sprite to set certain pixels within itself to black so that they slowly get removed. Setting the pixels to black means that any future missile will not pass the per pixel test. For this game, I have chosen to draw a black circle of a random radius at the point of collision.

public void Erode(PointF point)
{
    //Draw a black circle in the bitmap over the point of intersection
    using (Graphics graphics = Graphics.FromImage(_frames[0]))
    {
        graphics.FillEllipse(Brushes.Black, point.X - Location.X - _sizeX / 2 + 3, point.Y - Location.Y - _sizeY / 2, _sizeX, _sizeY);
    }
}

Gameplay

The gameplay here, though not as advanced as in any modern game, is still something that needs to be managed properly. The game needs to be able to detect when all of the aliens are destroyed and recreate a new wave of aliens; it needs to randomly select an alien to drop a missile; and it needs to randomly add the bonus flying saucer to the screen.

If you are not careful with your code structure you will find that these sorts of tasks get randomly scattered around your code. For this game, I have chosen to encapsulate as much of this logic in one place: the GameState class. In the TinyTennis sample, this was used to store the scores, but in this game you will use it to store the scores, the level, whether you are currently dropping a missile, how many aliens are left, and several other things that pertain to the current state of the game.

You will also remember that for the collisions in TinyTennis you had to pass in references to the bats to the Ball object. Obviously this isn't something that is scalable beyond a handful of objects, so for this game the GameState class stores collections of all of the game objects and is passed into each object during creation. This means any object has access to any other object if it needs to query it for collisions or any other reason.

Take a look at the GameState object (there is too much code to post in the tutorial), and see how all the mechanics of the game play function.

Extending SpaceBlitz

Make some of the aliens detach themselves from the formation and fly down as in the arcade game Galaxian and others.
Add a second base ship controlled by a second player for a cooperative experience.
Go back to TinyTennis and change it to use bitmaps for the sprites rather than the Windows controls.
Add a high-score table and save the high scores so that they are remembered next time you play.

2D Game Primer (Visual C#)

Andy Dunn — Tue, 31 Oct 2006 23:04:00 GMT

	This article is a part of Upgrade Your Game series of tutorials. It covers some of the fundamentals of simple math needed for the games in this series.
The Z-man Andy Dunn The Z Buffer Difficulty: Easy Time Required: 1-3 hours Cost: Free Software: Visual Studio Express Editions Hardware: Download: Not available

Introduction

This 2D primer covers some of the fundamentals of simple math needed for the games in this series.

2D Game Development Concepts

The Game Loop

The solution that most games use (and by "most games" I mean everything right up to the top-selling Xbox 360 titles) is usually called the "game loop." In pseudo code it looks something like this:

    While (game is running)
        Check for input
        Update all objects in the game 
        Draw all objects in the game

private void TinyTennis_Paint(object sender, PaintEventArgs e)
{
    //Work out how long since we were last here
    in seconds
    double gameTime = _timer.ElapsedMilliseconds / 1000.0;
    double elapsedTime = gameTime - _lastTime;
    _lastTime = gameTime;
    _frameCounter++;
 
    //Perform any animation

    //Draw the game objects
 
   //Force the next Paint()
    this.Invalidate();
}

Sprites

Sprites are two-dimensional images that appear in a video game. Sometimes they are static images, but in general they are the building blocks for animation. They either move around the screen or change the image at regular intervals, giving a "flip book" kind of animation; or they do both, giving you characters like Mario and Donkey Kong that can move around the screen running and jumping.

Positioning a Sprite

Just like Windows Forms controls, sprites are placed at an x,y position on the form. 0,0 is the top left and ClientSize.Width, ClientSize.Height is the bottom right. Just like Windows Forms controls, sprites have a height and width too.

Vectors

The more game programming you do, the more you will come across the term "vector." Though I've avoided the term in this series for the sake of simplicity, it's worth noting that the concepts are used when the positions of the sprites are updated for animation.

Simply put, a vector is just an offset. So a vector of (4,2) means that from some start point you move 4 units in the x-axis and 2 in the y-axis.

You will see positions referred to as vectors. In this case, a position of (4,2) means an offset of (4,2) from the origin.

Vectors can be added together, so (4,2) + (2,4) gives you a total offset of (6,6).

Vectors can have negative components, so (-2,1) means move 2 units to the left on the x-axis and 1 unit down on the y-axis.

All of these concepts are used when moving a sprite around the screen.

Moving a Sprite

Sprites move with a certain velocity. Velocity is different from speed because velocity also contains information about the direction. For example, you could tell me you are driving at 60 mph, and I would guess that in one hour you would be 60 miles from the start point. But if you were driving round in a circle, that would not be the case. If I told you my velocity was 60 mph due east, then I would know for sure where you would end up.

Time-Based Animation

The code will look something like this (notice that for accuracy elapsedTime is a double and therefore needs to be cast down to a float to match the PointF structure):

    //Move the sprite based on the velocity
    Location.X += Velocity.X * (float)elapsedTime;
    Location.Y += Velocity.Y * (float)elapsedTime;

Sprite bounds

There are two ways to represent the rectangle containing the sprite:

X, Y, Height, Width
X, Y of top left corner and X, Y of bottom right corner

Simple Collision Detection

Collisions are a vital part of almost any game — they restrict where an object can move, whether an object has taken damage, and so forth.

private bool collide()
{
return ! ( sprite1.Location.X > sprite2.Location.X + sprite2.Size.Width
    || sprite1.Location.X + sprite1.Size.Width  < sprite2.Location.X
    || sprite1.Location.Y > sprite2.Location.Y + sprite2.Size.Height
    || sprite1.Location.Y + sprite1.Size.Height < sprite2.Location.Y);
}

2D Game Primer (Visual Basic)

Andy Dunn — Tue, 31 Oct 2006 22:58:00 GMT

	This article is a part of Upgrade Your Game series of tutorials. It covers some of the fundamentals of simple math needed for the games in this series.
The Z-man Andy Dunn The Z Buffer Difficulty: Easy Time Required: 1-3 hours Cost: Free Software: Visual Studio Express Editions Hardware: Download: Not available

Introduction

This 2D primer covers some of the fundamentals of simple math needed for the games in this series.

2D Game Development Concepts

The Game Loop

The solution that most games use (and by "most games" I mean everything right up to the top-selling Xbox 360 titles) is usually called the "game loop." In pseudo code it looks something like this:

    While (game is running)
        Check for input
        Update all objects in the game 
        Draw all objects in the game

Private Sub TinyTennis_Paint(ByVal sender As Object, ByVal e As PaintEventArgs) Handles MyBase.Paint
    'Perform any animation here
 
    'Draw the game objects here
 
    'Force the next Paint()
    Me.Invalidate()
End Sub

Sprites

Positioning a Sprite

Vectors

Simply put, a vector is just an offset. So a vector of (4,2) means that from some start point you move 4 units in the x-axis and 2 in the y-axis.

You will see positions referred to as vectors. In this case, a position of (4,2) means an offset of (4,2) from the origin.

Vectors can be added together, so (4,2) + (2,4) gives you a total offset of (6,6).

Vectors can have negative components, so (-2,1) means move 2 units to the left on the x-axis and 1 unit down on the y-axis.

All of these concepts are used when moving a sprite around the screen.

Moving a Sprite

Time-Based Animation

The code will look something like this (notice that for accuracy elapsedTime is a double and therefore needs to be cast down to a float to match the PointF structure):

'Move the sprite based on the velocity
Location.X += Velocity.X * CSng(elapsedTime)
Location.Y += Velocity.Y * CSng(elapsedTime)

Sprite bounds

There are two ways to represent the rectangle containing the sprite:

X, Y, Height, Width
X, Y of top left corner and X, Y of bottom right corner

Simple Collision Detection

Collisions are a vital part of almost any game — they restrict where an object can move, whether an object has taken damage, and so forth.

Private Function collide() As Boolean
    Return Not (Sprite1.Location.X > Sprite2.Location.X + Sprite2.Size.Width      OrElse _
    Sprite1.Location.X + Sprite1.Size.Width  < Sprite2.Location.X OrElse _
    Sprite1.Location.Y > Sprite2.Location.Y + Sprite2.Size.Height OrElse _
    Sprite1.Location.Y + Sprite1.Size.Height < Sprite2.Location.Y)
End Function

Upgrade Your Game: TinyTennis (C#)

Andy Dunn — Tue, 31 Oct 2006 22:50:00 GMT

	This article is a part of Upgrade Your Game series of tutorials. It walks you through the game architecture components for our tribute to Pong!, which we'll call TinyTennis.
The Z-man Andy Dunn The Z Buffer Difficulty: Intermediate Time Required: 1-3 hours Cost: Free Software: Visual Basic or Visual C# Express Editions Hardware: Download: C# Download

Demo Video

Download Video

Visual C# Upgrade Your Game Series

2D Game Primer
Tiny Tennis (note:Tiny Tennis using XNA available)
Space Blitz
Crusader

Introduction

Let's begin by creating a really simple game like Pong!, which uses only three moving objects and a straightforward gameplay and scoring technique. Given that you probably play games thousands of times more complex than this (such as The Sims or Half Life), you may initially dismiss this exercise as a waste of time; however, it's a great way to learn some of the fundamental concepts of video games in just a few lines of code. If these techniques are already familiar to you, then you may be interested in the MSDN game development webcasts, which cover 2D and 3D game development with Managed DirectX.

This tutorial walks you through the game architecture components for our tribute to Pong!, which we'll call TinyTennis.

You are also free to use the source code as the basis for your own projects, and to share your work with others or upload it to the Internet.

Getting Started

Building and Running TinyTennis

Once your project is loaded into the Visual Basic environment, you can compile and run the program in one step.

To build and run TinyTennis:

Press F5 to build and start the game under the debugger.

The game launches and you can control the left bat using the Q and A keys.

Files

Sprite.cs
The base class for the sprites. It contains initialization code and basic movement code.
TinyTennis.cs
The main form for the application. It initializes the sprites for the bats and ball, passes keyboard intput to the bats, and controls drawing the game to the screen.
ControlSprite.cs
An implementation of a sprite that uses a Windows control to draw to the screen.
Bat.cs
A ControlSprite representing the bat. Contains the keyboard movement code for human players and AI code for computer players.
Ball.cs
A ControlSprite representing the ball. Contains the code for checking for collisions with the walls and the bats and the bounces. Also plays the only sound in the game.
GameState.cs
Stores the scores.

Game Development Concepts

If you are new to 2D game development, check out the 2D Game Primer (Visual Basic).

Implementing Sprites

For TinyTennis, you'll need three very simple rectangular sprites that can be moved around the screen. In order to keep things simple for the first game (and because I recognize that a lot of .NET developers come from a Windows Forms background), I have chosen to use PictureBox controls to represent the sprites. A picture box has all the characteristics needed for this simple game:

It's rectangular.
It can have a background color.
It can be positioned at specific positions on the screen.

Using a picture box is not something you would do in a real computer game, but it's something that is very simple to get started with and hopefully something you already know about. In the next game, you will replace the picture box with real graphics.

The base class definition is:

public class Sprite
{
    public PointF Velocity;
    public PointF Location;
    public SizeF Size;

The inherited class adds a member for the control.

public class ControlSprite : Sprite
{
    public Control Control;

The inherited class defines how to draw it. Since Windows Forms can only be positioned at integer pixel boundaries, you have to round the sprite positions.

public override void Draw()
{
    //Move the control to the correct location 
    Control.Location = new Point((int)(Location.X + .5f), (int)(Location.Y + .5f));
     //and redraw it
    Control.Refresh();
}

The Windows Forms controls used in this game are created in the designer by dragging picture boxes onto the form. Since the size and position are set in the code, there's no need to position or size them correctly in the designer. All you need to do is name them correctly.

(Click image to zoom)

Code structure

Just because the game is simple doesn't mean that you should avoid good software engineering practices. This is especially important since you want to create a base on which to build the next two games. And, although Visual Studio Express has some refactoring support, it always helps to get things right from the beginning.

The most important class is the sprite. Sprites have a position and a velocity. Velocity is how fast the position changes in pixels per second. If velocity is 0, then the position will stay the same and you'll have a static sprite. In addition, you need to remember how big the sprite is so that you can work out collisions.

The game loop needs to call each sprite and perform two tasks: update and draw. Since you know the velocity, you can implement the movement part of the animation in the base class. Any complex or additional updates will be handled in an inherited class. For this game, drawing the sprite will be left to an inherited class since there is no general case.

Because I'm using PictureBox controls, I've decided to create an inherited ControlSprite class that can be thrown away in the later examples. ControlSprite sets the position of the control that represents the sprite and calls the RefreshMethod to paint it on the screen.

The Bat and Ball objects inherit from ControlSprite and provide the special processing that each of those require. For example the Bat class changes its velocity based on keyboard presses and AI. The Ball class changes its velocity based on collisions with bats and the edges of the gameplay area.

(Click image to zoom)

Implementing Time Based Animation

As mentioned in 2D Game Primer (Visual Basic), it's important to move the sprites based on time rather than a fixed distance per frame.

The first thing to do is make sure you have an accurate measure of the time. The .NET Framework 2.0 added the StopWatch class, which uses the most accurate measure available on your computer.

private Stopwatch _timer = new Stopwatch();
public TinyTennis()
{
    //Initialise and start the timer
    _lastTime = 0.0;
    _timer.Start();
}
private void TinyTennis_Paint(object sender, PaintEventArgs e)
{
    //Work out how long since we were last here in seconds 
    double gameTime = _timer.ElapsedMilliseconds / 1000.0;
    double elapsedTime = gameTime - _lastTime;
    _lastTime = gameTime;
}

Sometimes animation is based on how far into the game you are; sometimes it's based on how long it has been since the last time around the game loop. Rather than having every object calculate these two values, you do it once and pass it to the Update() function for each object.

The Update method of the Sprite objects and their inherited classes eventually gets called with these times:

public virtual void Update(double gameTime, double elapsedTime)
{
    //Move the sprite based on the velocity
    Location.X += Velocity.X * (float)elapsedTime;
    Location.Y += Velocity.Y * (float)elapsedTime;
}

Simple AI (Artificial Intelligence)

The interesting thing about AI for TinyTennis is actually making the AI do things wrong. It's interesting because normally AI is about making a computer play well. For this game playing, a perfect game is trivial for the computer:

Calculate the exact position the ball will end up and move the bat there. This involves some math but is simple to do.
Track the ball by moving the bat towards the current Y position of the ball. There is no math involved, but as long as the ball speed is not greater than the bat speed this will always work.

Of course this kind of opponent is no fun to play against, so the AI challenge for this game is making the computer miss the ball in a realistic, human way. I have chosen to take three approaches to this:

The computer doesn't start moving the bat until the ball is close to the computer side of the screen. How close can be varied to make the AI smarter or dumber.
The computer doesn't track bounces — it will look which way the ball is heading and move towards it, but a last-minute bounce may throw it off.
Just like a human, sometimes the computer will over- or underestimate how well it tracks the ball. This is implemented by adding a random offset into the movement that can, once again, be varied to change the skill level.

Extending TinyTennis

Add a start-up splash screen that allows the player to choose between one and two players.
Add an additional bat for each player by creating an extra picture box, and then creating additional Bat objects.
Add multiple balls. The game play will need to change a little. For example, do you want to pause the game when a point is scored? Or, do you want to score the point and make a new ball appear?
Since the sprites are just picture boxes, you can set the background image property to give the game a whole new look and feel. Remember that the collision detection is done based on the rectangular shape of the picture box; if the image does not fill the picture box, it might look odd when the ball bounces.

Upgrade Your Game: Tiny Tennis (Visual Basic)

Andy Dunn — Tue, 31 Oct 2006 22:46:00 GMT

	This article is a part of Upgrade Your Game series of tutorials. It walks you through the game architecture components for our tribute to Pong!, which we'll call TinyTennis.
The Z-man Andy Dunn The Z Buffer Difficulty: Intermediate Time Required: 1-3 hours Cost: Free Software: Visual Basic or Visual C# Express Editions Hardware: Download: VB Download

Demo Video

Download Video

Visual Basic Upgrade Your Game Series

Introduction

This tutorial walks you through the game architecture components for our tribute to Pong!, which we'll call TinyTennis.

You are also free to use the source code as the basis for your own projects, and to share your work with others or upload it to the Internet.

Getting Started

Building and Running TinyTennis

Once your project is loaded into the Visual Basic environment, you can compile and run the program in one step.

To build and run TinyTennis:

Press F5 to build and start the game under the debugger.

The game launches and you can control the left bat using the Q and A keys.

Files

Sprite.vb
The base class for the sprites. It contains initialization code and basic movement code.
TinyTennis.vb
The main form for the application. It initializes the sprites for the bats and ball, passes keyboard intput to the bats, and controls drawing the game to the screen.
ControlSprite.vb
An implementation of a sprite that uses a Windows control to draw to the screen.
Bat.vb
A ControlSprite representing the bat. Contains the keyboard movement code for human players and AI code for computer players.
Ball.vb
A ControlSprite representing the ball. Contains the code for checking for collisions with the walls and the bats and the bounces. Also plays the only sound in the game.
GameState.vb
Stores the scores.

Game Development Concepts

If you are new to 2D game development, check out the 2D Game Primer (Visual Basic).

Implementing Sprites

It's rectangular.
It can have a background color.
It can be positioned at specific positions on the screen.

The base class definition is:

Public Class Sprite
    Public Velocity As PointF
    Public Location As PointF
    Public Size As SizeF

The inherited class adds a member for the control.

Public Class ControlSprite : Inherits Sprite
 
    Public Control As Control

The inherited class defines how to draw it. Since Windows Forms can only be positioned at integer pixel boundaries, you have to round the sprite positions.

Public Overrides Sub Draw()
    'Move the control to the correct location 
    Control.Location = New Point(CInt(Location.X + 0.5F), CInt(Location.Y + 0.5F))
 
    'and redraw it
    Control.Refresh()
End Sub

(Click image to zoom)

Code structure

(Click image to zoom)

Implementing Time Based Animation

As mentioned in 2D Game Primer (Visual Basic), it's important to move the sprites based on time rather than a fixed distance per frame.

The first thing to do is make sure you have an accurate measure of the time. The .NET Framework 2.0 added the StopWatch class, which uses the most accurate measure available on your computer.

Private _timer As Stopwatch = New Stopwatch()
Public Sub New()
    'Initialise and start the timer
    _lastTime = 0.0
    _timer.Start()
End Sub
 
Private Sub TinyTennis_Paint(ByVal sender As Object, ByVal e As PaintEventArgs) Handles MyBase.Paint
    'Work out how long since we were last here in seconds
    Dim gameTime As Double = _timer.ElapsedMilliseconds / 1000.0
    Dim elapsedTime As Double = gameTime - _lastTime
    _lastTime = gameTime
 End Sub

The Update method of the Sprite objects and their inherited classes eventually gets called with these times:

Public Overridable Sub Update(ByVal gameTime As Double, ByVal elapsedTime As Double)
    'Move the sprite based on the velocity
    Location.X += Velocity.X * CSng(elapsedTime)
    Location.Y += Velocity.Y * CSng(elapsedTime)
 
End Sub

Simple AI (Artificial Intelligence)

Calculate the exact position the ball will end up and move the bat there. This involves some math but is simple to do.
Track the ball by moving the bat towards the current Y position of the ball. There is no math involved, but as long as the ball speed is not greater than the bat speed this will always work.

The computer doesn't start moving the bat until the ball is close to the computer side of the screen. How close can be varied to make the AI smarter or dumber.
The computer doesn't track bounces — it will look which way the ball is heading and move towards it, but a last-minute bounce may throw it off.
Just like a human, sometimes the computer will over- or underestimate how well it tracks the ball. This is implemented by adding a random offset into the movement that can, once again, be varied to change the skill level.

Extending TinyTennis

Add a start-up splash screen that allows the player to choose between one and two players.
Add an additional bat for each player by creating an extra picture box, and then creating additional Bat objects.
Add multiple balls. The game play will need to change a little. For example, do you want to pause the game when a point is scored? Or, do you want to score the point and make a new ball appear?
Since the sprites are just picture boxes, you can set the background image property to give the game a whole new look and feel. Remember that the collision detection is done based on the rectangular shape of the picture box; if the image does not fill the picture box, it might look odd when the ball bounces.

Ask the ZMan: Applying Textures, Part 2

Andy Dunn — Tue, 31 Oct 2006 14:50:00 GMT

Part 2 of a three part series explaining the addition of textures to DirectX Primitive shapes.This column covers how to get a different texture on each side of the box.

Welcome to Ask The ZMan, a new column on the Coding4Fun game portal. The ZMan is here to solve your Managed DirectX programming problems. If you have a question for the ZMan send it to zman@thezbuffer.com

Source code:

C# Download

VB Download

Since Coding4Fun has only just launched, there aren't any specific questions to answer so I thought I would start with a question that occurs frequently on the Managed DirectX newsgroup:

"I've created my first Managed DirectX project and can successfully draw shapes created using the Mesh.{shape} primitives. However, when I try to apply a texture to them a) nothing happens b) the shapes go black or c) the shapes disappear. How can I add a texture to the DirectX primitive shapes?"

Last time I covered how texture coordinates are stored inside the mesh object, the relationship between the texture coordinates and the texture, and the most useful of the texture sampling states. In this column I will cover how to get a different texture on each side of the box.

A New Start Point

I left you last time with an exercise to add rotation into the crate texture viewer program. Nobody sent me their homework on time so I'm not sure if it was too easy or too hard.

Download the sample code using the link at the top of this article to see my solution (see figure 1). You will need Beta2 of Visual C# Express and the April 2005 DirectX SDK. You can get Visual C# 2005 Express Edition Beta 2 by visiting http://msdn.microsoft.com/express. You can also use other Express Editions depending on the language of your choice, but this demonstration will utilize C#.

From the picture you can see I've added both rotation and translation. It is now possible to position the texture anywhere on the face of the box.

Figure 1. A solution to the exercise from the last column

You will see that I have refactored the code to begin creating a reusable library. I would have preferred to create a new class inheriting from the DirectX mesh . However, the DirectX mesh class is sealed so this is not possible. I chose to create a static library which takes DirectX mesh objects as parameters.

Take a look at SetBoxTexture in TexturedMesh.cs and you will see some resemblance to the TextureMesh function from last time. To add in the rotation and translation I made the code a little more generic. I also parameterized the function rather than picking up the global variables.

First, I created a unit square which for the texture coordinates. Unchanged, these coordinates would cause the whole texture to cover each face.

Vector2[] corners = new Vector2[4] 
{
    new Vector2(0f, 0f), //bottom left
    new Vector2(1f, 0f), //top left
    new Vector2(1f, 1f), //top right
    new Vector2(0f, 1f) //bottom right
};

Visual Basic

Dim corners As Vector2() = New Vector2() { _
    New Vector2(0.0!, 0.0!), 
    New Vector2(1.0!, 0.0!), 
    New Vector2(1.0!, 1.0!), 
    New Vector2(0.0!, 1.0!)}

Then I applied a transformation to each of these and stored the result into the texture coordinates of the mesh.

//apply the transformation to each corner and store the result back 
//into the texture coordinates
for (int j=0; j<4; j++)
{
  corners[j].TransformCoordinate(transform);
  verts[i + j].Tu = corners[j].X;
  verts[i + j].Tv = corners[j].Y;
}

Visual Basic

For j As Integer = 0 To 3
    'apply the transformation to each corner and store the result back
    ' into the texture coordinates
    corners(j).TransformCoordinate(transform)
    verts(i + j).Tu = corners(j).X
    verts(i + j).Tv = corners(j).Y
Next

The transformation was created by concatenating together transformation matrices for each of the input parameters.

Matrix transform =
Matrix.Translation(offsetX, offsetY, 0f)  
  * Matrix.Translation(-0.5f, -0.5f, 0f) //Translate the center of rotation
* Matrix.RotationZ(angle)               
  * Matrix.Scaling(1 / scaleX, 1 / scaleY, 1f) 
  * Matrix.Translation(.5f, .5f, 0f); //and move back the center of rotation

Visual Basic

Dim transform As Matrix = Matrix.Translation(offsetX, offsetY, 0.0F) * _
    Matrix.Translation(-0.5F, -0.5F, 0.0F) * Matrix.RotationZ(angle) * _
    Matrix.Scaling(1 / scaleX, 1 / scaleY, 1.0F) * _
    Matrix.Translation(0.5F, 0.5F, 0.0F)

I also added a TexturedMesh.Box() function which creates a mesh with texture coordinates already set to a useful default.

Displaying a Different Texture on Each Side

For boxes, it often makes sense to show the same texture on each side. But does this make sense for other shapes? Most of the meshes you encounter in a video game don't really have the same concept of sides that a box does and so it's worth finding out how to draw different things on different faces. Some of you may have heard that meshes can have multiple textures applied to them so it is theoretically possible to load up 6 textures, one for each face, and blend them together in some way. This technique is more often used to apply different kinds of textures to the whole object (for example, a base texture followed by a shadow map to darken some areas).

What I am going to describe is how to wrap a single texture around the box. Remember that the box is made up of 6 square faces, each of which is made up of 2 triangles. If you take these 6 squares and lay them side by side over a single texture it is possible to deduce the correct texture coordinates for each face.

You will eventually have many textures so it's important to make them as small as possible. This means leaving as little space between the squares as possible. DirectX also prefers textures to be as square as possible so the layout in figure 2 is optimal. This bitmap is what is normally called a texture map.

Firgure 2. A texture map template for a box

The larger typeface signifies which of the box faces applies to which part of the texture map. The smaller typeface is to give you an idea of the orientation of the texture and indicates which face touches that edge. The highlighted face is the example I will use to generate texture coordinates.

I have added a new overload to SetBoxTexture(). This one takes the mesh and a parameter called technique. Right now there is just one technique called Divide which means that the texture will be divided evenly between the 6 faces. Most of the function is similar to the other overloads. This version hard codes the texture coordinates for each face. There really is no easy mathematical way to do this. Remember texture coordinates go from 0.0 to 1.0 so the face texture coordinates had to be 0, 1/3, 2/3, 1.0 in the x direction and 0, 0.5, 1.0 in the y direction. I guessed which face was which and rendered the box. Once I saw where I was wrong I simply switched the indexes of the vertices around until the faces were in the correct place and had the correct orientation. This process took about 15 minutes to complete. Last time I mentioned how texture mapping was hard to do by hand. Imagine doing this for a more complex shape.

To set up the texture coordinates I simply assign the correct values to each vertex. There is a block of code similar to this for each face of the box. You should be able to match the vertex indices to those in figure 2 and confirm that the texture coordinates are correct.

//Front
verts[20].Tu = 1f / 3f; verts[20].Tv = 1f;
verts[21].Tu = 1f / 3f; verts[21].Tv = 0.5f;
verts[22].Tu = 2f / 3f; verts[22].Tv = 0.5f;
verts[23].Tu = 2f / 3f; verts[23].Tv = 1f;

Visual Basic

'Front
verts(21).Tu = 1.0F / 3.0F
verts(21).Tv = 0.5F
verts(22).Tu = 2.0F / 3.0F
verts(22).Tv = 0.5F
verts(23).Tu = 2.0F / 3.0F
verts(23).Tv = 1.0F
verts(20).Tu = 1.0F / 3.0F
verts(20).Tv = 1.0F

To complete the render (see figure 3) a new mesh is created and its texture coordinates are set using the new function.

MyBox = TexturedMesh.Box(e.Device, 2.0f, 2.0f, 2.0f);
TexturedMesh.SetBoxTexture(MyBox, TextureTechnique.Divide);

Visual Basic

MyBox = TheZBuffer.DirectX.Direct3D.TexturedMesh.Box(e.Device, 2.0F, 2.0F, 2.0F)
TheZBuffer.DirectX.Direct3D.TexturedMesh.SetBoxTexture(MyBox, _
    TheZBuffer.DirectX.Direct3D.TextureTechnique.Divide)

There are a couple of extra lines of code to load the template.bmp texture and ensure it is set before the mesh is rendered.

Figure 3 - Textured box showing the texture template

To make use of the template provided, load it up into your favorite image editor and replace the labels with graphics of your choice. Like most developers, I am not a great graphic artist so I chose to make a dice as an example since it only involves drawing circles. The final solution can be found by downloading the zmanTex04.msi file using the link at the top of this article. In the media folder you will find dice.bmp. If you load that texture instead of template.bmp you should see something like figure 4.

Figure 4. Final render of the dice

Exercise for the Reader
You have seen what the texture map template for the box looks like. What do you think a texture map for a cylinder or a sphere would look like?

Future texturing questions coming soon:
How can I texture the cylinder, sphere, torus, and teapot?

Credits:
Thanks to
Chris Zastrow (czastrow@newlogicmedia.com) for the crate textures found at http://www.planetquake.com/subverse/
Carlos Aguilar (web@carlosag.net) for the code colorizer found at http://www.carlosag.net/Tools/CodeColorizer/Default.aspx

Ask the ZMan:Applying Textures, Part 1

Andy Dunn — Tue, 31 Oct 2006 14:50:00 GMT

	Part 1 of a three part series explaining the addition of textures to DirectX Primitive shapes.This column covers how texture coordinates are stored inside the mesh object, the relationship between the texture coordinates and the texture, and the most useful of the texture sampling states.
The Z-man Andy Dunn The Z Buffer Difficulty: Intermediate Time Required: 1-3 hours Cost: Free Software: Visual Studio Express Editions Hardware: Download: C# Download VB Download

Since Coding4Fun has only just launched, there aren't any specific questions to answer so I thought I would start with a question that occurs frequently on the Managed DirectX newsgroup:

"I've created my first Managed DirectX project and can successfully draw shapes created using the Mesh.{shape} primitives. However, when I try to apply a texture to them a) nothing happens b) the shapes go black or c) the shapes disappear. How can I add a texture to the DirectX primitive shapes?"

This is often a stumbling block for beginners in managed DirectX. The texture tutorial (tutorial 5) in the SDK creates a cylinder mesh in code rather than using Mesh.Cylinder and there are not many examples of how to add texture to an existing mesh, especially in managed code.

The first thing to point out is that, for the most part, manually adding textures is a futile thing to do. In the today's games there are very few boxes, cylinders, tori or teapots. All of the objects that are used in modern games are created by artists in modeling programs like Maya. Designers also create the textures and texture the models. By the time the programmer gets the artwork they have both a shape and a texture. As you will also see in future columns, the more complex the shape becomes the less likely you can add a texture programmatically. Of course, there is an exception to this rule: you can add programmatic textures, for example representing wood and marble with mathematical equations, but this requires you to dip into the world of pixel shaders.

However, it IS a worthwhile exercise to learn about the innards of the Mesh object, how textures connect to objects, and which settings you can apply to textures to to change the way they look.

To start, download textures0.zip using the link at the top of this article. You will need Beta2 of Visual C# Express and the April 2005 DirectX SDK. You can get Visual C# 2005 Express Edition Beta 2 by visiting http://msdn.microsoft.com/express. You can also use other Express Editions depending on the language of your choice, but our demonstration will utilize C#.

Figure 1. Rendering of a simple box in Managed DirectX

How Did You Create This Project?
This project began life as the EmptyProject from the Managed DirectX sample browser. I removed the effects framework code and some of the extraneous UI elements. Then I added Mesh and Material creation in OnCreateDevice() and disposal in OnDestroyDevice(), and light creation in OnResetDevice(). There's also a slight change to the camera eye point in OnCreateDevice() to give it a slightly more interesting point of view. In OnFrameMove(), I set the view and projection matrices from the camera class in the framework which allows you to use the right mouse button for moving the camera. Finally, I turned on the lights - including some ambient lighting - and draw the box in the correct place with the correct material in the OnFrameRender() function.

What's Inside a Mesh?
Put a break point on the Mesh.Box() call and run your code. Press F10 to execute that line of code and take a look at the MyBox variable using the watch window (Figure 2).

Figure 2. The watch window of a Mesh.Box() object

Interesting things to remember:

12 faces: In 3-D graphics programming, everything is made up of triangles. Each face of the box takes 2 triangles, there are 6 sides to the box, so there are 12 faces needed to draw the box.
24 vertices: Because each face needs to have its own normals, each of the 6 faces of the box has to have its own set of 4 vertices, totaling 24.
The VertexFormat is PositionNormal: Each vertex stores just the x,y,z position in space and the normal for that vertex.
VertexBuffer: The actual vertices are stored here. However, this buffer cannot be opened and browsed because the values are actually stored in an unmanaged part of DirectX.

Hit F10 one more time and look in the output or immediate window for the debug output. The DumpMesh function converts the unmanaged vertex buffer to a managed array and then writes the coordinates out to debug. You should see something like this:

Vertices
Vert 0: -1, -1, -1
Vert 1: -1, -1, 1
Vert 2: -1, 1, 1
...
Vert 23: 1, -1, -1

If you were to sketch those coordinates out, you would find that each set of 4 describes one of the faces of the box.

How Does a Mesh Know What Texture to Draw Where?
Imagine that Figure 3 shows one of the faces of the cube and the crate texture I want to place on it. Besides the obvious "fill the whole face with the texture," there are many ways that the texture can be placed, for example the texture can be:

Rotated by 10 degrees
Scaled by 1/4 so that there are 16 copies of the texture tiled on each face
Roated and scales in any combination with different angles and scales

Each vertex on each triangle has to be mapped to a particular pixel on the texture so the DirectX knows what color to draw. In Figure 3, I have chosen to map the vertices of the box face in such a way that it picks up a rotated area in the top left of the texture. The resultant face when rendered would look something like the final picture:

Figure 3. Mapping vertices to a texture

Textures are mapped through the use of texture coordinates, which are also known as u,v coordinates. Each vertex in the triangle has a u,v coordinate which corresponds to a point on the texture. As you can see from Figure 3, texture coordinates floating point values that always range from 0.0 to 1.0. In this example the u,v coordinates for the top left vertex of the face are probably (0.0, 0.9) and the lower right vertex is (0.4, 0.7).

Adding Texture Coordinates to the Box
You will remember that the VertexFormat of the box was PostitionNormal. There are no texture coordinates in there. Before I can add them, I need to modify the Mesh so there is space for the u,v coordinates. This is done through the use of the Mesh.Clone function.

Add declarations for the TexturedBox and the Texture:

Visual C#

private Mesh TexturedBox;  
private Texture texture = null;

Visual Basic

Private TexturedBox As Mesh
Private texture As Direct3D.Texture = Nothing

Create a function called TextureBox(). This function takes the untextured mesh and adds the texture, so add a call to that after the DumpInfo() call:

Visual C#

MyBox = Mesh.Box(e.Device, 2.0f, 2.0f, 2.0f);
DumpInfo(MyBox);
TexturedBox = TextureBox(MyBox);

Visual Basic

MyBox = Mesh.Box(e.Device, 2.0F, 2.0F, 2.0F)
DumpInfo(MyBox)
TexturedBox = TextureBox(MyBox)

Make sure to tidy it up in OnDestroyDevice():

Visual C#

TexturedBox.Dispose();

Visual Basic

TexturedBox.Dispose()

Add code to render it after MyBox.DrawSubset() in OnFrameRender(). I will draw this cube off to the right of the first one so that you can compare them:

Visual C#

MyBox.DrawSubset(0);
device.Transform.World = Matrix.Translation(1.2f, 0f, 0f);
TexturedBox.DrawSubset(0);

Visual Basic

MyBox.DrawSubset(0)
device.Transform.World = Matrix.Translation(-1.2F, 0.0F, 0.0F)
TexturedBox.DrawSubset(0)

Finally, add the TextureBox function somewhere in the textures class:

Visual C#

private Mesh TextureBox(Mesh box)
{
    //First make sure this is a box
    //There's no quick test, so we will count the vertices and faces
    Debug.Assert(box.NumberVertices == 24 && box.NumberFaces == 12, 
        "TextureBox called with a mesh which is not box like");
    //Take a copy of the Mesh, adding space for texture coordinates
    Mesh TexturedBox = box.Clone(box.Options.Value,
        VertexFormats.Position | VertexFormats.Normal | VertexFormats.Texture0 |
        VertexFormats.Texture1, box.Device);
    return TexturedBox;
}

Visual Basic

Private Function TextureBox(ByVal box As Mesh) As Mesh
    'First make sure this is a box
    'There's no quick test, so we will count the vertices and faces
    Debug.Assert(box.NumberVertices = 24 AndAlso box.NumberFaces = 12, _
        "TextureBox called with a mesh which is not box like")

    'Take a copy of the Mesh, adding space for texture coordinates
    Dim TexturedBox As Mesh = box.Clone(box.Options.Value, _
        VertexFormats.Position Or VertexFormats.Normal Or _
        VertexFormats.Texture0 Or VertexFormats.Texture1, _
        box.Device)

    Return SetTextureCoordinates(TexturedBox)
End Function

After some sanity checking of the input mesh, this function clones the mesh that is passed in but tells DirectX to change the vertex format from PositionNormal to PositionNormalTextured. Notice the logical ORing together of the flags that make up the various possible parts of a vertex. See MSDN VertexFormats and MSDN CustomVertex for the full lists.

If you run the program now you will see 2 identical cubes (Figure 4). I have added space for the texture coordinates but I haven't set them to reasonable values or loaded a texture.

Figure 4. Identical cubes without textures

Load the texture in OnResetDevice():

Visual C#

//Load the texture
texture = TextureLoader.FromFile(e.Device, 
    System.Windows.Forms.Application.StartupPath + 
    @"\..\..\media\woodcrate.bmp");

Visual Basic

'Load the texture
texture = TextureLoader.FromFile(e.Device, _
    System.Windows.Forms.Application.StartupPath _
    & "\..\..\media\woodcrate.bmp")

Tidy up in OnLostDevice():

Visual C#

if (texture !=null) texture.Dispose();

Visual Basic

If (Me.texture IsNot Nothing) Then
    Me.texture.Dispose()
End If

Change the rendering code to set the correct texture for each box. Notice how I use null in the SetTexture() call to say "do not use a texture" for the first box. Try commenting out that line later to see the effect:

Visual C#

//Render our scene
device.SetTexture(0, null);
device.Transform.World = Matrix.Translation(-1.2f, 0f, 0f);
MyBox.DrawSubset(0);
device.SetTexture(0, texture);
device.Transform.World = Matrix.Translation(1.2f, 0f, 0f);
TexturedBox.DrawSubset(0);

Visual Basic

With device
    .SetTexture(0, Nothing)
    .Transform.World = Matrix.Translation(-1.2F, 0.0F, 0.0F)
    MyBox.DrawSubset(0)
    .SetTexture(0, texture)
    .Transform.World = Matrix.Translation(1.2F, 0.0F, 0.0F)
    TexturedBox.DrawSubset(0)
 End With

Finally, add the updated TextureBox function and its helper SetTextureCoordinates. This function locks the vertex buffer so that it can safely make changes and then adds identical texture coordinates to each of the 6 box faces. The texture coordinates I have chosen are the simple "cover the whole face" ones, which are (0,0) (1,0) (1,1) and (0,1) representing the 4 corners of the texture. Notice that the u,v coordinates are properties called tu and tv in DirectX:

Visual C#

private Mesh TextureBox(Mesh box)
{
    //First make sure this is a box
    //There's no quick test, so we will count the vertices and faces
    Debug.Assert(box.NumberVertices == 24 && box.NumberFaces == 12, 
        "TextureBox called with a mesh which is not box like");
    //Take a copy of the Mesh, adding space for texture coordinates
    Mesh TexturedBox = box.Clone(box.Options.Value,
        VertexFormats.Position | VertexFormats.Normal | VertexFormats.Texture0 |
        VertexFormats.Texture1,box.Device);
    return SetTextureCoordinates(TexturedBox);
}

private Mesh SetTextureCoordinates(Mesh TexturedBox)
{
    //The following code makes the assumption that the vertices of the box are
    // generated the same way as they are in the April 2005 SDK
    using (VertexBuffer vb = TexturedBox.VertexBuffer)
    {
        CustomVertex.PositionNormalTextured[] verts = 
            (CustomVertex.PositionNormalTextured[])vb.Lock(0,
             typeof(CustomVertex.PositionNormalTextured), LockFlags.None, 
            TexturedBox.NumberVertices);
        try
        {
            for (int i = 0; i < verts.Length; i += 4)
            {
               verts[i + 0].Tu = 0.0f;
               verts[i + 0].Tv = 0.0f;
               verts[i + 1].Tu = 1.0f;
               verts[i + 1].Tv = 0.0f;
               verts[i + 2].Tu = 1.0f;
               verts[i + 2].Tv = 1.0f;
               verts[i + 3].Tu = 0.0f;
               verts[i + 3].Tv = 1.0f;
            }
        }
        finally
        {
            vb.Unlock();
        }
    }
    return TexturedBox;
}

Visual Basic

Private Function TextureBox(ByVal box As Mesh) As Mesh
    'First make sure this is a box
    'There's no quick test, so we will count the vertices and faces
    Debug.Assert(box.NumberVertices = 24 AndAlso box.NumberFaces = 12, _
        "TextureBox called with a mesh which is not box like")

    'Take a copy of the Mesh, adding space for texture coordinates
    Dim TexturedBox As Mesh = box.Clone(box.Options.Value, _
        VertexFormats.Position Or VertexFormats.Normal Or _
        VertexFormats.Texture0 Or VertexFormats.Texture1, _
        box.Device)

    Return SetTextureCoordinates(TexturedBox)
End Function

Private Function SetTextureCoordinates(ByVal TexturedBox As Mesh) As Mesh
    'The following code makes the assumption that the vertices of the box
    ' are generated the same way as they are in the April 2005 SDK
    Using vb As VertexBuffer = TexturedBox.VertexBuffer
        Dim verts As CustomVertex.PositionNormalTextured() = _
            DirectCast(vb.Lock(0, GetType(CustomVertex.PositionNormalTextured), _
            LockFlags.None, TexturedBox.NumberVertices), _
            CustomVertex.PositionNormalTextured())

        Try
            Dim i As Integer = 0
            Do While (i < verts.Length)
                verts(i).Tu = 0.0!
                verts(i).Tv = 0.0!
                verts((i + 1)).Tu = Me.NumXTiles
                verts((i + 1)).Tv = 0.0!
                verts((i + 2)).Tu = Me.NumXTiles
                verts((i + 2)).Tv = Me.NumYTiles
                verts((i + 3)).Tu = 0.0!
                verts((i + 3)).Tv = Me.NumYTiles
                i = (i + 4)
            Loop
        Finally
            vb.Unlock()
        End Try
    End Using
    Return TexturedBox
End Function

Now if you run the code you will see a crate, not a box (Figure 5).

Figure 5. Identical cubes, one with a crate texture applied.

The final version of the code is included in textures1.zip in the download above. The final version has some enhancements. I've added a couple of slider controls that vary the 1.0f in the texture coordinates. As you slide them you will see the textures tile. This is the default behavior for DirectX when texture coordinates are >1.0; its called wrapping. However, you can change that behavior by changing the sampler states before you render the mesh. I've added a radio button to switch between wrapping and clamping. Clamping means use the texture as far as you can but after that just repeat the last row of pixels. As you can see, it causes some strange effects.

Exercise for the Reader
Modify the solution to add a rotation factor into the texture coordinates.

Future texturing questions coming soon:
How can I put different textures on each side?
How can I texture the cylinder, sphere, torus, and teapot?

Ask the ZMan: Applying Textures, Part 3

Andy Dunn — Tue, 31 Oct 2006 14:50:00 GMT

Part 3 of a three part series explaining the addition of textures to DirectX Primitive shapes.

Since Coding4Fun has only just launched, there aren't any specific questions to answer so I thought I would start with a question that occurs frequently on the Managed DirectX newsgroup:

C# Download

VB Download

"I've created my first Managed DirectX project and can successfully draw shapes created using the Mesh.{shape} primitives. However, when I try to apply a texture to them, nothing happens (b) the shapes go black or (c) the shapes disappear. How can I add a texture to the DirectX primitive shapes?"

Homework

Last time I covered how to manually assign points on a texture map to a box. If you spent any time thinking about the homework you will have realised that as the meshes get more complex, the texture map that goes with them and the set of texture coordinates gets too complex to do by hand very quickly. I left you with the following question:

You have seen what the texture map template for the box looks like. What do you think a texture map for a cylinder or a sphere would look like?

Download textures5.msi using the link at the top of this article. This solution allows you to display any of the Mesh.{shape} primitives and to render them in wireframe so that you can see the underlying mesh. Imagine unfolding those shapes until all the triangles lie flat. Figure 1 shows the cylinder and a texture map that would work for this mesh.

Figure 1. The wireframe cylinder and one possible texture map that could be associated with it

Not only do you have to work out a suitable texture map, you have to work out all of the corresponding texture coordinates. The cylinder isn't too bad—the sides are represented by the rectangle in Figure 1 and the texture coordinates would be evenly distributed across it. The top and bottom are represented by the two circles and those coordinates can be calculated with some simple sine and cosine formula. You would still have to work out which vertex was which in the mesh structure, e.g., is vertex[49] one of the sides or the top?

Hopefully, you now agree with my assertion from the first article in the series that texturing is best left to the artists in most cases. At the very least you should not do it manually for anything other than the simplest meshes. There are, however, some automated ways of assigning textures.

Automatic Texture mapping

Imagine a globe of the earth. Now take an imaginary pocket knife and cut a line straight down the International Date line and peel the skin off the globe. What you have is a texture that represents the surface of the earth. The first problem is that it's not flat. Imagine that the skin is made of rubber so you can stretch it until it's flat. You have to do most of the stretching at the north and south poles to make it as wide as the equator but when you are done you will have a flat texture that looks something like Figure 2.

Figure 2. An example texture map for the earth.

The problem to solve is how to map this texture back onto the sphere. It's obviously possible, since it came from there in the first place. The solution is called spherical texture mapping.

Take a look at Figure 3 (click it for a large version). The red vector is what I will call the vertex ray. It represents a point on the surface of the sphere that needs texture coordinates and is a vector starting at the center of the object and passing through the point of interest. The point can be described by a longitude (the light blue curve) and latitude (the light green curve). The longitude and latitude equations are based on the angles between the vertex ray and the north vector and the equator vector, respectively (the 2 black vectors). After these are calculated they are scaled in the range 0.0 to 1.0 to give the corresponding point on the texture map.

Figure 3. The mapping between longitude and latitude and the uv texture space

The longitude and latitude functions are described in Paul Rademacher's Ray Tracing article and the code looks like the following:

//Ref:http://www.cs.unc.edu/~rademach/xroads-RT/RTarticle.html and
//Glassner, A. (ed) An Introduction to Ray Tracing. Academic Press New York, N.Y. 1989. 
phi = Math.Acos((double)Vector3.Dot(north, vertexRay));
verts[i].Tv = (float)(phi / Math.PI);
if (phi == 0.0) //if north and vertex ray are coincident then we can pick an 
                //arbitrary u since its the entire top/bottom line of the texture
{
    u = 0.5f;
}
else
{
    //Clamp the acos() param to 1.0/-1.0 
    //(rounding errors are sometimes taking it slightly over).
    u = (float)(Math.Acos(Math.Max(Math.Min((double)Vector3.Dot(equator, vertexRay)
        / Math.Sin(phi), 1.0), -1.0)) / (2.0 * Math.PI));
    if (Vector3.Dot(northEquatorCross, vertexRay) < 0.0)
    {
        verts[i].Tu = u;
    }
    else
    {
        verts[i].Tu = 1 - u;
    }
}

Visual Basic

'Ref:http://www.cs.unc.edu/~rademach/xroads-RT/RTarticle.html and
'Glassner, A. (ed) An Introduction to Ray Tracing. Academic Press New York, N.Y. 1989. 
phi = Math.Acos(CType(Vector3.Dot(north, vertexRay), Double))
verts(i).Tv = CType((phi / Math.PI), single)
If phi = 0.0 Then
    u = 0.5f
Else 
    'Clamp the acos() param to 1.0/-1.0 
    '(rounding errors are sometimes taking it slightly over).
    u = (single)(Math.Acos(Math.Max(Math.Min((Double)Vector3.Dot(equator, vertexRay)
        / Math.Sin(phi), 1.0), -1.0)) / (2.0 * Math.PI))
    If Vector3.Dot(northEquatorCross,vertexRay) < 0.0 Then
        verts(i).Tu = u
    Else 
        verts(i).Tu = 1 - u
    End If
End If

Though this looks complex, it can be simplified in this case because the north vector is (0, 1, 0) and the equator vector is (1, 0, 0). Since (a, b, c) dot (d, e, f) is ad+be+cf, most of the dot products can be simplified to one component of the vertex, and the cross product is a constant (0, 0, 1). The final code is therefore:

//Since we know we are using normalised axes we can simplify this somewhat!
//Note these simplifcations only apply if the basis vectors are the unit axis
//north=(0,0,1)=zaxis, equator=(0,1,0)=yaxis and north x equator=(1,0,0)=xaxis
//since (0,0,1)dot(x,y,z)==z and (0,1,0)dot(x,y,z)==y

//if north and vertex ray are coincident then we can pick an arbitray u, since
//it's the entire top/bottom line of the texture
phi = Math.Acos((double)vertexRay.Z);
verts[i].Tv = (float )(phi / Math.PI);

if (vertexRay.Z ==  1.0f || vertexRay.Z  == -1 .0f)
{
    verts[i].Tu = 0.5f;
}
else
{
    u = ( float)(Math.Acos(Math.Max(Math.Min(( double)vertexRay.Y / 
    Math.Sin(phi),  1.0 ), -1. 0)) / (2 .0 * Math.PI)) ;
    //Since the cross product is just giving us (1,0,0) i.e. the xaxis 
    //and the dot product was giving us a +ve or -ve angle, we can just
    //compare the x value with 0
    verts[i].Tu = (vertexRay.X > 0f) ? u :  1 - u;
}

Visual Basic

'Since we know we are using normalised axis we can simplify this somewhat!
'Note these simplifcations only apply if the basis vectors are the unit axis
'north=(0,0,1)=zaxis, equator=(0,1,0)=yaxis and north x equator=(1,0,0)=xaxis
'since (0,0,1)dot(x,y,z)==z and (0,1,0)dot(x,y,z)==y

'if north and vertex ray are coincident then we can pick an arbitray u since 
'its the entire top/bottom line of the texture
phi = Math.Acos(CDbl(vertexRay.Z))
verts(i).Tv = CSng(phi / Math.PI)
If vertexRay.Z = 1.0F OrElse vertexRay.Z = -1.0F Then
    verts(i).Tu = 0.5F
Else
    u = CSng((Math.Acos(Math.Max(Math.Min(CDbl(vertexRay.Y) / _
        Math.Sin(phi), 1), -1)) / (2 * Math.PI)))
    'Since the cross product is just giving us (1,0,0) i.e. the xaxis and the dot product
    ' was giving us a +ve or -ve angle, we can just compare the x value with 0
    verts(i).Tu = IIf((vertexRay.X > 0.0F), u, 1 - u)
End If

Download textures6.msi using the link at the top of this article for the complete application.

For an interesting aside into debugging this algorithm and why the Min and Max functions are necessary, see my blog entry on the subject.

So that has put the imaginary globe back together, as you can see from Figure 4, but how can the same theory be applied to arbitrary meshes?

Figure 4. The texture mapped sphere

It turns out that the spherical texture mapping can be applied to any shape. Once the center is found, a ray can be projected through each vertex, just as was done with the sphere, and the texture map sampled in the same way. (There are lots of ways of visualizing what is happening here. If my explanation doesn't do it for you, then try reading some of the references below, as everyone's mind works differently.)

I like to imagine a surrounding sphere around the mesh. When the ray is projected from the center through the mesh vertex, it can be extended out to touch the surrounding sphere giving you the texture coordinates for that point.

The sample code allows you to switch between all of the DirectX primitives and see how a spherical mesh is applied to each of them. In addition, I have added the ability to show the vertex rays and the surrounding texture mapped sphere to help get your head around how it all works.

Figure 5. A texture mapped cylinder using spherical mapping

Homework for this time: Explain the odd texturing you see in the middle of the Pacific Ocean. It's easiest to see on the sphere and cylinder. I will revisit this and fix it in a future article when I cover mesh structures.

This concludes the series on texture mapping, until I get some other questions on the subject.

Credits:

Thanks to

Carlos Aguilar for the code colorizer
Paul Rademacher for his Ray Tracing article with the Spherical texture mapping formula
Robert Dunlop for his spherical texture mapping article
Peter Donnelly for an old article about Texture Wrapping
Fridger Schrempp for the earth texture from the Celestia MotherLode

(Editor's note: These examples, like the two previous articles in the series, were built using the August 2005 DirectX 9.0 SDK update.)