Page 1 of 1

Using XNA in VB.NET Part III

#1 raziel_  Icon User is offline

  • Like a lollipop
  • member icon

Reputation: 464
  • View blog
  • Posts: 4,255
  • Joined: 25-March 09

Posted 17 December 2011 - 12:55 PM

Animating a sprite
Using XNA in VB.NET Part I
Using XNA in VB.NET Part II

Hi in this tutorial i will show you how to animate sprite using XNA under VB.NET.
So we are going to use this explosion sprite sheet for this:
Attached Image
If you haven't check the previous tutorials i suggest you do it since i`m not going to explain again how to create XNA project under VB.NET etc. So what we need to make this cool explosion is the texture and our position of the texture. Also we are going to need the frames that will be put together to make our explosion smooth, the size of the sprite sheet and the frame size. Also we are going to use a delay of a sort so you can see that each frame is used. here is what we have in our declaration in the class:
Public Class Game
    Inherits Microsoft.Xna.Framework.Game
    'Fields in our game graphic manager etc'
    Private graphics As GraphicsDeviceManager
    Private spriteBatch As SpriteBatch
    'Texture that we will render'
    Private mTexture As Texture2D
    'Set the coordinates to draw the sprite at'
    Private spritePos As Vector2 = Vector2.Zero
    'The size of each explosion sprite'
    Private frameSize As New Point(67, 67)
    'The current frame at which we are'
    Private currentFrame As New Point(0, 0)
    'The row and column size of the sprite sheet'
    Private sheetSize As New Point(6, 0)
    'Its is used to make a time delay for each frame to appear'
    Private timeSpawn As Single = 0
...



so here is what we need to have to begin animating our explosion. now lets draw our sprite in the draw method we will draw it like so:
    Protected Overrides Sub Draw(ByVal gameTime As Microsoft.Xna.Framework.GameTime)
        GraphicsDevice.Clear(Color.CornflowerBlue)
        'TODO: Add your drawing code here'
        'Draw the sprite'
        spriteBatch.Begin(SpriteSortMode.BackToFront, BlendState.AlphaBlend)
        spriteBatch.Draw(mTexture, spritePos, New Rectangle(currentFrame.X * frameSize.X, currentFrame.Y * frameSize.Y, frameSize.X, frameSize.Y), Color.White, 0, Vector2.Zero, 1, SpriteEffects.None, 0)
        spriteBatch.End()
        MyBase.Draw(gameTime)
    End Sub



Ok so now if you just run your code you should see the first frame of our sprite sheet at the left upper corner.
Attached Image
Now lets animate the explosion. For this we will create a method named AnimateSprite which will take as argument the GameTimer. In this method we will animate the sprite and we will show each frame after 1 second:
    Private Sub AnimateSprite(ByVal gameTime As GameTime)
        'The mothod will be used to animate the texture
        'Slow down the time between each frame so we can see them shown'
        'Its slown for 1 second'
        If (gameTime.TotalGameTime.TotalSeconds - timeSpawn) > 1 Then
            'Select the row of our sprite sheet since the sprite sheet contains only one row'
            'we choice the first row (currentFrame.Y = 0)'
            currentFrame.Y = 0
            'Each time we enter the update event and our method is called we increase show next frame'
            currentFrame.X += 1
            'Set timeSpawn variable to the current seconds so we can show each frame between 1 second'
            timeSpawn = gameTime.TotalGameTime.TotalSeconds
        End If

    End Sub



Ok so that wasn't that hard and our method is pretty short :)
All we need to do next is to call our method in the Update method like so:
    Protected Overrides Sub Update(ByVal gameTime As Microsoft.Xna.Framework.GameTime)
        'Allows the game to exit'
        If GamePad.GetState(PlayerIndex.One).Buttons.Back = ButtonState.Pressed Then
            Me.Exit()
        End If
        'TODO: Add your update logic here'
        'The method that will update our sprite position'
        AnimateSprite(gameTime)
        MyBase.Update(gameTime)
    End Sub



And we are done if your run your game now you will see each frame shown after one second till they are all shown.
Here is the sprite sheet that i have used
Attached Image
Hope you find this tutorial helpful :)

This post has been edited by raziel_: 29 December 2011 - 10:43 AM


Is This A Good Question/Topic? 0
  • +

Page 1 of 1