Unity RTS Engine

  2. Home
  4. Unity RTS Engine
  6. UI Manager

UI Manager

The UI Manager component manages all UI objects in the game. It is highly recommended to use the UI canvas and UI objects that are pre-created in the demo scene or the ones that come when creating a new map using the RTS Engine menu editor and modify them.

When you’re creating a new map using the RTS Engine menu editor, this component is attached to an object called “UIManager”.

Menus:

  1. Winning Menu: a UI panel activated when the player has won the game.
  2. Losing Menu: a UI panel activated when the player loses the game.
  3. Pause Menu: a UI panel activated when the player pauses the game.
  4. Freeze Menu: a UI panel activated when the game is frozen (in multiplayer when waiting for other players).

 

Tasks:

  1. Task Buttons: Task buttons are the buttons that appear when the player selects a unit or a building that has tasks. Each button corresponds to a task and all buttons must be children of the same object that is the “Task Buttons Parent”. The parent object should have a “Grid Layout Group” component. Using your desired settings for that component, all the task buttons will be arranged inside the grid layout. You only need to pre-create one task button that will be cloned as many times as the amount of the tasks. Create a new UI Button object and make it a child of the “Task Buttons Parent” object and drag and drop it to the “Base Task Button” field then apply the below settings to it:
    1. Add the Task UI component to it.
    2. In the “On Click” event of the “Button” component, drag and drop the base task button as the event source and set the event to “Task UI” -> “OnTaskClick”.
    3. Add an “Event Trigger” component to the base task button object. Add a “Pointer Enter” event type, have the base task button as the source and set the event to “Task UI” -> “ShowTaskInfo”. Add a “Pointer Exit” event type, have the base task button as the source and set the event to “Task UI” -> “HideTaskInfo”.
  2. Task Parent Categories: These categories allow to organize different categories in the task panel. To use them you need to set “Use Task Parent Categories” to true and then create the categories just like the “Task Buttons Parent” above and place them in the “Task Parent Categories” list. Each category’s ID is its index in that list. When asked to input the task buttons parent category in another component, input the ID you wish in that field or simply input -1 if you are not using this option and want all the tasks under the same parent.

In Progress Tasks:

  1. First In Progress Task Button: A UI Button that corresponds to the task that is currently progressing. This comes also with a possibility of having a bar that indicates its progress. So you can create a full and an empty bar and make them children of the “First In Progress Task Button” and drag them to their respective fields.
  2. Base In Progress Task Button: A UI Button that corresponds to the second in progress task and so on.
  3. For both the base and first in progress task buttons, add the Unit Task UI component. And in the “On Click” event in the “Button” component, have the event source as the button itself and set the event to: Unit Task UI -> “CancelInProgressTask”.
  4. In Progress Task Buttons Parent: Create a UI object to be the parent object of all the in progress task buttons expect the First In Progress Task Button and drop it in this field. This object should have a “Grid Layout Group” component. Using your desired settings for that component, all the task buttons will be arranged inside the grid layout. Make sure that the Base In Progress Task Button is a child of this object.

Single Selection UI:

Single Selection Menu: Below are a series of game objects that define the selection menu which is activated when a player selects one unit or a building and displays its info:

  1. Single Selection Parent: The UI object that is activated when the player selects a single unit, a building or a resource. This object is the parent object of all the rest of the UI elements that form the single selection menu.
  2. Selection Name: UI Text that displays the name of the selected item.
  3. Selection Description: UI Text that displays the description of the selected item.
  4. Selection Health: UI Text that displays the health of the selected item.
  5. Selection Icon: UI Image that displays the icon of the selected item.
  6. Selection Health Bar: Add both an empty and a full health bars to display the health.
  7. Multiple Selection UI: In case more than one unit has been selected, then the Multiple Selection menu will be shown:

Multiple Selection UI:

  1. Base Multiple Selection Icon: Create a UI image that has the Unit Task UI component. Create two UI images as an empty and a full health bar and make them children of this object. Then drag and drop each bar into its field in the Unit Task UI inspector.
  2. Multiple Selection Icons Parent: Create a UI object to be the parent object of all the Multiple Selection Icons. This object should have a “Grid Layout Group” component. Using your desired settings for that component, all the icons buttons will be arranged inside the grid layout. Make sure that the Base Multiple Selection Icon is a child of this object.

Building Upgrade UI:

  1. Building Upgrade Button: Create a button that will act as the building upgrade launcher and:
    1. Add the Unit Task UI component to it with the “Upgrade Building” task type.
    2. In the “On Click” event of the “Button” component, drag and drop the button as the event source and set the event to Unit Task UI -> “Upgrade Building”.
    3. Add an “Event Trigger” component to the button object. Add a “Pointer Enter” event type, have the upgrade button as the source and set the event to Unit Task UI -> “ShowTaskInfo”. Add a “Pointer Exit” event type, have the UI Manager as the source and set the event to UI Manager -> “HideToolTip”.
  2. Building Upgrade Bar: Add both an empty and a full health bars to display the building upgrade progress.
  3. Building Upgrade Progress: The text displays the progress of the building upgrade in percentage.

Hover Health Bar:

  1. Enable Hover Health Bar: When enabled, hovering the mouse over units/buildings will display a health bar over them.
  2. Player Faction Only: When enabled, then the hover health bar will only appear for friendly units and buildings.
  3. Hover Health Bar Canvas: The hover health bar is placed in another canvas that has “World Space” in the “Render Mode” and that has the Hover Health Bar component attached to it.
  4. Hover Health Bar: Add both an empty and a full health bars as child UI objects of the above canvas.

Tooltips:

  1. Tooltip Panel: a UI panel that is activated when hovering over UI elements that triggers the a tooltip.
  2. Tooltip Msg: UI Text object, child object of the above Tooltip panel used to display the tooltip message.

To make a UI object trigger a tooltip when the mouse is over it. Attach an Event Trigger component to that UI object:

  1. Add an “Pointer Enter” event type, have the UI Manager as the source and set the event to UI Manager -> “EnableTooltip” and pass the tooltip message as an argument.
  2. Add a “Pointer Exit” event type, have the UI Manager as the source and set the event to UI Manager -> “HideToolTip”.

UI Messages:

  1. Population Text: UI Text that shows the player’s faction population.
  2. Player Message: Messages about having not enough resources or reaching the maximum population or any other type of message that the player need to see will be shown in the “Player Message” UI Text.
  3. Player Message Reload: How long should each message be displayed for?
  4. Peace Time: The peace time corresponds to the duration when the factions can’t attack each other at the beginning of a game. The peace time is shown in the “Peace Time Text” (UI Text). While the game is still in peace, the “Peace Time Panel” will be active.

Custom Faction UI:

Using the above array, you can have a different sprite for UI Image objects depending on the faction that the local player is using. Each element of the Faction UI array will have an Image field where you drag and drop the image that you want to be customized depending on the faction type and for each element of that array, you can enter each faction code and the sprite that will be used.

How can we help?