1. Introduction and Setup

Introduction

Gum is an open source, general purpose, platform-agnostic UI layout tool. Although Gum itself is not built to be used with any game engine in particular, this tutorial will cover using Glue’s Gum plugin to use Gum files in your Glue project. Combining Gum with Glue results in a fluid UI development environment.

For information on using Gum as a standalone UI tool for any type of project, see the Gum documentation.

Downloading Gum

The first step in using Gum is to download the project. Gum can be downloaded here.

You will also need to install the XNA 4.0 Redistributable on your machine to run Gum.

Once you have downloaded the zip file, unzip it. Remember this location, we’ll need it later.

Gum projects

For this tutorial we will be adding a Gum project through Glue. If you have an existing Gum project, you can also add it to your project by adding the .glux file to GlobalContent. We won’t be covering this method here as it is a rare situation. In most cases you’ll add a new Gum project right away.

Option 1 – Adding Gum Projects in Glue Wizard

Gum can be added using the Glue wizard. The Glue wizard is only available if your project is completely empty. To add a Gum project through the Glue wizard:

  1. Click the Run Glue Wizard button in the Quick Actions tab

  2. Proceed to the UI tab. Notice that Add Gum and Add FlatRedBall.Forms are both checked. We recommend keeping both checked.

  3. Proceed through the rest of the wizard and click Done

Option 2 – Gum Toolbar Button

If you do not want to run the Glue wizard, or if your project already has Screens or Entities (the Glue wizard only appears for completely empty projects), you can add Gum through the toolbar button

  1. Click the Gum toolbar button. If you do not have a Gum project, notice the + icon

  2. When asked, select the option to Include Forms Controls (Recommended)

Troubleshooting Missing Gum Options: If you do not see any of the options shown above, you can verify that the plugin has installed correctly and that it is running through the Manage Plugins Window.

Once you have added a new Gum project you should see it under Global Content Files:

GumProjectInGlobalContent.PNG

Editing the Gum Project

The .gumx project (which means Gum XML) is the root project. It can be opened in Gum.

If you have the file association set up for the .gumx file with Gum, you can click the Gum icon or double-click the .gumx file to open Gum. This is the same icon which was previously used to add a new Gum project.

Setting up file associations is recommended since it makes opening Gum much faster.

Don’t associate Launcher.exe with your files: Instead, associate Gum.exe to gum file formats (gumx, gucx, gusx)  Launcher.exe exists when running Gum manually to check for prerequisites.

Once you open up the .gumx file in Gum, you should see a screen like this:

EmptyGum.PNG

Learning to use Gum

Gum is a very powerful tool with lots of functionality. This tutorial assumes that you are familiar with using the tool. If you’re not, then you will want to take a look at the usage guide for Gum, which can be found here.

You should take some time to familiarize yourself with the tool, as the tutorials in this series will focus specifically on how to use Gum with Glue and FlatRedBall.

Conclusion

If you’ve gotten this far then you have a Gum project which is ready to be used with Glue. Next, we’ll cover some of the basics of working with Gum in Glue.

— 2. Screens in Gum ->