Create a new project from a blank template and open the Game.cs. The
Game class is the entry point of the application in both the GameLauncher and the Sandbox. When the application is started the
OnInitialize method will be called. This will construct a new instance of
Game which can be used to start setting up the UI. The
Shutdown method will be called while ending playback in the editor which can be used to cleanup the UI.
Adding a Canvas and Text
Canvas will be added to the
Application which will draw a
Text component. Every
UIComponent should be a child of a
Canvas which is responsible for updating and managing every child
Canvas and the
Text are added in the
CreateUI by adding the following code.
After compiling the project and running the game (in the GameLauncher or Sandbox), the text will appear slightly below the center of the screen.
Adding an Image
Next up, an image will be added. First off, right-click and save this image into your 'Asset/libs/ui/' folder. Due to the transparency the image may appear as a blank image but when you import it into your project you can view the difference.
To access the image in-game, we'll need to use the
ResourceManager and the
ImageFromFile method. This loads a resource from the specified path as an image.
CreateUI method with the following code:
After recompiling and running the game, it will show the following:
Adding a Button
The final component to be added in this tutorial is a button that will quit the game when running the game. A
Button is a
UIElement which has a
Button is responsible for handling the visual representation of the button, while the
ButtonCtrl is responsible for handling input events, the state of the
Button and the content of the button. The
ButtonCtrl also contains several callbacks to handle input.
OnPressed- Called when the button is pressed down and let up again without losing focus.
OnEnterMouse- Called when the mouse enters the rectangle area of the button.
OnLeaveMouse- Called when the mouse leaves the rectangle area of the button.
OnFocusEnter- Called when this button is focused, for example with the keyboard or a controller.
OnFocusLost- Called when this button lost focus.
These are normal C# events and can be hooked into as with any other type of event.
To instantiate a
Button in our
Canvas and assign a callback to the
OnPressed event the following code needs to be added to the
Finally add the corresponding
OnQuitButtonPressed method that will quit the game.
Recompile and play the game. Now you'll see a Quit button that will exit the game upon being pressed.