Be Recursive

Having just begun programming for XNA I thought I’d begin to share what I’ve been learning. One thing I definitely aim to do which I find lacking in many tutorials is explain the logic behind what I’m doing so it can be easily ported into other languages (such as Flash). For this tutorial I’m going to cover quite an easy feature, which is locking the placement of a sprite to a ’tile-based’ system. This is essentially the mechanism found in most tower defense games for tower placement.

I’m going to save myself some time and make the assumption that you know the basics of rendering Sprites in XNA. If you don’t check out the Creator’s Club or Ziggyware.com for some other great tutorials.

Anyways, to begin let’s have a think about exactly what we are trying to achieve. We are trying to take a fixed sized sprite, likely a square, but always at least a quadrilateral and lock it to a sort of grid that is equal in size to the sprite itself.

So the first thing to do would be to attach my sprite to my mouse, probably at the center of the sprite to make it look nicer. The way to do this is amazingly simple. Firstly we make the mouse visible:

        protected override void Initialize()
        {
            this.IsMouseVisible = true;
            base.Initialize();
        }

Next we just need to attach out sprite to the center of the mouse which is done by setting the origin in the spriteBatch.Draw() to half of the texture’s width and height:

//Variables i'm using
        SpriteBatch spriteBatch;
        Texture2D square;
        Vector2 squarePosition;
 
//draw command
        protected override void Draw(GameTime gameTime)
        {
            graphics.GraphicsDevice.Clear(Color.CornflowerBlue);
 
            spriteBatch.Begin();
 
            spriteBatch.Draw(square, squarePosition, null, Color.White, 0, new Vector2(square.Width / 2, square.Height / 2),1, SpriteEffects.None, 0);
 
            spriteBatch.End();
 
            base.Draw(gameTime);
        }
//Using the overloaded version of spriteBatch.Draw() which allows the specification of a position Vector

Now the square sprite (that’s what I used) is attached going to draw with it’s origin, or center, at the texture’s center.

The next part is the real logic behind this section. We want to snap the sprite to a ‘grid’ on the screen. We can do this by pretending that the screen is made of a grid the size of the sprite where each square of the grid will have a 2D coordinate.

In order to do this we should specify the current tile (X and Y) the mouse is ‘in’ and the height of said tile.

//specifying variables
 
        int TileX;
        int TileY;
        int tileWidth = 40;
        int tileHeight = 40;

Then to achieve the lock we can grab the current coordinates of the mouse on the screen, divide it by the tile width and height and then round it down to give us the current integer coordinate.

            MouseState mouse = Mouse.GetState();
 
            TileX = (int)Math.Floor((float)(mouse.X / tileWidth));
            TileY = (int)Math.Floor((float)(mouse.Y / tileHeight));

A small note, Math.Floor() is a built in function which rounds down a float or double to the nearest integer. The (int) and (float) are used just to remind the function what type they are!

The final step is to snap the sprite to the tile coordinates:

            squarePosition.X = (TileX * tileWidth)+(tileWidth/2);
            squarePosition.Y = (TileY * tileHeight)+(tileHeight/2);

We use the tileWidth/2 to just to make sure it snaps it to the center of the grid.

Let’s just review our logical steps:

1. Attach the center of the sprite to the mouse
2. Calculate the current ‘grid’ coordinate of the mouse
3. Multiply the coordinate by the defined grid height and width to give a snapping effect

Hope this helped, feel free to leave any comments or questions!

Here is the source.

Please note that the source is compiled for windows, and is also compiled for XNA 4.0! You will need Visual Studio 2010

Filed under:
C#, Game Logic, XNA by Patrick