User Tools

Site Tools


guides:beginners:spritesheets_and_animation

Part 7 – Spritesheets and Animation

In the previous part, we put an object on the screen that used a single image. Most often though, you will want to use a sprite sheet for your objects that contain one or more animations.

Using config we can cut the image up into many graphic sections and make them available for animations.

In the data\anim asset folder is a spritesheet for our hero called soldier_full.png which looks like this:

We can change the [HeroGraphic] to use this image file instead. But first, the config needs to know how to find the anim folder.

Expand the texture resource list as:

[Resource]
Texture = ../data/object # ../data/anim

Now it is possible to change the HeroGraphic texture:

[HeroGraphic]
Texture        = soldier_full.png

Of course if you ran the game now, the hero would become the entire sprite sheet, but we only want the first image on the sheet. That's fine. We can crop it with:

[HeroGraphic]
Texture        = soldier_full.png
TextureOrigin  = (0,0,0)
TextureSize    = (32,32,0)

Now if you run the game (you don't need to recompile - only config changes have been made), you will see just a single image for the hero object which is extracted from the sheet.

In order to use all six frames on the sprite sheet to animate our hero character, we can define some animation for him.

First is to define all the graphics in the sprite sheet as sections. We will make six sections, the first being just a complete copy of HeroGraphic:

[HeroRunGraphic1@HeroGraphic]

Next, make a complete copy of HeroGraphic again, but change the TextureOrigin parameter so that we get the next frame position:

[HeroRunGraphic2@HeroGraphic]
TextureOrigin  = (32,0,0)

And repeat this method for all the final frames:

[HeroRunGraphic3@HeroGraphic]
TextureOrigin  = (64,0,0)
 
[HeroRunGraphic4@HeroGraphic]
TextureOrigin  = (0,32,0)
 
[HeroRunGraphic5@HeroGraphic]
TextureOrigin  = (32,32,0)
 
[HeroRunGraphic6@HeroGraphic]
TextureOrigin  = (64,32,0)

Next, define an animation set for the HeroObject:

[HeroObject]
Graphic      = HeroGraphic
Position     = (50, 400, 0)
Scale        = 2
AnimationSet = HeroAnimationSet

We don't have a section called HeroAnimationSet, so define it:

[HeroAnimationSet]
AnimationList = HeroRun

Right, so we have made an animation set called HeroAnimationSet. The animation list only contains one animation, called HeroRun (which isn't defined yet).

Let's make the running animation itself:

[HeroRun]
DefaultKeyDuration = 0.06
KeyData1 = HeroRunGraphic1
KeyData2 = HeroRunGraphic2
KeyData3 = HeroRunGraphic3
KeyData4 = HeroRunGraphic4
KeyData5 = HeroRunGraphic5
KeyData6 = HeroRunGraphic6

So it's pretty straight forward: the default duration between frames is 0.06, and each key frame is set to a different graphic.

If you were to run this now, the HeroRun animation will play once, but you will get a message in your console like:

[ANIM] [orxAnimSet.c:orxAnimSet_ComputeAnim():2321] Couldn't compute
next animation.

This is because animation in Orx works in a graph. When an animation finishes, Orx needs to know what happens next. Do you play another animation? Or do you play this one again in a loop?

In our case we want to loop it. So we need to create a link from HeroRun to HeroRun so that the animation will loop:

[HeroRunLinkLoop]
Source      = HeroRun
Destination = HeroRun

And then under the [HeroAnimationSet] section, we need to add the link into a link list:

[HeroAnimationSet]
AnimationList = HeroRun
LinkList      = HeroRunLinkLoop

So the animation set knows about all the individual animations, and all the links that connect one animation to another.

Run this and the little hero will start running forever.

Time to make some platforms.


Next: Part 8 – Platforms and Texture Repeating

guides/beginners/spritesheets_and_animation.txt · Last modified: 2017/05/19 04:27 (9 days ago) by sausage