XP Gauge Settings
Getting Started
Double-click the XP Gauge Assets (elements) in the Design Editor or select the XP layer in the right layer panel to open the XP Gauge (XP) settings panel on the left.
- The XP Gauge is an area that displays the progress of XP earned by participants as they complete missions.
- Participants can use the XP Gauge to check their progress from the current level to the next level.
- The XP Gauge consists of sub-elements such as progress text, the gauge color bar (Gauge Color bar), gauge background (Gauge bg), and gauge outline (Gauge bg line).
Setting Option
In the Setting Option section of the XP Gauge (XP) settings panel, set the gauge size (XP Size) of the XP Gauge.
- In the XP Size section, select the size of the XP Gauge from Small, Medium, or Large.
- Changing XP Size changes the default display size and design format of the XP Gauge based on the selected size.
- The XP Gauge designs shown in the Assets (elements) list on the left may vary depending on the selected XP Size.
- After changing the XP Gauge size, make sure it does not overlap surrounding elements such as the Level Board, Level Character, or Mission List.
Changing the XP Gauge
In the Assets (elements) list of the XP Gauge (XP) settings panel on the left, select the XP Gauge Asset (element) to use.
- When an Asset (element) is selected, the previous XP Gauge Asset (element) is replaced with the selected Asset (element).
- Changing the XP Gauge Asset (element) changes the gauge layout and design based on the selected Asset (element).
- The gauge bar color, background color, and outline style of the XP Gauge can be edited by selecting the corresponding sublayers in the right layer panel.
- The progress text displays the participant's XP progress. The actual progress value cannot be changed by entering it directly in the editor.
XP Gauge Setting Restrictions
Under the XP layer in the right layer panel, detailed elements that make up the XP Gauge can be selected.
- % section : A text area that displays the participant's current XP progress percentage.
- Gauge Color bar : A gauge bar area that uses color to display the progress of XP earned by the participant.
- Gauge bg : The background area of the XP Gauge.
- Gauge bg line : The outline or line area of the XP Gauge background.
Because the XP Gauge uses a dedicated structure for displaying progress, changing the % value text within the XP Gauge and adding arbitrary images under the XP layer are restricted.
XP sublayer
Screen showing restrictions on editing % text
XP sublayer
Screen showing restrictions on adding external images
Because the XP Gauge uses a dedicated structure for displaying progress, changing the % value text within the XP Gauge and adding arbitrary images under the XP layer are restricted.
XP sublayer
Gauge Color bar color settings screen
XP sublayer
Gauge bg color settings screen
Position
To set the Align (alignment), Location (position), and Layer Order (front/back order) of the selected XP Gauge Asset (element), use the Position section of the XP Gauge (XP) settings panel.
In the Align section, click an alignment icon button to align the selected XP Gauge Asset (element) to the left, center, right, top, middle, or bottom.
In the Location section, set the X/Y position coordinate values of the selected XP Gauge Asset (element).
- Use mouse drag&drop to move it directly to the desired X/Y position coordinates.
- Use keyboard shortcuts to set the X/Y position coordinates of the selected XP Gauge Asset (element).
| Function | Window | MAC |
| Move up by 1px | Up(↑) | Up(↑) |
| Move down by 1px | Down(↓) | Down(↓) |
| Move left by 1px | Left(←) | Left(←) |
| Move right by 1px | Right(→) | Right(→) |
| Move up by 10px | shift + Up(↑) | shift + Up(↑) |
| Move down by 10px | shift + Down(↓) | shift + Down(↓) |
| Move left by 10px | shift + Left(←) | shift + Left(←) |
| Move right by 10px | shift + Right(→) | shift + Right(→) |
Use Layer Order to set the front-to-back arrangement of items on the canvas relative to the selected XP Gauge Asset (element) (Forward, Backward, To front, To back).
- Forward : Moves the selected item forward by one level
- Backward : Moves the selected item backward by one level
- To front : Moves the selected item in front of all other items on the canvas
- To back : Moves the selected item behind all other items on the canvas
- The front-to-back arrangement of items in the editor can also be set by using mouse drag&drop in the right layer panel.
- The front-to-back arrangement of the selected XP Gauge Asset (element) can also be set using keyboard shortcuts.
| Function | Window | MAC |
| Move forward by one level | Ctrl + ] | ⌘ + ] |
| Move backward by one level | Ctrl + [ | ⌘ + [ |
| Move to front | Ctrl + shift + ] | ⌘ + shift + ] |
| Move to back | Ctrl + shift + [ | ⌘ + shift + [ |
Size
Use the Size section of the XP Gauge (XP) settings panel to set the size values (width and height) of the selected XP Gauge Asset (element).
- When the XP Gauge Asset (element) is selected, use the mouse to drag the corner points and handles to adjust the size of the selected Asset (element).
- Adjusting the size of the XP Gauge may also change the display proportions and alignment of the progress text, gauge color bar, and gauge background.
- After changing the XP Gauge size, make sure the progress text and gauge bar do not overlap or extend beyond the canvas.
| Function | Window | MAC |
|
Resize freely |
Drag a corner point | Drag a corner point |
|
Resize proportionally |
Shift + drag a corner point | Shift + drag a corner point |
|
Resize along the selected axis |
Drag a side handle | Drag a side handle |
Flip
Use the Flip section of the XP Gauge (XP) settings panel to flip the selected XP Gauge Asset (element) vertically or horizontally.
- Vertically : Flips the selected XP Gauge Asset (element) vertically.
- Horizontally : Flips the selected XP Gauge Asset (element) horizontally.
Style
Use the Style section of the XP Gauge (XP) settings panel to set the opacity and rotation angle of the selected XP Gauge Asset (element).
- Appearance : Sets the opacity of the selected XP Gauge Asset (element).
- Angle : Sets the rotation angle of the selected XP Gauge Asset (element).
