{"id":706,"date":"2013-11-25T20:56:11","date_gmt":"2013-11-25T19:56:11","guid":{"rendered":"http:\/\/labalec.fr\/erwan\/?p=706"},"modified":"2013-11-25T20:59:54","modified_gmt":"2013-11-25T19:59:54","slug":"vb-net-and-xna-article-16-animating-a-sprite","status":"publish","type":"post","link":"https:\/\/labalec.fr\/erwan\/?p=706","title":{"rendered":"VB.Net and XNA : Article 16 – Animating a sprite"},"content":{"rendered":"

One thing that gives makes a game more dynamic is animated sprite.
\nIndeed, moving a fix shape all over the screen is nice. Moving an animated shape is better \ud83d\ude42<\/p>\n

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).<\/p>\n

\"spritesheet\"<\/a><\/p>\n

What we have here is 8 28*32 frames.
\nFirst frame is at position x=0, second frame at position x=28, third frame at position x=56, etc… you get the idea.
\nWhich means that it we number our frame, we could easily get the position x=frame*28.<\/p>\n

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 !).<\/p>\n

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 !<\/p>\n

Source code : xna_demo_23<\/a>.<\/p>\n

A video (or screenshot) as always.<\/p>\n

https:\/\/labalec.fr\/erwan\/wp-content\/uploads\/2013\/11\/xna_demo_23.mp4<\/a><\/video><\/div>\n

And the text source code if you want to have a quick glimpse at it.<\/p>\n


\nImports Microsoft.Xna.Framework
\nImports Microsoft.Xna.Framework.Graphics
\nImports Microsoft.Xna.Framework.Audio
\nImports Microsoft.Xna.Framework.Content
\nImports Microsoft.Xna.Framework.Media
\nImports Microsoft.Xna.Framework.Input<\/p>\n

Public Class Game
\n Inherits Microsoft.Xna.Framework.Game
\n Dim graphics As GraphicsDeviceManager
\n Dim spriteBatch As SpriteBatch
\n Private mTexture As Texture2D
\n Dim dest_box As Rectangle<\/p>\n

Dim timer As Integer
\n Dim switchFrame As Boolean
\n Dim direction_ As Integer<\/p>\n

Public Enum direction
\n Up = 0
\n Down = 1
\n Left = 2
\n Right = 3
\n End Enum<\/p>\n

Dim frame As Integer = 0<\/p>\n

Public Sub New()
\n graphics = New GraphicsDeviceManager(Me)
\n End Sub<\/p>\n

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

End Sub
\n Protected Overrides Sub UnloadContent()
\n MyBase.UnloadContent()<\/p>\n

End Sub
\n Protected Overrides Sub Update(ByVal gameTime As Microsoft.Xna.Framework.GameTime)<\/p>\n

Dim newState As KeyboardState
\n newState = Keyboard.GetState<\/p>\n

If (newState.IsKeyDown(Keys.Right)) Then
\n dest_box.X += 2
\n direction_ = direction.Right
\n End If<\/p>\n

If (newState.IsKeyDown(Keys.Left)) Then
\n dest_box.X -= 2
\n direction_ = direction.Left
\n End If<\/p>\n

If (newState.IsKeyDown(Keys.Up)) Then
\n dest_box.Y -= 2
\n direction_ = direction.Up
\n End If<\/p>\n

If (newState.IsKeyDown(Keys.Down)) Then
\n dest_box.Y += 2
\n direction_ = direction.Down
\n End If<\/p>\n

animation()<\/p>\n

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

MyBase.Update(gameTime)<\/p>\n

End Sub
\n Protected Overrides Sub Draw(ByVal gameTime As Microsoft.Xna.Framework.GameTime)
\n GraphicsDevice.Clear(Color.CornflowerBlue)<\/p>\n

spriteBatch.Begin(SpriteSortMode.BackToFront, BlendState.AlphaBlend)<\/p>\n

spriteBatch.Draw(mTexture, dest_box, New Rectangle(frame * 28, 0, 28, 32), Color.White)<\/p>\n

spriteBatch.End()
\n MyBase.Draw(gameTime)
\n End Sub<\/p>\n

Sub animation()<\/p>\n

timer += 1<\/p>\n

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

If (switchFrame = False) Then
\n Select Case direction_
\n Case direction.Up
\n frame = 5
\n Case direction.Down
\n frame = 2
\n Case direction.Left
\n frame = 0
\n Case direction.Right
\n frame = 7
\n End Select
\n Else
\n Select Case direction_
\n Case direction.Up
\n frame = 4
\n Case direction.Down
\n frame = 3
\n Case direction.Left
\n frame = 1
\n Case direction.Right
\n frame = 6
\n End Select
\n End If
\n End Sub
\nEnd Class<\/p>\n

<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"

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 \ud83d\ude42 Lets start with the below sprite sheet (yes it is link – hope no one will sue me for copyright infringement, this is only for […]<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34,35],"tags":[],"class_list":["post-706","post","type-post","status-publish","format-standard","hentry","category-dotnet","category-xna","category-34-id","category-35-id","post-seq-1","post-parity-odd","meta-position-corners","fix"],"_links":{"self":[{"href":"https:\/\/labalec.fr\/erwan\/index.php?rest_route=\/wp\/v2\/posts\/706","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/labalec.fr\/erwan\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/labalec.fr\/erwan\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/labalec.fr\/erwan\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/labalec.fr\/erwan\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=706"}],"version-history":[{"count":3,"href":"https:\/\/labalec.fr\/erwan\/index.php?rest_route=\/wp\/v2\/posts\/706\/revisions"}],"predecessor-version":[{"id":712,"href":"https:\/\/labalec.fr\/erwan\/index.php?rest_route=\/wp\/v2\/posts\/706\/revisions\/712"}],"wp:attachment":[{"href":"https:\/\/labalec.fr\/erwan\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=706"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/labalec.fr\/erwan\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=706"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/labalec.fr\/erwan\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=706"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}