In this tutorial you will learn how to handle spritesheet animations and to connect them to the controls of a game.

1. What is a spritesheet and how to generate animations from it?

you can find this spritesheet on ceilfire: spritesheet

 

Sprite-animations are comparable to flipbooks, so images showed in series. A spritesheet is a collection of images you can use to create several “flipbooks”/animations which you can user later on. You will create a set of animations out of one spritesheet to use them for different situations in your game.

2. Animations with Ceilfire

You already know what spritesheets are and what they are used for. You will now learn how to use them. Open the Ceilfire Editor ( Ceilfire Editor).
Load the following assets “as images”:
Load the following asset “as spritesheet”:
And the following window will pop up:
Adjust the “Rows” to 4 as well as the “Cols” to 4. By doing this, you dtermine the seperation between the single images you later on want to play in series.

Intermediate Step

(If you already knwo how to arrange a scenerie and to make the ground “collide” with the world, you can skip this part and directly jump to 3.)

Name and adjust the background in one layer (layer0):
Place the backfloor asset in a second layer:
…then click on the ground and choose “+ Add new Component” (at the rigth side of the editor) :…and press “collide” :

3. Create Animations (movement)

Drag the player character into the panel and size it to an adequate size:
Select (+ Add new component) for the player object and give it “JumpAndRun” controls
Choose the “Animation Editor” (upper-left menu bar on the right side) :
Create an “New” Animation and name it “moveleft”:
…then select “Load” and type in “4,5,6,7”:You just created a selection of the images 4,5,6,7 tht can be played in series and represent the animation for the left movement. Press “Play” to see the animation.
Repeat that last step one more time but choose the frames 8,9,10,11 and name the animation “moveright”.

4. Animations + Controls

The animations are created and your player character is controllable with the arrow keys (from JumpAndRun). Now you are going to connect the animations for the left and right moevement to your player character.

Select “Game”, create a “New event rule” and select “+New condition”:
… then select “key is down”:… choose left and press “OK”:…and you will see that the condition is created: “if down-key is left”. Select “+ New action” and the sprite of the player character…
… next and “Play Animation”:…next and type in the name of the animation for the left movement “moveleft” and press “OK”:You can see now, that if down-key is left the animation “move left” will be played. You now have a double assignment of keys for the left key. JumpAndRund makes the player character move to the left side and at the same time it plays the animation “moveleft”.

Repeat this step for the movement to the right and save your game.
Here you can find the game made during the tutorial Tutorial Animations&Controls. “Remake-it” and check out the Event Rules as well as the Animations. You´ll find the “Remake”-button under most of the games. Use it to learn how other guys make games and improve your skills.