XNa getting started tutorial-(3) simple animation

Source: Internet
Author: User
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 ".


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 );
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:


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.


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



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


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.