Gfx Engine - Animated Sprites and Sprite Atlases

Gfx Engine - Animated Sprites and Sprite Atlases

In the previous example, we got acquainted with how texture atlases are created and used. We created a couple of sprites with simple animation and rendered a landscape from graphic tiles. But is this the only area of ​​application for texture atlases?

Not quite.

Previously, we did implement sprite animation using a custom FireSpriteAtlasElement class inherited from Cubios::Gfx::SpriteAtlasElement. However, this method is not very convenient and is more suitable for cases where you really need to have deep control over the playback of an animation sequence.

As we know, GFX Engine has a separate class for creating animated sprites - AnimatedSprite. Since SDK 6.3, this class provides the ability to use texture atlases to load animation frames!

What is this for? Why is it more convenient than having each frame of animation in a separate file?

Well, there are several reasons:

1. Reduced Memory Usage: Texture atlases pack frames together efficiently, reducing unused space (padding) that might exist in separate image files. This leads to a smaller memory footprint.

2. Fewer Files: With a single file for multiple frames, there’s less memory overhead for file headers and metadata.

3. Faster Loading: Loading a single texture atlas file is faster than loading multiple individual image files, as it minimizes file I/O operations.

4. Simpler Management: Animating from a texture atlas is often easier because all frames are organized in one file, and the coordinates can be precomputed or handled by the GFX Engine.

5. Consistency: rames are guaranteed to have the same texture properties, like filtering and mipmap settings, since they share the same texture.

So by using a texture atlas for your animations, you streamline asset management, improve runtime performance, and reduce the complexity of animation workflows. It’s a best practice in game development, especially for resource-constrained environments.

The process of creating an animated sprite using a texture atlas is not much different from creating a sprite in any other way:

• First, the SpriteAtlas itself is created, into which a picture with animation frames is loaded
• Next, an AnimatedSprite is created, initialized with a texture atlas and registered in the scene

then

• The sprite object gets added to the screen inside the Begin()-End() block in the on_Render() function
• And gets disposed when it's not used anymore to free system resources

Let's look at each step separately.

Step 1 - Initialization

The SpriteAtlas class has just one constructor:

1SpriteAtlas(std::string name, Cubios::Scene* scene)
2 

As you can see, to create a sprite atlas you only need two things - the name of the texture file containing the sprite images and a pointer to the Scene object:

• std::string name
  Name of the texture file

• Cubios::Scene scene
  Pointer to Scene object

Once the SpriteAtlas instance has been created, elements (sprites) need to be added.

The AddSprite method is used for this:

1bool AddSprite(uint32_t id, const Cubios::Math::Rect2& rc)
2 

Just like when creating a regular sprite, the first parameter of the atlas sprite element is a unique identifier that allows you to find this sprite in the scene. The second parameter is an object of the Math::Reсt2 class, describing the integer coordinates and size of the sprite image on the texture atlas in pixels.

• uint32_t id
  Sprite resource identifier

• Cubios::Math::Rect2 rc
  Sprite texture rectangle

The AnimatedSprite class has several constructors that take a SpriteAtlas as a parameter:

1AnimatedSprite(Cubios::Gfx::SpriteAtlas<Cubios::Gfx::SpriteAtlasElement>* atlas, const Cubios::Math::Transform& t);
2AnimatedSprite(Cubios::Gfx::SpriteAtlas<Cubios::Gfx::SpriteAtlasElement>* atlas, float x, float y);
3AnimatedSprite(Cubios::Gfx::SpriteAtlas<Cubios::Gfx::SpriteAtlasElement>* atlas);
4 

To create an instance of the class, you simply need to pass a pointer to the texture atlas that was created earlier.

Step 2 - Rendering

The way the AnimatedSprite object is rendered is absolutely no different from how regular sprites are rendered. Sprites are added to the scene inside the Begin-End block.

1//Start adding objects to a screen
2it->Begin(TOPOLOGY_orientation_mode_t::ORIENTATION_MODE_GRAVITY,true);
3 
4..
5 
6it->Add(this->animatedSprite);
7 
8//Finish adding objects
9it->End();
10 

The only additional action is calling the int16_t Tick(uint32_t dt) function in the on_Tick() callback.

