Top

Agent Sprite

It’s time to see our character again.

We’re in the home stretch now. We’ve got an animation, we’ve got our Sprite Facing component, now it’s time to link it with our character.

In this chapter, we’ll:

  • Add an AgentSprite component
  • Adjust the agent’s collider
  • Play the game with our new character
  • Talk about the update workflow

Add Agent Sprite Component

  1. Click Select a component and then select AgentSpriteComponent.

  2. Now, select the AgentSpriteComponent

  3. For Animation, click Select an asset and select the desired asset and slice. If the dropdown list is too long, filter the list by typing the name of the asset.

    As soon as an animation is added, the sprite may begin to flash white; this is normal. The sprite flashes to let us know the Agent Sprite component requires additional configuration.

    The Hello Murder Architect window showing the Agent Sprite component. A white square is shown with an error message.

    It may be necessary to move the viewer to show the animation. Pan the preview by clicking and dragging with the middle mouse button. Zoom in/out by moving the mouse wheel.

  4. In the case of the robot, the flashing white square occurs because there is no loop named “idlee;” our east idle animation is named “idle_e”.

    • When the Agent is still, the Agent Sprite Component uses the Idle Prefix.
    • When the Agent is in motion, the Agent Sprite Component uses the Walk Prefix.

    If you’re following along with our robot sprite, use the following settings for Idle Prefix and Walk Prefix.

    • Idle Prefix: idle_
    • Walk Prefix: walk_

    The graphic should appear once the idle prefix matches the Aseprite loop name.

    The Hello Murder Architect window showing the Agent Sprite component with the robot graphic.

Update Collider

  1. Now, select the Collider component.

  2. The Collider can be dragged into the correct position and adjusted by clicking and dragging the red box with the mouse. Depending on the needs of the game design, the Collider may be bigger or smaller than the sprite shown.

    The Hello Murder Architect window showing the Collider component.

Play

  1. Click Save Asset.

  2. Now press F5 to start gameplay. If everything has been set correctly, the agent should now show the sprites appropriate for the direction of movement.

    The Hello Murder Architect in gameplay mode.

Reload

  1. As you develop your character, you will probably need to go back to Aseprite to add more to the character.

    If you press Save in Aseprite, Murder should automatically pick up the changes. If you’ve added slices, or changed animations, that should all be reflected in the Generated section of your asset manager.

    That’s all!

Congratulations! That concludes our lesson on Characters.