2. Screens in Gum

Introduction

Now that you have a simple 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 – unless the Glue screen will not have any Gum UI.

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

  1. MainMenu
  2. Options
  3. Credits

In this situation (assuming all three screens will use Gum), you would want to make three Screens in Gum as well, which would be called:

  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, it creates a class also called “MainMenu”. As you’ll see in this tutorial, the Gum screen will be added to the Glue screen, resulting in an object created in the code for this Gum object.

If the Gum screen were also called “MainMenu”, then C# would complain that the MainMenu class (the Glue screen) contains an object with the same name (the Gum screen). Therefore, we get around this problem by always putting “Gum” at the end of any Gum screen.

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”

Next, we’ll create a MainMenuGum screen in Gum. To do this:

  1. Double-click the .gumx file, or open Gum manually and verify that your project is loaded
  2. Right-click on Screens and select “Add Screen”
  3. Enter the name “MainMenuGum” and click OK

Next, let’s add some objects to the Gum screen:

  1. Expand the “Standard” folder
  2. Drag+drop a “ColoredRectangle” from the “Standards” folder onto the MainMenuGum item, or into the editing area if the MainMenuGum screen is selected
  3. Move the coloured rectangle away from the top-left of the screen
  4. Drag+drop a “Text” from the “Standards” into MainMenuGum

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

Adding MainMenuGum to MainMenu (Glue)

Gum auto-saves your changes (just like Glue) so once you’ve made these changes, you do not need to manually save the Screen.

Next, we’ll add the Gum Screen to the Glue screen. To do this:

  1. Switch back to Glue
  2. Expand “Screens”
  3. Expand “MainMenu”
  4. Right-click on “Files” under MainMenu
  5. Select “Add Gum Screen”->”MainMenuGum”AddGumScreenRightClick.png

Now you should have the MainMenuGum screen (which uses the .gusx extension) as part of your Glue screenGumScreenInGlue.PNG

Running your game

At this point, 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 ->