Gum screens are top level items which can contain instances of Gum objects. We'll be creating our first Gum screen in this tutorial. We'll also load this screen in code and work with gum objects.
To add a new Screen:
Open the project in the Gum tool
Right-click on the Screens folder and select Add Screen
Name the screen TitleScreen and click OK
The newly created TitleScreen is now in the Screens folder.
We can add instances to Gum Screen by drag+dropping the files onto the Game screen.
Add a Text instance by dropping the Standard/Text onto TitleScreen.
Instances can also be created by selecting the TitleScreen, then drag+dropping the item in the editor window.
Add a ButtonStandard instance by dropping Components/Controls/ButtonStandard onto TitleScreen.
Be sure to select the TitleScreen first, then drag+drop. If you click the component instead, then it will be selected, so you must re-select the TitleScreen.
The Gum tool includes lots of functionality for creating and customizing UI. For a more complete tutorial covering the Gum tool, see the Gum Tool Intro Tutorials. Feel free to spend some time creating your TitleScreen.
To show the screen in game, modify the Initialize method as shown in the following snippet:
The game now displays the Gum screen.
If you attempt to interact with the button, it does not show highlighted/clicked states. This is because we haven't yet passed the Screen to the Update method where UI interaction is performed. We'll make these changes in the next section.
Our code now includes both the Initialize call and the ToGraphicalUiElement call.
The Initialize call is responsible for loading the .gumx file and all other Gum files into memory. This loads only the Gum files and it does not load any additional files such as .pngs or font files. This call only needs to happen one time in your game.
The ToGraphicalUiElement method is responsible for converting the Gum screen into a visual object. It loads all other files referenced by the Screen and its instances such as .png and font files. This method is called whenever you want to show a new GraphicalUiElement, and it may be called multiple times in a game. For example, ToGraphicalUiElement is called whenever transitioning between screens, which we will do in a future tutorial.
The addToManagers parameter results in the screen being added to the Gum rendering system. By passing true for this parameter, the Screen shows up automatically when Draw is called. Remember, Draw was added in the previous tutorial.
Games usually need to interact with Gum screens in code. By convention the Screen is stored in a variable named Root. We can modify the Game project by:
Adding a Root member to Game
Assigning Root when calling ToGraphicalUiElement
Adding the Root to the Update call
The modified code is shown below in the following code snippet:
Notice that we've added the Root as a parameter to the Update call. By doing this, we get the built-in behavior for Forms control such as Button.
More complicated games may have multiple roots, such as situations where UI may exist on multiple layers for sorting or independent zooming. This tutorial does not cover this more-complex setup, but if your game needs multiple Roots spread out over multiple layers, you can pass a list of roots to Update as well.
This tutorial uses Game1 as the container for all Gum members and logic. You may want to move this code into other classes to fit the rest of your game's code structure.
Now that we have our screen stored in the Root object, we can access objects.
We can modify the displayed string by getting an instance of the Text and modifying its properties as shown in the following code:
The code above casts TextInstance to a TextRuntime. Each standard type in Gum (such as Text, Sprite, and Container) has a corresponding runtime type (such as TextRuntime, SpriteRuntime, and ContainerRuntime). Therefore, if we wanted to interact with a Sprite in code, we would cast it to a SpriteRuntime.
We can also interact with Forms objects in code. The base type for all Forms objects is FrameworkElement, so we can use the GetFrameworkElementByName extension method as shown in the following code:
Notice that the code above uses the GetFrameworkElementByName. This code returns an instance of a FrameworkElement (Forms instance). As we'll cover in the next tutorial, only some Components can be used as Forms instances.
This tutorial showed how to load a Gum screen in code and how to interact with objects. The next tutorial discusses Forms controls and explains the difference between GraphicalUielements and Forms controls.
