Layers and Floors
Learn the difference between backgrounds, foregrounds and floors.
Last updated
Learn the difference between backgrounds, foregrounds and floors.
Last updated
When building, you can created layered room structures. Within each room, there are 5 layers:
Background
Floors 1-3
Foreground
Let's walk through the features of each layer type!
Backgrounds are essentially the "ground" of your room. By default, the background will be light blue. You can change the background color by navigating to Settings > Room Properties and entering the hex color value of your choice.
Builders can also add elements to a background, just as they add object elements. Once a background element is added to the room, builders can use the background selector to move it to their preferred placement.
We recommend using the snap to grid feature for seamless background element placement!
Foregrounds work similarly to backgrounds, except the foreground layer is always on top of everything else. So, if the background is the ground of your room, think of the foreground as the sky!
Just like with backgrounds, you can add elements to your foreground. Foreground elements are especially good for applying fun lighting effects to your room.
Note: While you can apply animations to background and foreground elements, you cannot apply z-indexes, hitboxes or interaction zones.
Floors act as layer groups in your room. Within a floor, elements have their own z-index and hitbox structure, allowing a builder to create immersive, layered environments.
By default, all elements, interaction zones and hitboxes are placed on floor 1. Floor 1 sits directly on top of your background.
Builders can quickly change the floor they are building on by navigating to the filter menu in the top bar, and selecting the desired floor.
Once a builder changes the floor, all new objects will be automatically placed on that floor.
Builders can change the floor of already placed elements. To do this, select the element, navigate to the position menu and choose a floor to place your element.
In the example below, the treasure chest on Floor 1 is hidden behind the tower on Floor 1, based on the z-index placement of the tower.
However, once we change the floor placement of the treasure chest, we can now place it at the top of the tower!
By default, moving an element to a new floor will also move that element's hitbox, z-index and interactions, if any are applied. Before moving the element, Bueno will ask to confirm that you'd like to proceed.
A floor changer allows players to move between floors.
To create a floor changer ramp, navigate to the filter menu in the top bar, and select Floor Changer.
This will bring up a purple ramp line that can used as a gateway to another floor. You can set the floor from the floor changer edit window, accessible by clicking on the purple line.
In the example above, the top of the line is set to Floor 2, and the bottom of the line is set to Floor 1.
What happens when a player crosses a ramp?
When a player is on Floor 1 and crosses the ramp line, it’s now on Floor 2.
If it crosses the line again, it’s back at Floor 1.
Hitboxes have to be added on all floors to keep the player within the desired boundaries. At the position of the ramp, hitboxes overlap slightly to accommodate a smooth transition between floors. We'll go in depth on this hitbox structure in our example below!
In Part 1, we placed our treasure at the top of the tower. Now, let's build a ramp so players can climb the tower and claim the treasure!
We have a ladder set up, but we need to make it climbable so our player can reach the treasure on Floor 2.
First, we will start with z-index and hitbox placement.
For the z-indexes, we'll set them around the back base of the tower, so our player can walk behind. The ladder's z-index should be placed slightly below the tower's z-index. This will ensure a smooth transition as the player climbs the ladder, and will make sure the ladder appears in front of the tower.
Next, we'll set up the hitboxes on Floors 1 and 2. The hitboxes on Floor 1 block in the ladder path. On Floor 2, the hitboxes keep the player within the confines of the ladder and tower top.
Notice in the full view above, the hitboxes on each floor overlap. This will create a seamless transition between floors once we get the floor changer placed.
Now, we will place our floor changer and create the ladder "ramp" effect between the two floors. We'll place it snuggly underneath the Floor 1 hitbox boundary on the ladder.
Time to try out the ladder, and claim the treasure!
While we can show you best practices, you may have to play around a bit to find the perfect placements to work for your structures!
