Multiple Screens

Introduction

So far we've been working with a single Screen. This tutorial covers how to work with multiple screens, including how to add and destroy screens in response to UI events.

Creating Multiple Screens

Before we write any code, we'll create two screens. A real game might have screens like a TitleScreen, OptionsScreen, GameScreen (which includes HUD and a pause menu), and a GameOverScreen. For this tutorial we'll create two simple screens, each with a single button and a Text.

First we'll create Screen1:

1. Add a new screen named Screen1

2. Drag+drop a Text standard element into Screen1

3. Set the Text property on the newly created TextInstance to Screen 1 so that you can tell that you are on Screen1 when it is active in your game

4. Drag+drop a ButtonStandard component into Screen1

5. Set the Text property on the newly created ButtonStandardInstance to Go to Screen 2

6. Arrange the two instances so they are not overlapping

Next we'll create Screen2:

1. Add a new Screen named Screen2

2. Drag+drop a Text standard element into Screen2

3. Set the Text property on the newly created TextInstance to Screen 2 so that you can tell that you are in Screen2 when it is active in your game

4. Drag+drop a ButtonStandard component into Screen2

5. Set the Text property on the newly created ButtonStandardInstance to Go to Screen 1

6. Arrange the two instances so they are not overlapping

Modifying Game1

Next we'll make the following modifications to Game1:

• Change the first screen to Screen1

• Make the Root property public static so that it can be accessed by the Screens

The first part of your Game1 class might look like the following code:

public class Game1 : Game
{
    private GraphicsDeviceManager _graphics;
    GumService Gum => GumService.Default;    

    public Game1()
    {
        _graphics = new GraphicsDeviceManager(this);
        Content.RootDirectory = "Content";
        IsMouseVisible = true;
    }

    protected override void Initialize()
    {
        var gumProject = Gum.Initialize(
            this,
            // This is relative to Content:
            "GumProject/GumProject.gumx");

// Start of new code
        var screen = gumProject.Screens.Find(item => item.Name == "Screen1");
// End of new code

        var screenRuntime = screen.ToGraphicalUiElement();
        screenRuntime.AddToRoot();

        base.Initialize();
    }
    ...

Modifying Screen1Runtime and Screen2Runtime

Now we can modify both Screen1Runtime.cs and Screen2Runtime.cs to include code that links from one to the other as shown in the following code:

partial class Screen1Runtime : Gum.Wireframe.GraphicalUiElement
{
    partial void CustomInitialize()
    {
        this.GetFrameworkElementByName<Button>("ButtonStandardInstance").Click += (_, _) =>
        {
            GumService.Default.Root.Children.Clear();
            var screen = ObjectFinder.Self.GumProjectSave.Screens.Find(
                item => item.Name == "Screen2");
            var screenRuntime = screen.ToGraphicalUiElement();
            screenRuntime.AddToRoot();
        };
    }
}

partial class Screen2Runtime : Gum.Wireframe.GraphicalUiElement
{
    partial void CustomInitialize()
    {
        this.GetFrameworkElementByName<Button>("ButtonStandardInstance").Click += (_, _) =>
        {
            GumService.Default.Root.Children.Clear();
            var screen = ObjectFinder.Self.GumProjectSave.Screens.Find(
                item => item.Name == "Screen1");
            var screenRuntime = screen.ToGraphicalUiElement();
            screenRuntime.AddToRoot();
        };

    }
}

Each screen removes itself from managers when its button is clicked, then creates and adds the next screen to managers.

Showing No Screen

This tutorial assumes that a Gum screen is always displayed.

Games can also completely remove Gum screens altogether. To do this, do not create a new screen after calling GumService.Default.Root.Clear();

Conclusion

This tutorial showed how to switch between two screens by removing the old screen with RemoveFromManagers and creating a new screen with ToGraphicalUiElement.