An Introduction to Layers in Quorum
This tutorial will cover items, working with layers, and using 2D and 3D layers together
In Quorum, many of the objects we would add to our games: Drawables, Models, Audio objects, cameras, point lights, etc. inherit from one of two classes: Item2D or Item3D. Drawables and Audio2D objects inherit from Item2D. Models, Audio3D objects, cameras, and point lights inherit from Item3D. Many of the actions in both of these classes are the same, Add() and Remove(), for example, or simply have an additional parameter for the Item3D like SetPosition() and Move().
Recall the Drawing in 2D and the Drawing in 3D tutorials. When we add Drawables to our game, they are, by default, positioned in the bottom corner of our game screen. When we add models however, they are positioned, by default, in the center of the game screen. The reason that these items have different defaults is that they exist on different layers.
In Quorum and many other drawing applications, one image is made up of multiple layers. Layers tell Quorum the order in which to draw objects on the screen. All of the items in a particular layer will be rendered at the same time. When there are multiple layers, Quorum will draw them back to front. This is how we can draw objects in front of other objects. Each layer in Quorum is either a 2D layer or a 3D layer. We can add as many layers as we choose, and in any order.
Working With Layers
A Quorum game has two default layers, a Layer3D and a Layer2D. By default, each of those is our current layer for objects of that kind (CurrentLayer3D and CurrentLayer2D). The game draws the 3D layer first followed by the 2D layer, so any items on the 3D layer will be behind items on the 2D layer and may be hidden. When we call the action Add() and pass it an item, the layer that the item is added to is determined by whether it inherits from Item2D or from Item3D. For example, Drawables will be added to the 2D layer and Models to the 3D layer.
Each layer has its own camera that can be moved and directed specific to the items on that layer. We can also add more layers to our game, by instantiating the layer, then calling either the AddLayer2D() or the AddLayer3D() actions, and passing the new layer. When we call the Add() action, it will add the item to the appropriate current layer. To change the current layer, we call SetCurrentLayer2D() or SetCurrentLayer3D() and pass the layer.
To change a layer’s camera, we use the layer action SetCamera(). We should be sure that the camera is 2D for a 2D layer or 3D for a 3D layer. To assign a camera on a 3D layer for example, the line of code would be:
Now that we have discussed the basics of layers, let’s try using 2D and 3D layers together.
Combining 2D and 3D Layers
We are going to practice with layers by creating a 3D object and a status bar. When the status bar reaches 0, the object disappears from the screen. We will only need the default layers in order to complete this example.
First, we need to create a new Quorum Game Application. We will need the libraries (use statements) for Drawable, Model, Camera, Color, and Vector3. We also need to instantiate two drawables, one model, two cameras, a color, and an integer that holds the maximum stat for our status bar (600).
This is what our code should look like to start:
use Libraries.Game.Game use Libraries.Game.Graphics.Camera use Libraries.Game.Graphics.Drawable use Libraries.Game.Graphics.Model use Libraries.Game.Graphics.Color use Libraries.Compute.Vector3 class Main is Game Drawable status_bar Drawable status Model character Color color integer stat = 600 Camera cam3D = undefined Camera cam2D = undefined action Main StartGame() end action CreateGame end action Update(number seconds) end end
Now, in the CreateGame action, we need to set up our cameras, Load our status bar and our character, and Add these items to the game. Remember that our status bar will be added to the 2D layer and our character will be added to the 3D layer. This is what our CreateGame action should look like:
action CreateGame cam3D = GetCamera3D() cam2D = GetCamera2D() //our status bar is by default at the bottom left of our screen. //this moves it to the low center of the game screen status_bar:LoadRectangle(stat, 50, color:White()) status_bar:SetPosition(100, 50) Add(status_bar) //Load full status and add it to the status bar status:LoadFilledRectangle(stat, 50, color:Green()) status:LoadFilledRectangle(stat, 50, color:Green()) status_bar:Add(status) //we add our character to the center of our screen character:LoadBox(3, 3, 3, color:Purple()) Add(character) end
The image below is the result of that code.
Now, we will add the rest of our code to the Update action. We are going to decrease stat by 1 each frame and then load our status as a filled rectangle. When our status is below 200, the status will turn red. When the status is 0 our character will be removed from the game.
We will have each camera do something different:
- The 3D camera will rotate around around our character.
- The 2D camera will move so that the status bar goes toward the center of the screen when the status becomes low
Here is what our Update action will look like:
action Update(number seconds) Vector3 yAxis yAxis:Set(0, 1, 0) cam3D:RotateAround(character:GetGlobalPosition(), yAxis, 1) stat = stat - 1 if stat > 0 if stat < 200 status:LoadFilledRectangle(stat, 50, color:Red()) cam2D:Move(0, -1, 0) else status:LoadFilledRectangle(stat, 50, color:Green()) end else Remove(character) end end
The images below capture two different times during our game.
In this tutorial we have learned how to work with layers, and how 2D and 3D layers can work together in a game.
In the next tutorial, we will discuss Screen Resolutions, which describes how to change the screen resolution and window size.