Screens in Gum
Introduction
Now that we have an empty Gum project set up, let's look at how we use screens. Screens in Gum are very similar to Screens in FlatRedBall. By default every FlatRedBall screen has an associated Gum screen. The naming convention for Gum screens is to match the FlatRedBall screen and to append the word "Gum" at the end. For example, let's consider a simple game which has the following screens:
GameScreen
Level1
Level2
CreditsScreen
MainMenuScreen
In this situation the following Gum screens would be created automatically:
GameScreenGum
Level1Gum
Level2Gum
CreditsScreenGum
MainMenuScreenGum
Why do Gum screens have the word "Gum" at the end?: The reason for this is because of a C# limitation where objects with a certain name cannot contain objects with the same name. In other words, when you create a screen in C# called MainMenu, FlatRedBall creates a class also called "MainMenu". If the Gum plugin were to create a Gum screen also called "MainMenu", the project would no longer compile. The Gum plugin avoids this problem by appending the word "Gum" when creating a new Gum screen.
Gum Project Properties
We can control how the Gum plugin behaves by selecting the .gumx file which is located under Global Content Files.
The Show Mouse option automatically turns on the mouse cursor so it is visible on any screen with Gum UI. This is turned on by default. You may want to turn this off if you do not intend to use the mouse cursor in your game. The Automatically Create Gum Screens for Glue Screens option can speed up development since it automatically creates new Gum screens and adds them to your FlatRedBall project. If this option is checked, you may not need to create any Gum screens.
Creating a MainMenu/MainMenuGum screen
First, we'll create a MainMenu FlatRedBall screen. To do this:
Open or bring FlatRedBall to focus
Select the Quick Actions tab
Click the Add Screen/Level button
Check the Empty Screen option since we aren't making a new level
Enter the name Main Menu
Click OK
You should now have a screen in FlatRedBall called MainMenu and a Gum screen called MainMenuGum (assuming you left the Automatically Create Gum Screens for Glue Screens option checked).
Next, let's add some objects to the Gum screen:
Double-click the MainMenuGum file to open it in Gum (assuming you have set up file associations)
Expand the Standard folder
Drag+drop a ColoredRectangle from the Standards folder onto the MainMenuGum item, or into the editing area if the MainMenuGum screen is selected
Move the colored rectangle away from the top-left of the screen
Drag+drop a Text from the Standards into MainMenuGum
You should now have a Text and a ColoredRectangle in your Screen in Gum.
Gum auto-saves your changes (just like the FlatRedBall Editor) so once you've made these changes, you do not need to manually save the Screen. Since the Gum screen was automatically added, you can run your game and you will see the Gum screen showing up in your FlatRedBall game automatically - no code necessary.
At this point, you have the basics working for laying out Screens. In the next tutorial, we'll look at how to interact with Gum objects in code.
Adding Gum to Existing Screens
The example above showed how to add a new FlatRedBall Screen which automatically adds a Gum screen to your project. If you have already created a Screen (such as a GameScreen) before you added Gum to your project, then you must manually add the Gum screen. To do so:
Choose which FlatRedBall Screen should have a Gum screen. For example GameScreen
Open Gum
Add a new Screen to Gum called GameScreenGum
After adding the Screen in Gum, return to the FlatRedBall Editor
Right-click on GameScreen's Files folder
Select Add Gum Screen -> GameScreenGum
To review, if you add a new FlatRedBall Screen *after *having added Gum to your project, you do not need to manually create Gum screens. However, if you have FlatRedBall Screens which were created before having added Gum, then manual steps above are necessary for those Screens.
Last updated
