Nov 252013

One thing that gives makes a game more dynamic is animated sprite.
Indeed, moving a fix shape all over the screen is nice. Moving an animated shape is better 🙂

Lets start with the below sprite sheet (yes it is link – hope no one will sue me for copyright infringement, this is only for educating purpose).


What we have here is 8 28*32 frames.
First frame is at position x=0, second frame at position x=28, third frame at position x=56, etc… you get the idea.
Which means that it we number our frame, we could easily get the position x=frame*28.

Second trick is one overloaded draw method which enables us to draw in a destination rectanble (on screen) from source rectangle (in a texture, our sprite sheet !).

Add to that some simple trick in the keyboard input where we would alternate two frames for one specific movement, and you obtain an animated sprite !

Source code : xna_demo_23.

A video (or screenshot) as always.

And the text source code if you want to have a quick glimpse at it.

Imports Microsoft.Xna.Framework
Imports Microsoft.Xna.Framework.Graphics
Imports Microsoft.Xna.Framework.Audio
Imports Microsoft.Xna.Framework.Content
Imports Microsoft.Xna.Framework.Media
Imports Microsoft.Xna.Framework.Input

Public Class Game
Inherits Microsoft.Xna.Framework.Game
Dim graphics As GraphicsDeviceManager
Dim spriteBatch As SpriteBatch
Private mTexture As Texture2D
Dim dest_box As Rectangle

Dim timer As Integer
Dim switchFrame As Boolean
Dim direction_ As Integer

Public Enum direction
Up = 0
Down = 1
Left = 2
Right = 3
End Enum

Dim frame As Integer = 0

Public Sub New()
graphics = New GraphicsDeviceManager(Me)
End Sub

Protected Overrides Sub Initialize()
End Sub
Protected Overrides Sub LoadContent()
spriteBatch = New SpriteBatch(GraphicsDevice)
'Loading the texture'
Dim textureStream As System.IO.Stream = New System.IO.StreamReader(Application.StartupPath + "\spritesheet.png").BaseStream
mTexture = Texture2D.FromStream(GraphicsDevice, textureStream)
dest_box = New Rectangle(0, 0, 28, 32)

End Sub
Protected Overrides Sub UnloadContent()

End Sub
Protected Overrides Sub Update(ByVal gameTime As Microsoft.Xna.Framework.GameTime)

Dim newState As KeyboardState
newState = Keyboard.GetState

If (newState.IsKeyDown(Keys.Right)) Then
dest_box.X += 2
direction_ = direction.Right
End If

If (newState.IsKeyDown(Keys.Left)) Then
dest_box.X -= 2
direction_ = direction.Left
End If

If (newState.IsKeyDown(Keys.Up)) Then
dest_box.Y -= 2
direction_ = direction.Up
End If

If (newState.IsKeyDown(Keys.Down)) Then
dest_box.Y += 2
direction_ = direction.Down
End If


'if all keys up, then freeze
If newState.IsKeyUp(Keys.Up) AndAlso newState.IsKeyUp(Keys.Down) AndAlso newState.IsKeyUp(Keys.Left) AndAlso newState.IsKeyUp(Keys.Right) Then
timer = 0
switchFrame = False
End If


End Sub
Protected Overrides Sub Draw(ByVal gameTime As Microsoft.Xna.Framework.GameTime)

spriteBatch.Begin(SpriteSortMode.BackToFront, BlendState.AlphaBlend)

spriteBatch.Draw(mTexture, dest_box, New Rectangle(frame * 28, 0, 28, 32), Color.White)

End Sub

Sub animation()

timer += 1

'every 8 keypress, we switch between frame A and B for one specific move
If (timer = 8) Then
switchFrame = True
ElseIf (timer = 16) Then
timer = 0
switchFrame = False
End If

If (switchFrame = False) Then
Select Case direction_
Case direction.Up
frame = 5
Case direction.Down
frame = 2
Case direction.Left
frame = 0
Case direction.Right
frame = 7
End Select
Select Case direction_
Case direction.Up
frame = 4
Case direction.Down
frame = 3
Case direction.Left
frame = 1
Case direction.Right
frame = 6
End Select
End If
End Sub
End Class

 Posted by at 20 h 56 min

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>