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 an incredibly fluid UI development environment.

Downloading Gum

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

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

Installing the Gum Plugin

The next step is to install the Glue plugin that enables Gum integration. This plugin is installed just like any other Glue plugin:

  1. Go to the GlueVault page to download the plugin here: http://www.gluevault.com/plug/81-gum-plugin-glue
  2. Follow these steps to install the .plug file: How to install a plugin.

Gum projects

As mentioned above, Gum is a general-purpose UI tool. When working with Gum, just like when working with Glue, you must create a Gum project. This Gum project will reference all of the UI components in your game. Specifically, Gum projects reference Screens, Components (which are similar to Entities in Glue), and “Standard Elements” (which are default setup for common objects).

Therefore, the first step to work with Gum is to create a Gum project. To do this:

  1. Create a new Glue project (We’ll use XNA 4.0 PC)
  2. Once your project is open, click “Close” to close the download progress bar, then switch back to Glue
  3. Select Content->”Add New Gum Project”
    ContentAddNewGumProject.png

“Add New Gum Project” doesn’t show up: If Add New Gum Project doesn’t show up, 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, or if you have the file association set up for the .gumx file with Gum, you can simply double-click the .gumx file in Glue and it will open up Gum. You are strongly encouraged to do this as you will often need to switch back and forth between Gum and Glue, and double-clicking the .gumx file in Glue makes this work flow very simple.

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 familiarise 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 ->