[BigBlueCloud]

Hey everyone. New to the forum here.

Going over a few background details; I've been coding for a few months, I use the XNA 4.0 extension for C# Visual studio.
Now that you know all of that, here's my question;

How would I draw, say, the second line of sprites in a sprite sheet. Right now I'm just mucking around with a two line sprite sheet, one stance animation, one walking animation. I've managed to get the stance animation drawn and play through but I can't figure out how to get the walking animation drawn instead of the stance.

Here's my code;

namespace Zaru_Animated
{
    class Zaru
    {
        public int NumOfFramesX;
        public int NumOfFramesY;
        public int StanceFrames;
        public int WalkFrames;
        public int Timer;
        public int CurrentFrame;
        public Vector2 ZaruPos = new Vector2 (0, 655);
        public static Texture2D ZaruTexture;
        public static Viewport GraphicsViewport;
        
        public Zaru(Texture2D newTexture, Vector2 ZaruPos)
        {
            Timer = 0;
            NumOfFramesX = 6;
            NumOfFramesY = 2;
            StanceFrames = 4;
            WalkFrames = 6;
            CurrentFrame = 0;
            ZaruPos = new Vector2 (0, 0);
            ZaruTexture = newTexture;
        }

        public void Update()
        {
            Timer++;

            if (Timer >= 60 / 3)
            {
                CurrentFrame = (CurrentFrame + 1) % StanceFrames;
                Timer = 0;
            }
        }

        public void Draw (SpriteBatch spriteBatch)
        {
            Rectangle SourceRectangle = new Rectangle((ZaruTexture.Width / NumOfFramesX) * CurrentFrame, 0, ZaruTexture.Width / NumOfFramesX, (ZaruTexture.Height/ NumOfFramesY));
                                                     
            spriteBatch.Draw(ZaruTexture, ZaruPos, SourceRectangle, Color.White);
        }
    }
}

Sorry for the big chuck of code, I wasn't quite sure what is relevant and what isn't.

Thanks in advance.
BigBlueCloud

[(Cryptic)]

BigBlueCloud, on 09 April 2011 - 05:51 PM, said:

Hey everyone. New to the forum here.

Going over a few background details; I've been coding for a few months, I use the XNA 4.0 extension for C# Visual studio.
Now that you know all of that, here's my question;

How would I draw, say, the second line of sprites in a sprite sheet. Right now I'm just mucking around with a two line sprite sheet, one stance animation, one walking animation. I've managed to get the stance animation drawn and play through but I can't figure out how to get the walking animation drawn instead of the stance.

Here's my code;

namespace Zaru_Animated
{
    class Zaru
    {
        public int NumOfFramesX;
        public int NumOfFramesY;
        public int StanceFrames;
        public int WalkFrames;
        public int Timer;
        public int CurrentFrame;
        public Vector2 ZaruPos = new Vector2 (0, 655);
        public static Texture2D ZaruTexture;
        public static Viewport GraphicsViewport;
        
        public Zaru(Texture2D newTexture, Vector2 ZaruPos)
        {
            Timer = 0;
            NumOfFramesX = 6;
            NumOfFramesY = 2;
            StanceFrames = 4;
            WalkFrames = 6;
            CurrentFrame = 0;
            ZaruPos = new Vector2 (0, 0);
            ZaruTexture = newTexture;
        }

        public void Update()
        {
            Timer++;

            if (Timer >= 60 / 3)
            {
                CurrentFrame = (CurrentFrame + 1) % StanceFrames;
                Timer = 0;
            }
        }

        public void Draw (SpriteBatch spriteBatch)
        {
            Rectangle SourceRectangle = new Rectangle((ZaruTexture.Width / NumOfFramesX) * CurrentFrame, 0, ZaruTexture.Width / NumOfFramesX, (ZaruTexture.Height/ NumOfFramesY));
                                                     
            spriteBatch.Draw(ZaruTexture, ZaruPos, SourceRectangle, Color.White);
        }
    }
}

Sorry for the big chuck of code, I wasn't quite sure what is relevant and what isn't.

Thanks in advance.
BigBlueCloud

Well I haven't touched XNA for atleast a year. But the issue your facing is/or should be (not really xna specific), but double check with intellisense:

 CurrentFrame = (CurrentFrame + 1) % StanceFrames;

