Difference between revisions of "Animation"

From TRCCompSci - AQA Computer Science
Jump to: navigation, search
Line 1: Line 1:
−
==Creating Animation Class==
+
This will show you how to animate a character. The idea is to use a texture which is actually a strip of frames, then knowing the width and height of each frame should allow you to only display the part of the texture which represents the current frame.
−
You need to create a new class, so from the main menu click File, and select New File. Name the class Animation.You will have the following code:
 
  
−
<syntaxhighlight lang=csharp>
+
==Changing the Player Class==
−
using System;
+
Firstly, change the name of the Texture2D to something more appropriate eg PlayerAnimation:
−
namespace TestGame
 
−
{
 
−
public class Animation
 
−
{
 
−
public Animation()
 
−
{
 
−
}
 
−
}
 
−
}
 
−
</syntaxhighlight>
 
−
 
 
−
You will need to add the following to the using section:
 
  
 
<syntaxhighlight lang=csharp>
 
<syntaxhighlight lang=csharp>
−
using Microsoft.Xna.Framework;
+
public Texture2D PlayerAnimation;
−
using Microsoft.Xna.Framework.Content;
 
−
using Microsoft.Xna.Framework.Graphics;
 
 
</syntaxhighlight>
 
</syntaxhighlight>
  
−
This will allow the class to access the MonoGame framework and SDK. You need to add the following variables inside the class. Try to add these straight after the { after the public class Animation line:
+
We now need to add the following variables to the player to control the frame:
  
 
<syntaxhighlight lang=csharp>
 
<syntaxhighlight lang=csharp>
−
// The image representing the collection of images used for animation
+
// Get the width of the player ship
−
Texture2D spriteStrip;
+
// The time since we last updated the frame
−
 
+
int elapsedTime;
−
// The time since we last updated the frame
 
−
int elapsedTime;
 
−
 
 
−
// The number of frames that the animation contains
 
−
int frameCount;
 
−
 
 
−
// The index of the current frame we are displaying
 
−
int currentFrame;
 
−
 
 
−
// The color of the frame we will be displaying
 
−
Color color;
 
  
−
// The area of the image strip we want to display
+
// The number of frames that the animation contains
−
Rectangle sourceRect = new Rectangle();
+
int frameCount;
  
−
// The area where we want to display the image strip in the game
+
// The index of the current frame we are displaying
−
Rectangle destinationRect = new Rectangle();
+
int currentFrame;
  
−
// Width of a given frame
+
// The color of the frame we will be displaying
−
public int FrameWidth;
+
Color color;
  
−
// Height of a given frame
+
// The area of the image strip we want to display
−
public int FrameHeight;
+
Rectangle sourceRect = new Rectangle();
  
−
// The state of the Animation
+
// The area where we want to display the image strip in the game
−
public bool Active;
+
Rectangle destinationRect = new Rectangle();
  
−
// Determines if the animation will keep playing or deactivate after one run
+
// Width of a given frame
−
public bool Looping;
+
public int FrameWidth;
  
−
// The position of the animation
+
// Height of a given frame
−
public Vector2 Position;
+
public int FrameHeight;
−
</syntaxhighlight>
 
  
−
Now add the following method into your class, this is the Initialize method for the animation:
 
  
 +
==Change the Initialize method==
 
<syntaxhighlight lang=csharp>
 
<syntaxhighlight lang=csharp>
−
public void Initialize(Texture2D texture, Vector2 position, int frameWidth, int frameHeight, int frameCount, Color color, bool looping)
+
public void Initialize(Texture2D animation, Vector2 position)
−
{
 
−
// Keep a local copy of the values passed in
 
−
this.color = color;
 
−
this.FrameWidth = frameWidth;
 
−
this.FrameHeight = frameHeight;
 
−
this.frameCount = frameCount;
 
  
−
Looping = looping;
+
{
−
Position = position;
+
PlayerAnimation = animation;
−
spriteStrip = texture;
 
  
−
// Set the time to zero
+
// Set the starting position of the player around the middle of the screen and to the back
−
elapsedTime = 0;
+
Position = position;
−
currentFrame = 0;
 
  
−
// Set the Animation to active by default
+
// Set the player to be active
−
Active = true;
+
Active = true;
−
}
 
−
</syntaxhighlight>
 
  
−
The update method involves using currentFrame to identify which frame to display, simple mathematics will allow us to work out which part of the sprite strip needs to be displayed. Every 100 milliseconds the currentFrame will be incremented. When the framecount equals the currentFrame the end of the strip has been reached. The code will then set the currentFrame to 0 to return to the first frame. The code will allow you to not loop an animation and if this is the case the code sets active to false:
+
// Set the player health
 +
Health = 100;
 +
 +
this.color = Color.White;
 +
this.FrameWidth = 115;
 +
this.FrameHeight = 69;
 +
this.frameCount = 8;
  
−
<syntaxhighlight lang=csharp>
+
// Set the time to zero
−
public void Update(GameTime gameTime)
+
elapsedTime = 0;
−
{
+
currentFrame = 0;
−
    // Do not update the game if we are not active
+
}
−
    if (Active == false) return;
 
−
 
 
−
    // Update the elapsed time
 
−
    elapsedTime += (int)gameTime.ElapsedGameTime.TotalMilliseconds;
 
−
 
 
−
    // If the elapsed time is larger than the frame time we need to switch frames
 
−
    if (elapsedTime > frameTime)
 
−
    {
 
−
        // Move to the next frame
 
−
        currentFrame++;
 
−
 
 
−
        // If the currentFrame is equal to frameCount reset currentFrame to zero
 
−
        if (currentFrame == frameCount)
 
−
        {
 
−
            currentFrame = 0;
 
−
            // If we are not looping deactivate the animation
 
−
            if (Looping == false)
 
−
                Active = false;
 
−
        }
 
−
 
 
−
        // Reset the elapsed time to zero
 
−
        elapsedTime = 0;
 
−
    }
 
−
 
 
−
    // Grab the correct frame in the image strip by multiplying the currentFrame index by the Frame width
 
−
    sourceRect = new Rectangle(currentFrame * FrameWidth, 0, FrameWidth, FrameHeight); 
 
−
 
 
−
    // Grab the correct frame in the image strip by multiplying the currentFrame index by the frame width
 
−
    destinationRect = new Rectangle(
 
−
        (int)Position.X – (int)(FrameWidth * scale) / 2,
 
−
        (int)Position.Y – (int)(FrameHeight * scale) / 2,
 
−
        (int)(FrameWidth * scale),
 
−
        (int)(FrameHeight * scale)
 
−
        );
 
−
}
 
−
</syntaxhighlight>
 
−
 
 
−
Finally add the following draw method:
 
  
 
<syntaxhighlight lang=csharp>
 
<syntaxhighlight lang=csharp>
−
public void Draw(SpriteBatch spriteBatch)
 
−
{
 
−
// Only draw the animation when we are active
 
−
if (Active)
 
−
{
 
−
spriteBatch.Draw(spriteStrip, destinationRect, sourceRect, color);
 
−
}
 
−
}
 
−
</syntaxhighlight>
 

Revision as of 15:02, 25 March 2017

This will show you how to animate a character. The idea is to use a texture which is actually a strip of frames, then knowing the width and height of each frame should allow you to only display the part of the texture which represents the current frame.

Changing the Player Class

Firstly, change the name of the Texture2D to something more appropriate eg PlayerAnimation: 

public Texture2D PlayerAnimation;

We now need to add the following variables to the player to control the frame:

<syntaxhighlight lang=csharp> // Get the width of the player ship // The time since we last updated the frame int elapsedTime;

// The number of frames that the animation contains int frameCount;

// The index of the current frame we are displaying int currentFrame;

// The color of the frame we will be displaying Color color;

// The area of the image strip we want to display Rectangle sourceRect = new Rectangle();

// The area where we want to display the image strip in the game Rectangle destinationRect = new Rectangle();

// Width of a given frame public int FrameWidth;

// Height of a given frame public int FrameHeight;


Change the Initialize method

<syntaxhighlight lang=csharp> public void Initialize(Texture2D animation, Vector2 position)

{ PlayerAnimation = animation;

// Set the starting position of the player around the middle of the screen and to the back Position = position;

// Set the player to be active Active = true;

// Set the player health Health = 100;

this.color = Color.White; this.FrameWidth = 115; this.FrameHeight = 69; this.frameCount = 8;

// Set the time to zero elapsedTime = 0; currentFrame = 0; }

<syntaxhighlight lang=csharp>

Retrieved from ‘http://www.trccompsci.online/mediawiki/index.php?title=Animation&oldid=2453’