HUDS and Interfaces

Overview

A simple guide to jumpstart your interface design.

Preface

This is just a quick guide of how to make a working HUD.
First of all, there are some terms you should know:

Fields[www.engine001.com]: Used to show numbers/text/graphics (can also show item/character graphics).

Timers[www.engine001.com]: Used to update HUD information or Global timers.

Sprites[www.engine001.com]: Used in fields to display item/character graphics and decorative overlays.

Dynamic and Static Text Fields

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

• Select the Field icon along the toolbar at the top of the screen and then move your mouse cursor over the Interface and left-click to place it.
• 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.
• Click on the OK button to close the window and return to your Interface.
• Not bad! We’ve created our first field and got it to display some static text to the player…though it’s not very useful is it? Let’s see what we can do about that.

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.

• With the pointer tool selected, right click on your static text field and select edit(or double-click on your field’s name in the panel on the left) to begin.
• Click on the button next to Retrieve Text in the Use Values section (bottom-middle of the window).
• Type time into the Search box at the top of the window and then double-click on the use value under the Main Party / Game section.
• Click on the OK button to close the window and return to your Interface.
• Select the 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.

Graphs

• Add a field to your desired interface. (You can either choose the regular field button in the red box on the left or directly create a graph field on the right.)
• If you chose a regular field, set the field Behaviour to Graph and the shape to Bar.
• If you want the bar to have a fixed maximum size, add a maximum value (if you want a maximum value that is not fixed, set the maximum value in the use values scroll box to your desired value with the square usevalue button)
• Set the desired orientation: vertical or horizontal
• Set the alignment to either the left/right/center if horizontal or top/bottom/center if vertical.
• Adjust the size of the bar with Width and Height.
• Set the field to maintain distance from edge based on the desired placement position. (For example, if it’s on the upper left corner, make edging LEFT and TOP).

  

Works the same as a bar graph for field creation and for retrieving a maximum value.

• After creating your Graph field, set the shape to pie.
• Set orientation to CENTER. Alignment doesn’t matter here.
• Set width and height to the same value (or it won’t be a circle).
• You also must pick Start and End Angles. The left one is the minimum value, and the right one is the max.

  

Creating a rotating dial is completely similiar to creating a Pie Graph.

• After creating your Graph field, set the shape to pie.
• Set orientation to CENTER.
• Set width and height value based on what shape dial needle you want.
• You also must pick Start and End Angles. The left one is the minimum value, and the right one is the max.

  

Static Sprites and Health Units Fields

Text isn’t the only thing fields are used for. More often than not, they’re used to display sprites as well.

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

• Add a field and set it to behaviour Unit or select the Units tool in the interface editor.
• Set the Retrieve value use value to Actor(main)HP to show one icon for each HP point of the main actor’s health points. Setting a maximum value will make missing units to be half-visible.
• Width and Height estabilish the number of rows and columns based on the sprite’s original dimensions.