1void GfxAnimatedSpriteApp::on_Tick(uint32_t currentTime, uint32_t deltaTime)
2{
3    this->animatedSprite->Tick(deltaTime);
4}
5 

This is necessary in order to "inform" the animated sprite the current time so that it can correctly play the animation.

The Example

So, the example...

On the one hand, we could just take any animation as an example and put it on the screen, right? Yes, but that's not interesting!

Let's make something better, like a short cartoon where a boy walks under the moon?

The first step, as always, is the initialization of resources in the InitializeResources() function:

1void GfxAnimatedSpriteApp::InitializeResources()
2{    
3    this->animationAtlas = new Cubios::Gfx::SpriteAtlas<Cubios::Gfx::SpriteAtlasElement>("animation.png",&this->Scene); 
4    for(int x=0; x<8; x++)
5    {
6        this->animationAtlas->AddSprite(GfxObjects::myAtlasBase+x, Cubios::Math::Rect2(92*x,0,92,163));
7    }
8 
9    this->animationAtlas2 = new Cubios::Gfx::SpriteAtlas<Cubios::Gfx::SpriteAtlasElement>("earth.png",&this->Scene);
10    int c = 0;
11    for(int y=0;y<4;y++)
12    {
13        for(int x=0;x<12;x++)
14        {
15            this->animationAtlas2->AddSprite(GfxObjects::myAtlas2Base+c, Cubios::Math::Rect2(52*x,52*y,52,52));
16            c++;
17        }
18    }
19 
20    this->Scene.CreateObjectWithID(GfxObjects::myBackground,new Background(17,38,41));
21 
22    this->position = 0;
23    this->prevFrame = -1;
24 
25    this->Scene.CreateObjectWithID(GfxObjects::mySprite,new AnimatedSprite(this->animationAtlas,this->position,120));
26    this->sprite = dynamic_cast<AnimatedSprite*>(this->Scene[GfxObjects::mySprite]);
27    this->sprite->SetPlaybackSpeed(100);
28    this->sprite->SetPlaybackMode(AnimatedSprite::playbackMode_t::Loop);
29 
30    this->Scene.CreateObjectWithID(GfxObjects::mySprite2,new AnimatedSprite(this->animationAtlas2,170,45));
31    this->sprite2 = dynamic_cast<AnimatedSprite*>(this->Scene[GfxObjects::mySprite2]);
32    this->sprite2->SetPlaybackSpeed(100);
33    this->sprite2->SetPlaybackMode(AnimatedSprite::playbackMode_t::Loop);
34 
35    this->Scene.CreateObjectWithID(GfxObjects::mySprite3, new Cubios::Gfx::Sprite("grass.png",120,195));
36}
37 

As you can see, we create two texture atlases - with animation of a walking boy animation.png and a rotating moon earth.png (sorry, the Earth - we couldn't find a ready-made animation of a rotating moon in the public domain). Next, four objects are created - a background, 2 animated sprites and a simple sprite for the foreground.

And the rest is very simple - we pass time to animated sprites in on_Tick() callback

1void GfxAnimatedSpriteApp::on_Tick(uint32_t currentTime, uint32_t deltaTime)
2{
3    this->sprite2->Tick(deltaTime);
4 
5    int16_t frame = this->sprite->Tick(deltaTime);
6 
7    if(this->prevFrame!=frame)
8    {
9        this->sprite->Transform.Position.X+=5;
10        if(this->sprite->Transform.Position.X>260) this->sprite->Transform.Position.X = 0;
11    }
12}
13 

and render them in on_Render()

and finally, we render our background and flying fireballs in on_Render()

1void GfxAnimatedSpriteApp::on_Render(std::array<Cubios::Screen, 3>& screens)
2{
3    for(auto it = screens.begin(); it != screens.end(); ++it)
4    {
5        //Start adding objects to a screen
6        it->Begin(TOPOLOGY_orientation_mode_t::ORIENTATION_MODE_GRAVITY,true);
7 
8        it->Add(this->Scene[GfxObjects::myBackground]);
9 
10        it->Add(this->sprite2);
11        it->Add(this->sprite);
12        it->Add(this->Scene[GfxObjects::mySprite3]);
13 
14        //Finish adding objects
15        it->End();
16    }
17}
18 

Just a little bit of coding - and we get our cartoon on WOWCube!