How To Control Animations With Game States

Updated On: June 30, 2013

You can add animations in a number of ways in GBS. I will focus on how you can drive an animation using game state changes. This could be useful for when you have a complex character that has many different states like, Idle, Walking, Jumping, etc. and you normailly want to have a seperate animation clip for each state.

Drop A Shape Quick Object Into The Scene


Click the "Basic Square" icon on the tool bar and click somewhere in the scene. It wil place a basic entity in the scene for you with a spatial and a renderer. We will delete the renderer and use a sprite sheet later in the tutorial. Click on the shape in the scene and you should see the properties panel fill up with a list of components that exists on the new entity you just created. Click the plus icon at the top of the "Entity Component(s) List". It will open the add entity component dialog.

Add A StateMachine Component


Lets start by adding a StateMachine Component by selecting the State Machine Component from the dropdown list and give it a name "AnimationStates". Also add a State Logic Component. This will hold the actions that will change the currently playing animation.

Adding SpriteSheet Components

Now lets add the required components for rendering a sprite sheet animation. The primary way you add an animation to GBS is by using sprite sheets. You will need to add three components to an entity to control and render a sprite sheet animation. You need a SpriteSheet Renderer, a SpriteSheet Component, and a SpriteSheet Controller. The SpriteSheet Renderer displays each frame of the SpriteSheet Component to the screen depending on which frame is passed in by the SpriteSheet Controller. Repeat the previous step to add all three of those components that I just mentioned.

**Side Note - You may ask, well why do I have to use a sprite sheet when in programs like Flash CS5 you can define animations using frames on a timeline? In a game there are certain optimizations that need to be taken into account for performance reasons. If you add as much frames as you can to a sprite sheet and just copy each frame from that sprite sheet you are saving memory in your game and it runs faster because the engine only has to upload the image to the GPU once, instead of uploading every frame of an animation multiple times as the frames rapidly change. Just a little, "food for tought", so to speak.

Setup States In The State Machine


Now setup a few states in the StateMachine Component like the picture above.

**Note - There are a number of different state types that can be used with transitions to determine a flow between states. If a character needed to be in a damage state for maybe 1 second you could make the damage state a "Delay State" and have it transition to another state once that time period lapsed automatically. This would then trigger any state change logic you have wired up as well. A "Property Transition" could be used to check for the damage amount and if it is below a certain level it can transition to a custom destroy state for example. Similar logic could be wired up using individual properties as well but would require a lot more work. Some states and transitions have properties and some don't so click the pencil icon next to the state or transition to see what properties can be changed.

Setup The Sprite Sheet Animations


First assign an image to the SpriteSheet Component and set which type of divider you want to use to split the image up into frames. I am choosing to use a cell count divider because the sprite sheet I am using is evenly spaced out and has a set number of frames. If you don't see any images to choose from in the dropdown list jump over to the Assets tab and import a sprite sheet.

Select the Sprite Sheet To Render


When you go back to the SpriteSheet Renderer properties you will see the SpriteSheet Component in the dropdown and you want to select it. The first frame from your SpriteSheet Component should appear in the preview area. You can scrub the "Change Frame Index" slider and see the different frames in your spritesheet but to have this be controlled by the game you want to setup animation clips on the SpriteSheet Controller.

Setup Animation Clips


Make sure you select the SpriteSheet Renderer that this controller will control. Setup three animation clips called "Idle", "Walking", and "Jumping". The names of the animations is what we will change on this component to switch animations by using a ChangeProperty action. Remember that the sprite sheet frame index count starts at 0 and at the top left of the sprite sheet.


Setup State Logic


Now we will wire up the SpriteSheet Controller to change which animation it plays depending on which state the State Machine is in. The State Logic Component allows you to setup actions that will be triggered when a state on a particular state machine becomes active. It pretty much watches the state machine for changes and reacts. Setup a "ChangeProperty" action for each state like you see above and set the "currentAnimation" property on the SpriteSheet Controller to the corresponding animation name. See below:


The property reference that you want to set is the "@SpriteSheetController.currentAnimationName" and you want to set the property to the corresponding animation name depending on which state is triggering this action.

Control The States With User Input


Now that you have your animations controlled by the State Logic Component, just change the "@Logic_StateMachine.stateMachine.currentStateName" property on the StateMachine using a "ChangeProperty" action and your animations will change along with it. You can add other actions to each state trigger to do things like move the character up in the air when the "Jump" state is active or move the character across the screen when in the "Walking" state.


**Note: It would be a good idea to use this technique with the Platform Player Controller that comes with the Platformer Plugin to create a character in a platformer style game.

Follow Us For Updates