3. Gum objects in code

Introduction

So far we’ve covered how to create a new Gum project in your Glue project and how to add Gum screens to your Glue screens. This gets us a considerable amount of functionality already, but it’s very likely that you’ll need to interact with Gum objects in code. For example, you may use code to dynamically set the visibility of certain UI elements according to the game’s state.

This tutorial will explain how to work with the GraphicalUiElement in code – the class that is at the heart of Gum. For information on how to fully create a component in code (as opposed to relying on its creation in Gum), see this page.

Adding Objects in Glue

If you’ve been following along the previous tutorials, then you should have a Screen that has two Gum objects: a Text and a ColoredRectangle.

For this tutorial will make some modifications to the ColoredRectangle in our custom code.

The first step is to create a Glue object. To do this:

  1. Open or bring Glue into focus
  2. Expand “Screens”
  3. Expand “MainMenu”
  4. Right-click on “Objects”
  5. Select “Add Object”
  6. In the New Object window, select the “From File” option
  7. Select the .gusx file
  8. Use the dropdown next to “Source Name:” to select “ColoredRectangleInstance”
  9. Enter the name “ColoredRectangle”
  10. Click OK
    NewColoredRectangleFromGum.png

Note that the “Source Name:” drop down contains all instances in your Gum project. We selected the ColoredRectangleInstance for this example, but you could select any instance when working on an actual game.

Once you click OK, you should see the object under your MainMenu screen in Glue:

ColoredRectangleInMainMenu.PNG

Note that the ColoredRectangle in Glue is not a new ColoredRectangle instance – it is a reference to the ColoredRectangle inside the MainMenuGum screen. Adding it here in Glue allows code to access and modify this object, as we’ll see in the next step.

Accessing Gum objects in code

Now that we have a ColoredRectangle under our Glue MainMenu screen, we can simply access the ColoredRectangle in the code the same way we access any other object. For example, to set the ColoredRectangle’s Y value to 250, you can add the following code to your MainMenu’s CustomInitialize. To do this:

  1. Open your Visual Studio project
  2. Navigate to MainMenu.cs (which will be in your Screens folder in Visual Studio)
  3. Modify CustomInitialize so it looks like this:

Similarly, objects from Gum can be modified in CustomActivity. You can modify your MainMenu’s CustomActivity so it looks like this:

MovingColoredRectangleFromGum.png

Gum Coordinate System

I’ve you’ve spent some time in Gum you may notice that the coordinate system in Gum behaves differently than the coordinate system in FlatRedBall. By default (0,0) is located at the center of the screen in FlatRedBall, but (0,0) represents the top-left corner of the screen in Gum.

Also, increasing the Y value of an object will move it up in FlatRedBall, but increasing the Y value of a Gum object will move it down. You can try this by modifying your code to change the Y of the ColoredRectangle in CustomActivity.

When used with Glue, Gum objects will behave identically to how they behave in the Gum tool. This not only applies to Y positioning but as we will see in later tutorials with position and width unit types as well.

Conclusion

This tutorial has shown how to access objects from Gum in code. Just like objects from FlatRedBall file types (like .scnx and .shcx), Glue will generate objects which we can edit in code with full compile-time protection and Visual Studio IntelliSense.

The next tutorial will show you how to use UI events (such as Click) on Gum components.

<- 2. Screens in Gum — 4. Events on Gum Objects ->