PushButton Tutorial Series – Updating Animation

Google+ Pinterest LinkedIn Tumblr +

VIEW THE DEMO

DOWNLOAD THE SOURCE CODE

RETURN TO THE TUTORIAL INDEX

In the last tutorial we created an AnimationController to automatically update the image shown by the SpriteRenderComponent, resulting in an animated image. Now we will extend the KeyboardController component to allow it to signal the AnimationController to change the current animation, which will allow us to show different animations based on the keyboard input, like a running animation when an arrow key is pressed.

The AnimationController requires two things to be able to swap animations on demand. The first is the name of an event that will be dispatched when the animation should be changed. This is set through the changeAnimationEvent property.

EntityFactory.as

Animation.changeAnimationEvent = "PlayerAnimation"; 

The second is a reference to a property that describes the name of the animation that should be playing. This is a get function that we will add to the KeyboardController component.

Animation.currentAnimationReference = 
  new PropertyReference("@Input.currentAnimation");   

What happens now is that when the animation being displayed needs to be changed an event is dispatched by the entity, in this case with the name “PlayerAnimation”. There is no data associated with this event: the AnimationController will use the triggering of the event as a signal to request the animation that should be displayed through the property reference assigned to the changeAnimationEvent property.

Dispatching the “PlayerAnimation” event and providing a the name of the desired animation is the job of the KeyboardController. The currentAnimation function provides a way for the AnimationController to read the name of the current animation.

KeyboardController.as

public function get currentAnimation():String
{
 return animation;
}

The onTick function is updated to record the last direction of the player (with the facing variable), whether it is moving or not (with the idle variable), and to dispatch an event when the animation should be changed.

public override function onTick(tickRate:Number):void
{
 var position:Point = owner.getProperty(PositionReference);

 if (InputManager.isKeyDown(InputKey.RIGHT))
 {
  if (!facing || idle) 
  {
   facing = true;
   idle = false;
   animation = "RunRight";
   owner.eventDispatcher.dispatchEvent(new Event(AnimationEventName));
  }
  
  xMovement += Speed * tickRate;
  while (xMovement >= 1)
  {
   position.x += 1;
   xMovement -= 1;
  } 
 }
 else if (InputManager.isKeyDown(InputKey.LEFT))
 {       
  if (facing || idle) 
  {
   facing = false;
   idle = false;
   animation = "RunLeft";
   owner.eventDispatcher.dispatchEvent(new Event(AnimationEventName));
  }
  
  xMovement -= Speed * tickRate;
  while (xMovement <= -1)
  {
   position.x -= 1;
   xMovement += 1;
  } 
 }
 else if (!idle)
 {
  idle = true;
  animation = facing?"IdleRight":"IdleLeft";
  owner.eventDispatcher.dispatchEvent(new Event(AnimationEventName));
 }
 
 if (InputManager.isKeyDown(InputKey.DOWN))
 {
  yMovement += Speed * tickRate;
  while (yMovement >= 1)
  {
   position.y += 1;
   yMovement -= 1;
  } 
 }
 else if (InputManager.isKeyDown(InputKey.UP))
 {
  yMovement -= Speed * tickRate;
  while (yMovement <= -1)
  {
   position.y -= 1;
   yMovement += 1;
  } 
 }
}

Note: You might be tempted to set the animation through the AnimationController setAnimation or currentAnimationName functions, but these functions will play an animation once (the loop property on the AnimationControllerInfo is only used to clamp the frame index, not to repeat the animation) and then drop back to the default animation. Supplying the animation name through the changeAnimationEvent property and triggering changes in the animation name through the event system is the best way to dynamically change animations at runtime.

Share.

About Author

Leave A Reply