Here's the sprite sheet I'm going to use in my example:
http://atomicrobotdesign.com/blog_media/sprite_movement/images/gb_walk.png
spriteNumber = 1
spriteImageNumber = 1
REM Create an animated sprite from an image containing the different frames of animation
REM The parameters are: Sprite Number, Image Filename, Tiles Across, Tiles Down, Image number to use
create animated sprite spriteNumber, "gb_walk.png", 6, 3, spriteImageNumber
REM Now, actually create the sprite using the image number from above
sprite spriteNumber, 320, 240, spriteImageNumber
sync on
sync rate 60
do
cls
rem if user presses RIGHT, play the animation frames for walking right
if rightkey() = 1
play sprite spriteNumber, 1, 6, 150
endif
rem if user presses LEFT, play the animation frames for walking left
if leftkey() = 1
play sprite spriteNumber, 7, 12, 150
endif
sync
loop
But in that example, you'll notice sometimes the old selected animation sequence will finish playing before it moves to the new one when you change directions. To fix this, we need to set the sprite's current frame whenever the sequence changes.
To do that, I created an array of a custom UDT to help store the different animation sequences. This will help out a lot when you have several different types of animation sequences to manage. The constants simply help keep things organizes, allowing me to easily see which array element corresponds with each animation.
#CONSTANT ANIM_WALK_RIGHT = 1
#CONSTANT ANIM_WALK_LEFT = 2
#CONSTANT ANIM_FACE_RIGHT = 3
#CONSTANT ANIM_FACE_LEFT = 4
Type Animation
start as integer
finish as integer
EndType
dim animations(4) as Animation
animations(ANIM_WALK_RIGHT).start = 1
animations(ANIM_WALK_RIGHT).finish = 6
animations(ANIM_WALK_LEFT).start = 7
animations(ANIM_WALK_LEFT).finish = 12
animations(ANIM_FACE_RIGHT).start = 13
animations(ANIM_FACE_RIGHT).finish = 13
animations(ANIM_FACE_LEFT).start = 14
animations(ANIM_FACE_LEFT).finish = 14
rem starting animation
anim = ANIM_FACE_RIGHT
rem sprite number for our character
spriteNumber = 1
rem image number used for sprite
spriteImageNumber = 1
rem animation delay, higher is slower
spriteDelay = 150
rem sprites position
playerX = 320
playerY = 240
REM Create an animated sprite from an image containing the different frames of animation
REM The parameters are: Sprite Number, Image Filename, Tiles Across, Tiles Down, Image number to use
create animated sprite spriteNumber, "gb_walk.png", 6, 3, spriteImageNumber
REM Now, actually create the sprite using the image number from above
sprite spriteNumber, playerX, playerY, spriteImageNumber
sync on
sync rate 60
do
cls
rem This keeps track of when the character is actually moving
rem Call this before any controls.
isMoving = 0
rem store last animation ID, so we know when it changes
oldAnim = anim
if rightkey() = 1
rem sprite is moving
isMoving = 1
rem set the current animation
anim = ANIM_WALK_RIGHT
rem update sprite position
inc playerX, 1
rem if walking right animation is different than the last animation, set the starting frame
if oldAnim <> anim then set sprite frame spriteNumber, animations(ANIM_WALK_RIGHT).start
endif
if leftkey() = 1
rem sprite is moving
isMoving = 1
rem set the current animation
anim = ANIM_WALK_LEFT
rem update sprite position
dec playerX, 1
rem if walking left animation is different than the last animation, set the starting frame
if oldAnim <> anim then set sprite frame spriteNumber, animations(ANIM_WALK_LEFT).start
endif
rem if sprite is not moving, set its current frame to the standing still animation frame, facing the direction it last moved
rem The standing still and facing left or right are the last two sprites in our sprite sheet.
if isMoving = 0
if anim = ANIM_WALK_RIGHT then anim = ANIM_FACE_RIGHT : set sprite frame spriteNumber, animations(ANIM_FACE_RIGHT).start
if anim = ANIM_WALK_LEFT then anim = ANIM_FACE_LEFT : set sprite frame spriteNumber, animations(ANIM_FACE_LEFT).start
else
rem if sprite is moving;
rem update position
sprite spriteNumber, playerX, playerY, spriteImageNumber
rem play animation
play sprite spriteNumber, animations(anim).start, animations(anim).finish, spriteDelay
endif
sync
loop
"You're all wrong. You're all idiots." ~Fluffy Rabbit