Change to:

CurrentFrame = (CurrentFrame + 1) % WalkFrames;

and

Rectangle SourceRectangle = new Rectangle((ZaruTexture.Width / NumOfFramesX) * CurrentFrame, 0, ZaruTexture.Width / NumOfFramesX, 0);

I'm assuming that your walking sprite is above your stance sprite because NumOfFramesY = 2; and your stance sprite is referring to location (ZaruTexture.Height/ NumOfFramesY), which if the total hight is 100 / 2 = 50, that means that this is in-between two sprites. So your walking sprite is on y = 0.

[bonyjoe]

I assume that your walk animation is on the second row.

If so then you need to change the y variable of the source rectangle.

            Rectangle SourceRectangle = new Rectangle((ZaruTexture.Width / NumOfFramesX) * CurrentFrame, 0, ZaruTexture.Width / NumOfFramesX, (ZaruTexture.Height/ NumOfFramesY));

At the moment it is 0, you need it to be texture.height.

[(Cryptic)]

bonyjoe, on 10 April 2011 - 06:52 AM, said:

I assume that your walk animation is on the second row.

If so then you need to change the y variable of the source rectangle.

            Rectangle SourceRectangle = new Rectangle((ZaruTexture.Width / NumOfFramesX) * CurrentFrame, 0, ZaruTexture.Width / NumOfFramesX, (ZaruTexture.Height/ NumOfFramesY));

At the moment it is 0, you need it to be texture.height.

o.O

I thought...

(ZaruTexture.Height/ NumOfFramesY)

represents height of the texture? No? ZaruTexture.Height being the full height of the combined spritesheet.
Number of rows being NumOfFramesY. Therefore NumOfFramesY = 2, representing 2 rows. If we guess, that the entire spritesheed is of height 100 meaning that 100 pixels contains 2 rows, each row is 50 pixels.

Lets Assume.
ZaruTexture.Height = 100 pixels;
NumOfFramesY = 2;

The current Stance sprite height
= (ZaruTexture.Height/ NumOfFramesY)
= 100 / 2;
= 50.

Which means pixel 50 to 100 is the 'y' sprite location of the stance.
Which means pixels 0 to 49 is not currently used, which I would then assume that the source location for y is of 0.

[bonyjoe]

(Cryptic), on 10 April 2011 - 07:01 AM, said:

bonyjoe, on 10 April 2011 - 06:52 AM, said:

I assume that your walk animation is on the second row.

If so then you need to change the y variable of the source rectangle.

            Rectangle SourceRectangle = new Rectangle((ZaruTexture.Width / NumOfFramesX) * CurrentFrame, 0, ZaruTexture.Width / NumOfFramesX, (ZaruTexture.Height/ NumOfFramesY));

At the moment it is 0, you need it to be texture.height.

o.O

I thought...

(ZaruTexture.Height/ NumOfFramesY)

represents height of the texture? No? ZaruTexture.Height being the full height of the combined spritesheet.
Number of rows being NumOfFramesY. Therefore NumOfFramesY = 2, representing 2 rows. If we guess, that the entire spritesheed is of height 100 meaning that 100 pixels contains 2 rows, each row is 50 pixels.

Lets Assume.
ZaruTexture.Height = 100 pixels;
NumOfFramesY = 2;

The current Stance sprite height
= (ZaruTexture.Height/ NumOfFramesY)
= 100 / 2;
= 50.

Which means pixel 50 to 100 is the 'y' sprite location of the stance.
Which means pixels 0 to 49 is not currently used, which I would then assume that the source location for y is of 0.

That is correct, my mind glossed over that. But essentially yes he needs to change the y value or he will forever be reading from the top line of the texture sheet.

[BigBlueCloud]

Thanks for the quick replies. I'm not sure if I have a curious case or I'm an idiot, but changing what you told me to drew to the screen the stance frames. Except because it had the number of walk frames instead of the stance, it had two 'blank' frames after the stance animation before beginning again. As I understand it,

Rectangle SourceRectangle = new Rectangle((ZaruTexture.Width / NumOfFramesX) * CurrentFrame,
                                                        0, ZaruTexture.Width / NumOfFramesX, (ZaruTexture.Height / 2));

