In any game with more than one layout, chances are you’re going to want a way to transition between the layouts. And you’ll want it to look reasonable. In this tutorial, I’m going to walk through how the system in my game was built – thanks in advance to Nepeo for helping me out with this one. Also, if you want to make this project yourself, as is, you’ll need Kenney’s RPG Urban Pack.
So, this is a very simplified version of what I did in my game file. The game itself is grid-based, and all the movement is done with the Tile Movement behavior, so we don’t need to worry about setting up movement with the arrow keys or whatever. But we will be adding animations to our player sprite as part of the transition system. This example will have two layouts, and by the end of this tutorial, you should be able to switch back and forth between them.
This project contains the following:
- Two layouts sized 848x480, the viewport is also 848x480 for simplicity. These layouts will each have three layers:
- Transitions
- Objects
- Tilemap
- One event sheet
- Objects:
- AreaChange_Sender – a sprite object with the following instance variables:
- ID (Number) – used to keep track of which area change is occurring, this is more useful in larger games
- NextLayout (String) – the name of the layout that we’re transitioning to
- TriggerNumber (Number) – the number of the trigger instance. This helps line up transitions if you have multiple trigger boxes
- Direction (String) – tells us which direction the player will hit the transition from, to set animations correctly
- AreaChange_Receiver – a second sprite object which has the same instance variables as AreaChange_Sender
- Player_Base – A third, differently coloured Sprite Object square with the following attached:
- Tile Movement and Scroll To behaviors (the latter only really applies if your layout is bigger than the viewport)
- Initially visible unchecked in Object Properties. The player shouldn’t see this box.
- Player_Sprite – a fourth Sprite object which contains our animations and the following:
- MovementDirection Instance Variable (String)
- Transition – a large, black sprite object which covers the size of the viewport. It also has two String Instance Variables:
- Some kind of background. In this case I’ve used a Tilemap object and drawn the map using Kenney’s RPG Urban Tileset. You could also use a Tiled Background or a Sprite.
There is a project file included in this tutorial for you to look at, though it is fairly uncommented. Most of the detail as to what's going on is in this tutorial.
Now that you know what goes into this project let's go ahead and get started with making it.