XNa getting started tutorial-(3) simple animation

Document directory

• Continue Our xNa tour...
• About Animation
• Load Animation
• Adjust the animation speed"
• Some details
• Summary
• Series list

Continue Our xNa tour...

Last week, we briefly introduced the related controllers of xNa, and implemented simple Position Control for a Sprite in the screen using the mouse and keyboard.

However, we do not implement the movement of Sprite characters, that is, animation.

Now, let's continue with what we talked about last week to implement simple animations.

 

About Animation

Those who have some knowledge about animation are certainly not new to frame-by-frame animation. in the simplest form, the animation elements are recorded in each frame in the adjacent unit time. in this way, when we

When a frame is played, we can see the relatively "motion" animation due to the temporary visual effect. The GIF animation we usually see is based on this principle.

Back to our games, since the "actions" of Sprite in general games are limited and enumerative, we can also use similar solutions to record all actions of Sprite.

 

Now we try to use the above GIF to implement our mobile animation.

Because native xNa does not support reading images from GIF animation directly, it cannot load images from the content directly to gif animation or its related frames.

Although technically speaking, many open-source projects support reading or generating GIF images (if you are interested, you can check it here ), we can achieve game animation by loading a frame of GIF animation on our own.

But here, we honestly split the frames and get the following images.

 

In this way, we can achieve the "motion" of the characters by loading different positions of the same image.

 

Load Animation

Let's go back to the first article in this series.

When using sprite draw, we provide the following overload parameters:

 

Here, we can set the value of sourcerectangle to display part of texture2d.

 

After calculation, we know that the size of each individual character is 60x110.

In this way, we use the following methods to dynamically display the animation of different "frames ".

Code

Protected override void Update (gametime)
{
Keyboardstate state = keyboard. getstate ();
If (State. iskeydown (Keys. Up ))
{
This. position. Y-= 10;
}
If (State. iskeydown (Keys. Down ))
{
This. position. Y + = 10;
}
If (State. iskeydown (Keys. Left ))
{
This. position. X-= 10;
}
If (State. iskeydown (Keys. Right ))
{
This. position. x + = 10;
}
Mousestate state1 = mouse. getstate ();
If (state1.leftbutton = buttonstate. Pressed)
{
Ipathfinder Pathfinder = new pathfinderfast (m_matrix );
Pathfinder. formula = heuristicformula. Manhattan;
Pathfinder. searchlimit = 2000;
M_path = Pathfinder. findpath (New vector2 (INT) This. position. X, (INT) This. position. Y), new vector2 (state1.x, state1.y ));
}
If (this. m_path! = NULL & this. m_path.count ()! = 0)
{
Int Index = This. m_path.count ()-1;
This. Position = new vector2 (this. m_path [Index]. X, this. m_path [Index]. y );
This. m_path.removeat (INDEX );
Return;
}
M_frameindex = m_frameindex + 1> 5? 0: m_frameindex + 1;
Base. Update (gametime );
}
Protected override void draw (gametime)
{
Graphicsdevice. Clear (color. cornflowerblue );
Spritebatch. Begin ();
This. spritebatch. draw (this. IMG, new vector2 (this. position. x, this. position. y), new rectangle (m_frameindex * m_framesize.x, 0, m_framesize.x, m_framesize.y), color. white, 0, vector2.zero, 1f, spriteeffects. none, 0 );
Spritebatch. End ();
Base. Draw (gametime );
}

M_framesize indicates the size of each independent action. Point m_framesize = new point (60,110 );

After compilation, we can see the "dynamic" characters.

 

Adjust the animation speed"

We soon found that frame-by-frame animations displayed in this method were violent. That is, the animation frame change speed is too fast.

This is actually because our animation frame changing logic is in the update method. Generally, the update call is based on the built-in loop of the game, that is, according to the default update rate of xNa-60fps (frame/second ).

If you directly use the frame loop speed with the default speed, either the CPU usage is too high or the other is unnecessary. Here, we are determined to "decrease" the number of frames.

We know that in xNa, we can use gametime. elapsedgametime to get the time since the end of the last loop.

Therefore, we can change our update method to the following structure:

Code

Protected override void Update (gametime)
{
Timesincelastframe + = gametime. elapsedgametime. milliseconds;
If (timesincelastframe> millisecondsperframe)
{
Timesincelastframe-= millisecondsperframe;
// Todo
}
}

 

Among them, int millisecondsperframe = 50; is our set threshold value.

After the above modification, we will find that the frame speed is significantly reduced, of course, the CPU usage also goes down.

 

Some details

You may find that people are still running in the same place when they do not move, just add the logic similar to the following.

Code

If (isactive)
{
M_frameindex = m_frameindex + 1> 5? 0: m_frameindex + 1;
}
Else
{
M_frameindex = 0;
}

 

Summary

This article briefly introduces frame-by-frame animation and Its Implementation in xNa. The frame rate control is introduced. I believe that after reading this article, you will have a comprehensive understanding of xNa's simple 2D animation.

Source code in this example

To be continue ....

 

Series list

1. XNa tutorial ---- (1)

2. 
   XNa tutorial ---- (2) mobile control

3. 
   XNa tutorial ---- (3) simple animation