Just so the next paragraph makes sense, the dimensions of the sprite sheet are 248 x 134.

The '0' after the '(ZaruTexture.Width / NumOfFramesX) * CurrentFrame' setting is saying where to draw from on the sprite sheet on the x axis, in this case it's from the first pixel. Then the 'ZaruTexture.Height / 2' tells where to start drawing from on the y axis. When fiddling around, I found that by replacing the '.Height / 2' with any number drew all the pixels from 0 to the number I put in.

Also, the stance animation is the top line and the walking animation is the bottom.

Hope this clears things a bit. Thanks for your help so far.

[bonyjoe]

I think you may have gotten a little confused here.

The rectangle is like this (X,Y,WIDTH,HEIGHT)

So the first number is the starting x value of the rectangle and the second number is the starting y value of the rectangle so if this is 0 then your rectangle will always be touching the top of your spritesheet and will therefore never draw the second line unless you change it.

The third number is the width of your rectangle so this needs to be the width of a single frame in your animation, this number will be different depending on whether you are using the walk or the stance animation.

The fourth number is the height of your rectangle and will need to be the value of the height of a single frame of the animation, this will generally stay the same in a well designed spritesheet.

So you simply need to change the y component to be the same as your height component.

So

Rectangle SourceRectangle = 
                  new Rectangle((ZaruTexture.Width / NumOfFramesX) * CurrentFrame,
                  (ZaruTexture.Height / 2), ZaruTexture.Width / NumOfFramesX, 
                  (ZaruTexture.Height / 2));

That code should accomplish what you need.

[stayscrisp]

You could break this code off into a class that is responsible for animating sprites in this way. The class could keep track of the number of frames, width and height of the sprite character that owns it and the speed you wish to animate the sprite.

class AnimationController
{
   public:

      void DoAnimation();

      // get and set
      
   private:

      Sprite* m_pOwner;
      int m_currentNumFrames;
      int m_currentColumnNumber;
      int m_currentRowNumber;
      float m_frameWidth;
      float m_frameHeight;
};

Then you never have to worry about doing this again, you will have a reusable class for all your 2D games

This post has been edited by stayscrisp: 12 April 2011 - 09:27 AM

[BigBlueCloud]

bonyjoe, on 12 April 2011 - 07:04 AM, said:

I think you may have gotten a little confused here.

The rectangle is like this (X,Y,WIDTH,HEIGHT)

So the first number is the starting x value of the rectangle and the second number is the starting y value of the rectangle so if this is 0 then your rectangle will always be touching the top of your spritesheet and will therefore never draw the second line unless you change it.

The third number is the width of your rectangle so this needs to be the width of a single frame in your animation, this number will be different depending on whether you are using the walk or the stance animation.

The fourth number is the height of your rectangle and will need to be the value of the height of a single frame of the animation, this will generally stay the same in a well designed spritesheet.

So you simply need to change the y component to be the same as your height component.

So

Rectangle SourceRectangle = 
                  new Rectangle((ZaruTexture.Width / NumOfFramesX) * CurrentFrame,
                  (ZaruTexture.Height / 2), ZaruTexture.Width / NumOfFramesX, 
                  (ZaruTexture.Height / 2));

That code should accomplish what you need.

Ah hah. I understand now, just tried it out and it fixed the problem I was having. Thanks for clarifying the code for me, I should be all good now. Thanks again.

stayscrisp, on 12 April 2011 - 09:26 AM, said:

You could break this code off into a class that is responsible for animating sprites in this way. The class could keep track of the number of frames, width and height of the sprite character that owns it and the speed you wish to animate the sprite.

class AnimationController
{
   public:

      void DoAnimation();

      // get and set
      
   private:

      Sprite* m_pOwner;
      int m_currentNumFrames;
      int m_currentColumnNumber;
      int m_currentRowNumber;
      float m_frameWidth;
      float m_frameHeight;
};

Then you never have to worry about doing this again, you will have a reusable class for all your 2D games

OK, I think I get what you mean, just not how to use this code... (beginner problem on my part). If you could redirect me to an example of where this code is used, I'd be very grateful. Thanks for the new code anyway, I'll try out what I think you mean.