Looking at the Layouts & Player Animations
Let’s start by taking a look at the first layout, appropriately named FirstLayout. As you can see, we have a little road system that our player can walk along and a big arrow pointing towards the top of the map. This will be where we’re going to place the transition. You can also see how the player is stacked on top of a purple box – these are the two parts of our player system: Player_Base and Player_Sprite. Bear in mind that both Player objects are Global, so they won’t be destroyed when we switch layouts. Finally, up in the top left of the layout, in the margins, you should see a big, black object. This is our Transition object which will be used later on.
The layout we’ll be transitioning to is titled SecondLayout. It too features a road system, and like FirstLayout it has a vertical road that leads to the edge of the layout. So our transitions will go from the top of FirstLayout to the bottom of SecondLayout and vice versa.
But before we start getting onto the transition code, let’s set up our player’s animations – we want the sprite to look correct as we change areas.
The first thing we’ll do is make sure that the player stays in the same place as the box with all the relevant behaviors. You can do this with the Pin behavior, but in this case, I’m going to use the Set Position action. So, the event runs as follows:
Condition: System ▶︎ Every Tick
Action: Player_Sprite ▶︎ Set Position to Player_Base.X, Player_Base.Y
Next, we want to make sure that our player animations are set up correctly. The Player_Sprite object has four different animations – a walk for each direction. So, obviously, we want to make sure that the correct animation is playing for a given direction. And we need to make sure that the animation stops playing when the player stops moving! Let’s do that bit first.
The event to stop the animation playing runs as follows:
Condition: Player_Base ▶︎ Tile Movement ▶︎ Is moving
Action: Player_Base ▶︎ Set Frame to Frame 0
In my case, all of my animations have an idle position as frame 0. So, when this event triggers, you don’t get a leg stuck out or anything like that!
“But wait!” I hear you say. This is supposed to stop the animation when the player isn’t moving right? Indeed. So, we need to invert the Is Moving condition – it will become Is not moving, and the event is complete.
Next, we’ll set up the directional animations, starting with the ‘Right’ direction.
Your event should be set up like this:
Condition: Tile Movement ▶︎ Is moving Right
Action: Player_Sprite ▶︎ Set Animation to “Walk_Right” (play from beginning)
Action: Player_Sprite ▶︎ Set Instance variable ▶︎ Set Movement Direction to Right
Remember those instance variables we have on the Player_Sprite object? Well, in this case, MovementDirection will be used during the Area Change code, so we need to make sure it’s set to the correct direction. Now you can just copy and paste that event block, and change the directions for left, up and down. You should have an event block that looks like this:
And that’s the animations sorted! Now might be a good time to preview the project and make sure it all looks right.
Next, we'll implement the transition function.