Josh-CO Dev

Solving the worlds problems one line of code at a time.

Basic Tile Engine Tutorial – Creating our tile class

Leave a comment

Since I originally wrote this article, I have rolled up a new XNA solution that contains only a simple screen management solution and this class. You can find it here.

This tutorial series will follow all of the major steps needed to make a platform type of tile engine. I apologize that I am rusty on my XNA, all of this code is being pulled from projects that I have not worked on in several months. In many places, the code can be improved, which we will do a little bit of in future tutorials (we will convert this engine into more of an RPG type of tile engine). We will not go through all of the exact steps required to build the project, but will cover the major pieces. When finished, you should be able to write a game similar to the image below. I apologize if some of my explanations are not clear as I am not currently coding in XNA, but I will try to explain the code the best that I can.

-The first thing we need to do is create a new class. If you have never added a new class in visual studio before, right click on your project name or a specific folder and choose “add” and then “class.” Name this class TileSprite.cs.

-Include the usual stuff in your namespace section.

using System;
using System.Collections.Generic;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Content;
using System.Xml;
using System.IO;

-Add the following properties:

//can you land on the tile
public bool Landable
get { return landable; }
set { landable = value; }
bool landable;</code>

//width of the tile
public int SpriteWidth
get { return spriteWidth; }
set { spriteWidth = value; }
int spriteWidth = 32;

//height of the tile
public int SpriteHeight
get { return spriteHeight; }
set { spriteHeight = value; }
int spriteHeight = 32;

//x,y coords of the tile
public Vector2 Position
get { return position; }
set { position = value; }
Vector2 position;

//texture of the tile
public Texture2D Texture
get { return spriteTexture; }
set { spriteTexture = value; }
Texture2D spriteTexture;

//the tiles bounding box
public Rectangle BoundingBox
get { return new Rectangle((int)Position.X, (int)Position.Y, spriteTexture.Width, spriteTexture.Height); }

-I believe in a later project I converted all of these into automatic properties. All of these properties will hold the variables which are common to all of your tiles. These are items such as the x,y coordinates, the size of the tile, etc. In this case, the tile engine is for a platformer so the landable property determines if you land or fall through the tile. SpriteWidth and SpriteHeight are the dimensions of the tile, our engine is defaulted to 32×32 tiles. Position is the x,y coords of the tile. Texture is the sprite. Finally, bounding box is a box drawn around the tile for collision detection.

-Now let’s add our constructors. The first constructor is a default constructor that will later let you declare a new tile without declaring all of the properties.  The second constructor allows you to pass in all of your initial values for your tile and set them on creation. This is the constructor that we will use almost every time.

public TileSprite()
//empty constructor

public TileSprite(Texture2D texture, int spriteWidth, int spriteHeight, Vector2 startingPosition, bool isLandable)
this.spriteTexture = texture;
this.spriteWidth = spriteWidth;
this.spriteHeight = spriteHeight;
this.Position = startingPosition;
this.landable = isLandable;

Our final method is our draw method. This method will be called later to draw the tile to the screen. We are passing in a spritebach and simply call the draw method of the spritebatch and pass in our properties that we declared above. Again, for this platformer, we are keeping things really simple. Later on we will expand on this class and make it more robust. This was from my first major development and is by no means perfect, but it got the job done and with ease.

public void Draw(SpriteBatch sb)
sb.Draw(this.Texture, this.Position, Color.White);


If you have any questions, feel free to drop me a comment. There will be more to come!


Leave a Reply

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

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

Google+ photo

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

Twitter picture

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

Facebook photo

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


Connecting to %s