Skip to content

UI Guide

This guide will be written in the context of WHS but the setup of these dialogs is similar throughout the Stratkit related teams. Plus helps to maintain consistency.

This guide will serve as a the swiss army knife of finding what you need and where for working on your UI dialogs within the Stratkit-sphere. It will cover:

  • Gameobject Setup
  • View logic script
  • Recommended ways to instantiate your dialog

Each section mentioned above will then go into further details of specific components related to that area.

Gameobject Setup

Start with an empty scene to give yourself space to design your dialog and create a new Canvas object in there. Ignore EventSystem, we just care about the Canvas guy there.

gameobjectsetup.png

You can already make this object a prefab here, find a location in the project window and spot the area that's seen as an addressables group so that it can be associated as an asset bundle.

In WHS context, this can be found in AssetBundles/StreamingAssets/UI. Then see if there's an existing folder related to your dialog or perhaps you need to create a new folder for it. If you do create a new folder, remember to add it in the StreamingAssets group.

streamingassetsfolder.png

All the dialogs will have their canvas' render mode set to Screen Space - Camera so go ahead and change that.

camerarender.png

The gameobject with the canvas on it should have with it the Canvas Scaler component. This makes our dialogs more responsive to various screen sizes. The settings that we have for this work for us are the following:

canvasscaler.png

We set the screen matching mode to be Match Width or Height, and being a landscape game, you’d work with the Match value to be height.

One other component that is required in the gameobject is a Canvas Group as this will help the UIService component to layer the dialogs according to the priority assigned to it. The UI group will be explained later during the script setup.

Suggestion: Graphic Raycaster blocking mask should be limited to "Default & UI"?

Now from here you're free to go two directions, start working on your dialog script or start designing your dialog inside Unity! Either or, it's up to you!

Designing the dialog

With your canvas up, you can start working on your design. With your team you probably have a UI designer who provided a mockup on Figma and they would have set up that design based off common assets that they prepared themselves! So we need to work with those handy tools.

The way your dialog's base structure should be is first to have:

  • Background Mask: A non-visible layer that is clickable to have a defocus layer. Stretchable throughout the screen
  • Dialog Holder: A container for the dialog you're designing. Use this position the dialog where you'd want it on the screen and size it how you'd see fit

recommendedstructure_01.png

WHS Context

From here, those handy assets can be found in two locations: Common and DialogTemplates.

  • Common: All the reusable prefabs and sprites such as icons and info dialogs
  • DialogTemplates: The base templates for your dialog. Separated into:
  • Dialog-Base-Large & Dialog-Base-Small
  • Just drag a template to your canvas' holder and you can start on your design whscontext_01.png What's good to know is that we have some very handy buttons which you will most likely have to add. Based off size and colour. whscontext_02.png

A general standard set on the colour usage is the following:

  • Blue: Standard action (e.g. open Province Dialog)
  • Green: Accept or Positive action (e.g. "Yes" confirm dialog or could be a positive army action)
  • Red: Decline or Aggressive action (e.g. "No" confirm dialog or attack command)
  • Yellow: Premium Action (e.g. Speed up construction)

Within WHS, we have a ScriptableConfigSingleton known as UiCommonViewReferenceContainer which contains some common dialog prefabs usable by the client as seen in the image below.

An ECS system can be used to spawn these dialogs from this singleton, but from another dialog, you could simply pass a reference of that prefab.

whscontext_03.png

Bonus tips

Aspect ratio

Make sure to use the same aspect ratio in your canvas scaler as the one used in the figma page, otherwise it will be very difficult to perfectly align your ui to the original design:

aspectratio_01.png

Also, while working on the ui, set the same resolution to the game view, as that will scale the canvas to this resolution, ensuring your view has a pixel-perfect match in sizes to the original figma design:

aspectratio_02.png

9-slicing

Sometimes, it could be difficult to precisely set up your 9-slices as transitions will appear smooth in the sprite editor:

9slice_01.png

To fix this, change the filter mode of the sprite to point – this will ensure there is no filtering, and all transitions are crisp and sharp:

9slice_02.png 9slice_03.png

Don’t forget to switch the filtering back to the original value when done!

Link to Scripting