Josh-CO Dev

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

Basic Tile Engine Tutorial – Creating our player class base


Update As with the other tutorials. I have whipped up a new solution for everything that we have covered so far and placed it here. Please feel free to download and have a working demo. I have also cleaned up the code a bit from the tutorial. Going forward, I will try to invest the time needed to clean up the code as I write the tutorials.

This is the third tutorial in our tile engine series. This tutorial will cover starting our player class to make our game playable! Please be sure that you have followed the previous tutorial located here first. This is probably the one component that if I had to do everything over again, I would have done it different. Revisiting this, I likely would have implemented a physics engine such as farseer.

-Start by adding a new class to your project and name it animatedSprite.
-As usual, add all the xna namespaces

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;

-Now let’s add some properties

        public float Interval
            get { return interval; }
            set { interval = value; }
        float interval = 200f;   

        public float Timer
            get { return timer; }
            set { timer = value; }
        float timer = 0f;

        public int SpriteWidth
            get { return spriteWidth; }
            set { spriteWidth = value; }
        int spriteWidth = 32;

        public int SpriteHeight
            get { return spriteHeight; }
            set { spriteHeight = value; }
        int spriteHeight = 32;

        public int CurrentFrame
            get { return currentFrame; }
            set { currentFrame = value; }
        int currentFrame = 0;

        public int YFrame
            get { return yFrame; }
            set { yFrame = value; }
        int yFrame = 0;

        public Vector2 Position
            get { return position; }
            set { position = value; }
        Vector2 position;

        public Vector2 Origin
            get { return origin; }
            set { origin = value; }
        Vector2 origin;

        public Texture2D Texture
            get { return spriteTexture; }
            set { spriteTexture = value; }
        Texture2D spriteTexture;

        public Rectangle SourceRect
            get { return sourceRect; }
            set { sourceRect = value; }
        Rectangle sourceRect;

-Okay. Things get a bit more complicated on this one, and hopefully I’ll remember everything correctly. A lot of this is trial and error. Timer and interval are related and basically determine how long each frame of your animation should play. The current frame will stay selected until timer reaches interval. Then the animation will reset the timer and move to the next frame. SpriteWidth and SpriteHeight are the dimensions of the sprite we are animating, we hardcode these to 32. CurrentFrame is the frame currently being displayed in the animation. YFrame contains the y position of the current frame in the tile sheet (row 0, row 1, etc). Position is the position of the sprite relative to the screen. Origin is the drawing point, generally in the middle of the image (16,16 in our case). Texture is the actual sprite sheet that we will use. Finally, sourcerect is the imaginary rectangle that is being used to select the image in our sprite sheet.

If you have never done animations from a sprite sheet before, some of this may be a little confusing. My opinion is to just plow through and follow the code. You should be able to make it work and then it will all make sense.

-Add this code next

        public Rectangle BoundingBox
            //compensate for our origin point of the center-bottom
            get { return new Rectangle((int)Position.X - spriteWidth/2, (int)((int)Position.Y -spriteHeight) +1, this.spriteWidth, this.spriteHeight); }

-This code defines our bounding box used for collision detection. My origin point is at the center bottom of the image. So our x coordinate is the x position – half the width of our sprite. This will put us at the left edge. To get to the top left, we need to subtract the sprite height and then make the square the size of the sprite. In my case, I am adding 1 to the sprite height as this seemed to fix an issue with my gravity system. I can’t explain it, but this worked. You will see where this comes into play when we add our player class.

-Create our constructors

        public AnimatedSprite()
            //base constructor

        public AnimatedSprite(Texture2D texture, int currentFrame, int spriteWidth, int spriteHeight, Vector2 startingPosition)
            this.spriteTexture = texture;
            this.currentFrame = currentFrame;
            this.spriteWidth = spriteWidth;
            this.spriteHeight = spriteHeight;
            this.Position = startingPosition;
            //groundLevel = position.Y;

-The first is our blank default constructor and then we have an overrideen constructor that sets all of our important parameters for us.

-Finally, draw our sprite

public virtual void Draw(SpriteBatch sb)
            sb.Draw(this.Texture, this.Position, this.SourceRect, Color.White, 0f, this.Origin, 1.0f, SpriteEffects.None, 0);

-This draw method is a bit more complicated than the draw methods we are using so far. This.texture is going to be an entire spritesheet that is saved as the texture. You might have 100+ different images on here. This.position is where the image will be draw relative to the origin point. This.sourceRect is the invisible rectangle that is being used to select which image from the sprite sheet to draw. This is how the spritebatch knows how to draw only one of the however many images in your spritesheet. Everything else is just default parameters except for this.Origin. Since we have our own origin point for our classes we are using the saved origin point rather than a new vector2(0,0).
That’s it for this tutorial! Our player class needs to be animated so in the next tutorial we’ll inherit our player class from our animated sprite class and get our game working!


2 thoughts on “Basic Tile Engine Tutorial – Creating our player class base

  1. I really liked the green background you had on the site this morning better.

  2. Terrific article.

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s