2. 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 Glue, and we recommend that you create one screen in Gum for every screen in Glue. In fact, the Gum plugin automatically creates Gum screens for us whenever we create a new Glue screen. The Gum screens will be created with the word “Gum” appended to the name of the Glue screen.

For example, let’s consider a simple game which has three screens:

  1. MainMenu
  2. Options
  3. Credits

In this situation the Gum plugin would create the following screens:

  1. MainMenuGum
  2. OptionsGum
  3. CreditsGum

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, Glue 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 Glue 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 Glue screen. To do this:

  1. Open or bring Glue to focus
  2. Right-click on Screens and select Add Screen
  3. Enter the name MainMenu and click OK

You should now have a screen in Glue 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:

  1. Double-click the MainMenuGum file to open it in Gum (assuming you have set up file associations)
  2. Expand the Standard folder
  3. Drag+drop a ColoredRectangle from the Standards folder onto the MainMenuGum item, or into the editing area if the MainMenuGum screen is selected
  4. Move the colored rectangle away from the top-left of the screen
  5. Drag+drop a Text from the Standards into MainMenuGum

You should now have a Text and a ColoredRectangle in your Screen in Gum.

TextAndColoredRectInScreen.PNG

Gum auto-saves your changes (just like Glue) 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.

GumInFrb1.PNG

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.

<- 1. Introduction and Setup — 3. Gum objects in code ->