Sprite Facing

Murder makes it easy to change sprites based on the direction of travel.

In this chapter, we’ll:

• Remove the Sprite component
• Add the Facing component
• Add the Sprite Facing component

Murder has an “Add Basics” button that automatically adds a Position component, a Collider component, and a Sprite component. If we want the sprites to change based on direction, we want to swap out the Sprite component for two components that can better meet our needs.

Remove the Sprite component

1. Select the Player prefab from the Prefabs folder.

2. Now, select the trash can icon to the left of the SpriteComponent. This will remove the Sprite component.

   

   If you have both a Sprite component and an Agent Sprite component, the Sprite component will take priority. We don't want that.

   This gets rid of the sprite, but we’ll be adding it soon.

Add the Facing component

3. The Facing component allows us set which facing the Architect will display when placing our entity.

   Click Select a component and then select FacingComponent.

4. It will work best if we can see the character facing us, as if it were heading to the bottom of the screen.

   Set the Direction to Down.

   

Add the Sprite Facing component

5. The Sprite Facing component teams up with the Agent Sprite component to let us know which sprite to use, based on the direction set in the Facing component.

   Click Select a component and then select SpriteFacingComponent.

   

6. The easiest way to use the Sprite Facing component is to set an “Auto Direction” mode.

   If you’re using a walking figure like our Robot graphic, you’ll probably have six different animation loops:

   • Idle, facing north
   • Idle, facing east
   • Idle, facing south
   • Walking north
   • Walking east
   • Walking south

   This means we’ll be using an “auto 4 directions” sprite – west will be a copy of east.

   So, if you’re following along with our Robot sprite, press Auto 4 Directions. The Architect will ask if you are sure you wish to override this component. That sounds scary, but click OK.

   You can always remove the Sprite Facing component and re-add it again if you need to go back.

   

7. The Sprite Facing component allows us to set a different suffix for each direction, by clicking on the wedges.

   This graphic shows how the three walk animations will appear based on the agent directions with Auto 4 Directions.

   

   If you move the Selected Slice slider, the selected wedge will change to match. Sprite 1 is facing east (right), Sprite 2 is facing south (down), Sprite 3 is facing west (left), and Sprite 4 is facing north (up).

   You may notice that the “Flip” toggle is checked for Sprite 3. This means that Murder will display the character facing “west” sprite by showing the “east” sprite, flipped.

8. It’s probably a good idea to save our progress.

   Press Save Asset to save the sprite.

Next steps

In the next section we will add the Agent Sprite component.