Moving Along – Animating your character Sprite

1-4-2017

To make our main character sprite a little more engaging, let’s animate your sprite with the images we built in my last article. Animating our little bubble is rather easy with the FASE engine and makes our little bubble look much nicer than a static sprite.

First, let’s find our movement routine. It should look as found below.

//directional movement of the character
{
// motion of the protagonist
if( Input() & 0x01 ) // P - go right
{
ax = vx -maxvx ? -40 : 0;
}
//now we have down doing the same as up for testing
if( Input() & 0x04 )// A go down
{
ay = (vy -maxvy) ? -40 : -1;
}
if( Input() & 0x10 && !spacepressed && num_bullets<4 )
{ // Space (FIRE)
Sound(EFFX, 0);
bullets[num_bullets].x= sprites[0].x;
bullets[num_bullets].y= sprites[0].y;
i= Input() & 0x0f;
dirbul[num_bullets]= i ? i : 1;
num_bullets++;
}
spacepressed= Input() & 0x10;
}

I’m sure you know what will be happening next, if you have been following my tutorials, let’s move it to a function.
Highlight the above code in your text editor, cut and paste it into the function.

void moveMainCharacter()
{
//paste the movement code here
}

Compiles and runs great.

Our animation is controlled by the .n code of your sprite, so for example: sprites[0].n = 0; tells us that we are going to use image 0 for sprite 0. By the way don’t get the image for your sprite confused with the actual sprite itself. We are just indexing image 0 and placing it to Sprite 0.

Let’s give it a whir.

Let’s find your logic to go right and left

if( Input() & 0x01 )

if( Input() & 0x02 )

and change the program to this:

if( Input() & 0x01 ) // P - go right
{
sprites[0].n = 0;//bubble orientation right 4th sprite over
ax = vx -maxvx ? -40 : 0;
}

Give that a test, We can see at this point that when we move left or right that the sprite image changes whenever we change direction.

Might as well change the other two directions, up and down.

if( Input() & 0x04 )// A go down
{
sprites[0].n = 4;//bubble orientation down 4th sprite over
ay = (vy -maxvy) ? -40 : -1;
}

If we look at our sprite images first, we can see that sprite image 0 and 1 deal with going right, Sprite 2 and 3 deal with going left, Sprite 4 and 5 deal with going down and sprites 6 and 7 deal with going up. That’s exactly what we are going to use to animate our sprites.

We are going to define the variable for moving your character.

unsigned char movePlayer;

Initialize your character movement

movePlayer = 0;

Now, this should be a simple matter of flip-flopping the movePlayer from 0 to 1 and adding that to you sprite command. However, we just move the entire routine to a function. So, we need to modify our function.

void moveMainCharacter(unsigned char movePlayer)

Now we can pass that variable to our function.

Let’s also change our calling function.

//directional movement of the character
{
movePlayer ++;
if (movePlayer > 1) movePlayer = 0;
moveMainCharacter(movePlayer);
}

What we are now doing is incrementing the movePlayer variable, then, if the variable is greater than 1, we change it back to 0. This means either a 0 or a 1 is passed to the function. Finally, we call the function with our 0 or 1.

Let’s move back to our function

To save some space I’m only going to show you the go right logic.

// motion of the protagonist
if( Input() & 0x01 ) // P - go right
{
sprites[0].n = 0 + movePlayer;//bubble orientation right 4th sprite over
ax = vx < maxvx ? 40 : 0;
}

Noticed, I’ve modified the sprites function, adding the 0 or 1 we sent earlier and add that to the image we are using for our sprite. This in effect calls either image 0 or image 1 when calling the sprite creating your animation.

Tada!

Except, there are two problems. The first problem, is the difference between the two images are not very distinct. The second problem is that a quick flip flop between images makes the animation a little jerky. One problem can be resolved with another trip to GIMP and the other can be solved in logic.

I tweaked the sprite images in GIMP a little bit and now they are looking a little better.

Now let’s think a little about the logic. We are sending a different image every other time we move the sprite. Perhaps we can slow that down a bit.

To do that, we are going to change our logic a bit.

So, calling our function will change a bit.

//directional movement of the character
{
movePlayer ++;
if (movePlayer > 16) movePlayer = 0;
moveMainCharacter(movePlayer);
}

Now we are going to count from 0 to 16.

Finally, we change our function a little bit.

void moveMainCharacter(unsigned char movePlayer)
{
unsigned char spriteFrame;
if (movePlayer > 8) spriteFrame = 1;
if (movePlayer < 8) spriteFrame = 0;
// motion of the protagonist
if( Input() & 0x01 ) // P - go right
{
sprites[0].n = 0 + spriteFrame;//bubble right 4th sprite over
ax = vx -maxvx ? -40 : 0;
}
//now we have down doing the same as up for testing
if( Input() & 0x04 )// A go down
{
sprites[0].n = 4 + spriteFrame;//bubble down 4th sprite over
ay = (vy -maxvy) ? -40 : -1;
}
if( Input() & 0x10 && !spacepressed && num_bullets<4 )
{ // Space (FIRE)
Sound(EFFX, 0);
bullets[num_bullets].x= sprites[0].x;
bullets[num_bullets].y= sprites[0].y;
i= Input() & 0x0f;
dirbul[num_bullets]= i ? i : 1;
num_bullets++;
}
spacepressed= Input() & 0x10;
}

Let me explain a little bit if the logic is a little unclear.

We increment the movePlayer variable each time before the function is called. If the movePlayer variable is greater than 16, then we reset it back to 0. The function is now called.

Within the function, we create a temporary variable called spriteFrame. All this variable does is flip-flop between 0 and 1, which represent which sprite frame we are going to call. If the movePlayer variable is less 8 (which is half of the counter, remember 0 to 16), then frame 0 will be call, otherwise, frame 1 will be called.

When you move in the direction you want to move, sprites[0].n will call up either image 0 or image 1 depending on the spriteFrame variable.
See, not too bad at all.

You can make that sort of logic work with all types of sprite animation, having more than 2 frames or even have a constant sprite animation, like Pacman, which is always moving his mouth. It all just depends on how often the spriteFrame is changed or where the spriteFrame is changed.

This is really all aesthetics, but it really does add to the game, so it’s not so unchanging. Good animation can also distract the player from the game if it is done poorly, so make sure your animation is not too horrible, this you need to experiment with and tweak as needed.

Enjoy and have fun coding.

Advertisements

Author: andydansby

I'm a hobbyist coder working with the ZX Spectrum. Living in New York state near the Syracuse area. I grew up in Virgina. The first computer my parents bought for me was a Timex Sinclair 2068.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s