Interfaces: Beginner's Guide

Interfaces are a vital part of game creation and in this tutorial you'll learn the basics of Interfaces so that you can start making use of them in your projects.

Creating an Interface

1. Select the tab, from the bottom-left corner of the screen, and then click on the New button besides it.
2. Enter an appropriate name in the Display Name text box and then click on the OK button.

Tada! It's a simple as that. You've just created your first Interface!

Creating a Static Text Field

Now that we've created our first Interface, we need to add something to it. Let's start by adding a static text field.

1. Select the Field icon along the interface toolbar and then move your mouse cursor over the Interface and left-click to place it.
2. By default the Initial Text text box (left of the window) will display the text: Field. Let's change this value to Hello instead. A preview window on the right will display these changes.

3. Click on the OK button to close the window and return to your Interface.

Enhancing a Field with Dynamic Text

Now that we've created our first field, let's get it to retrieve and display some useful information to the player. For this, we're going to retrieve and display the total time played.

1. With the Field tool selected, click on your static text field (or double-click on your field's name in the panel on the left) to begin editing it.
2. Click on the button next to Retrieve Text in the Use Values section (bottom-middle of the window).
3. Type time into the Search box at the top of the window and then double-click on the Amount Time Played (00:00:00) use value under the Main Party / Game section.
4. Click on the OK button to close the window and return to your Interface.
5. Select the Play button along the toolbar at the top of the screen to see your dynamic text field in action.

It's important to note that the field won't update in the editor itself, as it can only retrieve and display the total time played while the game is running.

Creating a Static Sprite Field

Text isn't the only thing field's are used for. More often than not, they're used to display sprites as well. Let's create one.

1. Create a Static Sprite field by selecting the tool along the toolbar at the top of the screen, moving the mouse cursor over the Interface and left-clicking to place it.
2. Click on the "(None)" button next to Sprite (left of the window) and select a sprite from the resource window that pops up.
3. Click on the OK button to close the window and return to your Interface.

Creating a Window Field

Window fields are very similar to Static Sprite fields with the exception that they're able to do special scaling and tiling in order to produce a window-like effect.

1. Create a Window field by selecting the tool along the toolbar at the top of the screen, moving the mouse cursor over the Interface and left-clicking to place it.
2. Click on the "(None)" button next to Sprite (left of the window) and select a sprite from the resource window that pops up. For this tutorial I've selected Window Background from the Interfaces folder.
3. Set the Width / Height of the field (top-left of the window) to the width of the default screen resolution. For this tutorial, I've set the Width to 640 and the Height to 100.
4. Set the Maintain Distance From Edge (top-middle of the window) to the Bottom, Left and Right positions.
5. Click on the OK button to close the window and return to your Interface.

This is a good example of showing how Window fields differ from Static Sprite fields. Notice how the sprite has re-sized to our custom width/height without becoming distorted? That's because the engine has automatically scaled and tiled the sprite to fit our custom dimensions. Had we set this up as a simple Static Sprite field, we would have seen a lot of stretching and distortion going on (as the comparison below shows):


The Maintain Distance From Edge options are used to anchor the field to the sides specified. If we decided to change the default resolution, the Window field would automatically re-size to fit our new resolution. Pretty neat, huh?

Creating a Bar Graph/Pie Chart

Bar graphs and pie charts are extremely useful for displaying different types of information without displaying just plain text. For this tutorial, we're going to create a bar graph and a pie chart that display the player's current health (HP).

To display the player's health (HP) as a bar graph:

1. Create a Graph field by selecting the tool along the toolbar at the top of the screen, moving the mouse cursor over the Interface and left-clicking to place it.
2. Select Bar from the Shape drop down menu (in the middle of the window).
3. Set the Width / Height of the field to 200 / 25 to display a long, thin horizontal bar.
4. Set the Alignment (left of the window) to the Left-Middle position.
5. Select an appropriate Color in the Visual section (bottom-left of the window) with the Normal tab selected. For this tutorial, I chose RGB (R:255, G:0, B:0) for both Color1 and Color2.
6. Click on the button next to Retrieve Value in the Use Values section.
7. Type health into the Search box at the top of the window and then double-click on the Health use value under the Actor section.
8. Select (Main) from the list and then click on the OK button to close the window.
9. Then do the same for the Retrieve Maximum use value except this time double-click on the Maximum Health use value.
10. Click on the OK button to close the window and return to your Interface.

To display the player's health (HP) as a pie chart follow the steps above with exception to steps 2, 3 and 4 - follow these steps instead:

1. Select Pie from the Shape drop down menu (in the middle of the window).
2. Set the Width / Height of the field to 100 / 100 to display a even-rounded circle.
3. Set the Start and End Angles (underneath the Shape drop down menu) so that they're both facing directly upwards (hold down the Shift key to snap the dials to the appropriate positions).

By default the Initial Value / Maximum property will be set to 5 / 10 which will make the bar graph/pie chart display at only half the size in the editor. It's important to note that these values will automatically change to the player's health/maximum health (HP) whilst in-game. If you want your bar graph/pie chart to display at full size in the editor, just change these values so that they're both the same (10 / 10).

Making a Loading Screen

Now it's time to use what we've leant above to create a loading screen that will show up whenever parts of your game need to be loaded.

Creating a loading screen using dynamic text:

1. With the Interfaces tab selected, click on the New button (to the right), enter an appropriate Display Name and then click on the OK button.
2. Create a Text / Graphic field, click on the button next to Retrieve Text in the Use Values section, type progress into the search box and double-click on Current Progress (0 to 100).
3. Manually add & "%" after Loading.Progress100 so that it reads as Loading.Progress100 & "%"
4. Click on the OK button to close the window and return to your Interface.
5. Now click on the Game Settings icon, along the main toolbar at the top of the screen, and select your Interface from the Loading Screen drop down menu (right of the window).

Step 3 introduced something new that hasn't yet been discussed. This is known as Use Value Scripting and is extremely powerful but also exceeds the scope of this tutorial so I'll just explain what we've written actually does. The use value we've used Loading.Progress100 will only return a number from 0 to 100 - so we're telling the engine to retrieve that number and then add on a percentage sign (%) so that instead of looking like this: 50, it will instead look like this: 50%.

Creating a loading screen using a bar graph:

1. With the tab Interfaces selected, click on the New button (to the right), enter an appropriate Display Name and then click on the OK button.
2. Create a Graph field, select Bar from the Shape drop down menu, set the Width / Height to 320 / 32 and set the Alignment to the Left-Middle position.
4. Click on the button next to Retrieve Value in the Use Values section, type progress into the search box and double-click on Current Progress (0 to 100).
5. Click on the OK button to close the window and return to your Interface.
6. Now click on the Game Settings icon, along the main toolbar at the top of the screen, and select your Interface from the Loading Screen drop down menu (right of the window).

Making a HUD

By far the most important Interface for any game has to be the Heads Up Display (or HUD for short). A typical HUD will display stats/information to the player at a moments glance. In an RPG, you'll often see a player's HP, MP, Gold and the Item they're holding. In a Platformer you might see the player's Score or a Timer counting down. There are many different HUD configurations and they will all vary depending on the type of game you're making. For this tutorial, we're going to be looking at some of the basics:

With the Interfaces tab selected, click on the New button (to the right), enter an appropriate Display Name and then click on the OK button.

Display the amount of money the player has:

Create a Text / Graphic field, click on the button next to Retrieve Text in the Use Values section, type money into the search box and double-click on Amount of Money in the Main Party / Game section.

Show the weapon the player is holding:

1. Create a Text / Graphic field, click on the button next to Retrieve Text in the Use Values section, type graphic into the search box and double-click on in the Items/Magic section.
2. Click on the button besides Item/Magic, click on the button in the bottom-left corner of the window, type equip into the search box and double-click on in the Actor section.
3. Select (Main) from the list at the top and then select Weapon from the list underneath it and click OK until you return to the field window.
4. Click on the button besides Retrieve Visibility, type not into the search box and double-click on Not Equal.
5. Click on the button besides Value 1, type equip into the search box and double-click on in the Actor section.
6. Select (Main) from the list at the top and then select Weapon from the list underneath it and click OK.
7. Click on the button besides Value 2, double-click on (Value) at the top of the use value window and click OK until you return to your Interface.

The Retrieve Visibility use value is especially important here because we only want the engine to retrieve the currently held weapon if one is actually selected. Otherwise, without this use value, it will continuously error as it's trying to find a weapon that the main player isn't holding.

Congratulations! You've successfully created a HUD that displays the player's health (HP), the amount of money they have and the current weapon they're holding. There's just one last thing we need to do:

Click on the Game Settings icon, along the main toolbar at the top of the screen, and select your Interface from the Default HUD drop down menu (right of the window).