Working with sprite animations BGE – UPBGE

Lots of GIF images, give it some tome to load on slow connections

We all know that the BGE (Blender Game Engine) has some tools to achieve animated textures, but the problem is that are completely useless! If you are new to blender you might be wondering why is that?, and if you have been working some time in the BGE, for sure you will agree with me.

If you are very new to blender and willing to learn about BGE, I recommend you to read this tutorial to learn the basis first, and then come back here 🙂

A little explanation for the new people working in the BGE

The way blender manage the animated textures is not usable..

• Because it reads the texture sheet in the wrong order.
• Because animations are not independent.
• Because there is no way to avoid animation looping.
• Because it is impossible to timing due to non consistent starting frames.
• No scrolling texture or event based support for animations.

This is an example of non consistent time frames

As you can see in the picture above, all the explosions have the exact same timing, wich means that every explosion looks the same despite the order of appereance, and it acts the same with smoke effects, or any other sprite animation with different time of creation.

So, the fact that the internal tool of blender to create texture animations is not good enough, it does not mean that you cannot do that in blender, but you need to make everything and control it by using (at least in this tutorial) logic bricks.

There is an addon to make sprite animation simpler for about USD$9.99 , but I know a lot of users are young people who maybe are unable to buy online or spend some money, so keep reading for my alternative solution for this! at least for animations like blood, explosions, some other items like coins,  2D characters, conveyor, tank tracks and so on.

This method requires a bit more of work but the result is perfect! so, lets see an example (blend file avaliable)

The demonstration

To demonstrate this, we are going to use this blood sprite sheet from opengameart.org

I sugest you to setup your folder project, even if working with something simple like this, to keep your files and projects clean.

The next thing to do is to import the sprite texture into blender by using the addon “import images as planes”. If the addon is not active, then we need to activate firts. Check the GIF below to see how to do this.

As we mentioned before, if the addon “Import Images as Planes” is not active then we need to activate it first

Now we have the addon activated in blender, and we are about to import the sprite texture

1. Save the blender file in your project folder were you saved the project structure with the blood texture.
2. Delete the default cube.
3. Import the file “Blood.png” by using the addon.
4. Check material settings to ensure alpha channel is active to enable transparencies. If needed read more about “alpha channel” here.

Sprite texture ready, and if you notice the plane object with the texture has the name “blood” because it took the exact name as the texture.  Ok now let’s go with the next steps.

Setting up the object for HALO (screen align object) wich means that the plane object will face the camera player all the time, and to do this we need the object to be aligned to the X axis.

1. Select the “blood” object
2. Enter edit  mode and select all.
3. Rotate 90 degrees in X axis
4. Rotate 90 degrees in Z axis
5. Select HALO in “Game Settings / Face Orientation / Halo”
6. Press P key to activate the game engine and make sure everything is OK, if not go back and repeat.
7. If it works, congratulations! 🙂

If you need to know more about material game settings, check out this page.

Prepping objects for the “replace mesh” actuator

1. Select the “blood” object and change the name for “blood.001”.
2. Enter Edit mode and press Control+R with the mouse over the blood object (since there are six image segments contained in the texture sprite, we need five segments alog the plane) and press “5” or move the scroll untill we see five cuts and then press Enter.nn
3. In edit mode select face mode selection, and select the first image segment (the one with the full blood) and press P in the keyboard to separate this plane segment, and then continue with the other faces of the plane.
4. At the end, as we separate all the faces from the original object, we should delete the resulting empty object because it contains nothing.
5. Now lets verify the name of the object equals the name of the mesh, since we are going to use “replace meshes” actuator, we need to identify wich one select to change for another mesh.
6. Make sure to set the origin for all the object to the geometry center (Shift+Control+Alt+C)
7. Start the game engine to make sure every blood object face the camera in the right way.
8. It’s done!

Now it is the time to do some logic bricks! and let’s use a video instead just because this part is a little bit longer than the others to be recorded in GIF animations. So here we go!

Adding a frame property to the “blood starter” to control the animation

1. Duplicate the first blood sprite (blood.001) and rename to “blood_Still” or any other name you want.
2. Add a integer property and name it “frames”
3. Create an Always sensor (true pulse mode – Skip 10) connected to a property actuator, the property actuator should be adding +1 every time the Always sensor is active.
4. Press the debug information button and activate the debug info in the “Game” menu to see if it works. It should be adding +1  when the game engine start.

Now lets control the value of the frame property

Since we have six (6) objects ready for use in the blood animation, but one of them is already taken to be used in the animation (blood_Still) we only need the property “frames” to reach the value of 5, and then go back to zero and start again.

The only thing to do here is to ask with a Property sensor when the frame property reach certain value (in this case “5”) and then add another property actuator wich will add zero value to “frame” property.

Once the “frame” value reach 5, then we need to delete that object, so we add another actuator to delete the “blood_Still” object once this happen.

Now it is time to control the animation by replacing meshes

We already have a frame counter that we will use for the animation, now it’s time to manage the mesh replacement to simulate animation. To avoid too much logic bricks in the logic panel we are going to use the “State Machine“, this is useful to activate and deactivate states (logic states) so we can save processing time but alto helps to keep a more understandable logic brick setup.

If you notice, we activated that layer buttons similar to the layer panel in the view 3D, but this one is used by the State Machine and that’s why we do not see any other logic bricks. The first line is for the “Visible” logic bricks , wich means you can activate or deactivate to show specific logic bricks.  Initial means that you might want to execute specific bricks, and here is were you specify that.

Naming Layers in State Machine

If you want to name each layer in the state machine, the only thing to do is to name the top first controller, because that name is the one that appear in the tool tip name in the layer buttons, see the pic below:

The fact is that since that layer (second one, as in the pic above) in the state machine (Animation) is not going to be in an active layer, we need to add in execution time when needed, as shown in the next picture:

Now the object blood_still is ready to be used as an animated sprite in the BGE! Let’s do some kind of sum up about its behavior:

• The animation consist of six frames
• We have a property that increases by 1 untill it reaches 5, then it is restarted to 0
• We have five controllers asking for values from 1 to 5, wich correspond to a specific “replace mesh” actuator, so every time the property “frame” change (from 0 to 5) we have a different texture, wich translates to an animation
• When property is between 0 and 5, “Animation” state machine is activated
• When property “frame” is greater than 5, then removes “Animation” state machine.

Now we are going to actually test this “blood_Still asset” in a simple game test scenario

For a simple game test scenario, we will create a simple moving object what will act like a “blood_Still” spawner.

So, that is pretty much how to achieve this kind of effects with sprites in the BGE, here is another example in the picture below and the blend file is here avaliable to download.

Well hope you like it and find this usable for your future projects, and if have some questions please write it down in the comments area, thanks!