Chest UI
The polished user-interface.
The initial prototype
In a project I am working on, I needed a suitable user-interface for opening a chest. The premise is: when opening a chest, you are presented with the item you have found. This will then show the item's name, and then a description of what the item does.
So I started by just implementing two text blocks, one for the title and one for the description. This is then surrounded with a border.
Below are two buttons, which are custom widgets that are commonly used throughout the project.
Pressing "Get Item" will give you the item, and discarding the item will delete it.
Items are stored in a data asset. The data asset contains things like: the item's name, the item's description, a thumbnail, the model that represents the item, etc.
These can all be used to achieve the below effect.
Firstly, the widget will take the item's data asset and read the title and description. The title text is then changed to be whatever the title in the data asset was, and the same for the description.
As for the model, the same premise follows where the chest blueprint will read the static mesh stored in the data asset, and then the static mesh is simply changed to be whatever that is.
The widget is still lacking any kind of polish. This is what will be worked on next.
A lot of things have changed in a short amount of time. But there has really only been a few simple additions which make this looks miles better than before.
Firstly, I added a vignette around the edge of the screen, along with a vertical gradient that goes from the middle, to the top and bottom. This gradient makes the top and bottom of the screen appear darker. This helps to lead the player's eyes to the middle of the screen where the item is.
The border surrounding the title and description has been made completely black, to help with readability in-case there is anything in the background that may distract the player from reading the text.
There has also been a clear divider put between the title and the description.
The font has also been changed, and the title is bold, while the description uses a medium weight.
Then a yellow outline is placed around the border, to help separate it from the rest.
The static mesh was also given a glowing particle, this helps to make it seem a lot more important and eye-catching.
Then I added text and a button prompt below the actively selected button to help with readability.
Hint Rings
Hint rings are objects that are placed in several locations around levels. When walking into one, they will provide you with a hint.
The hints will be context sensitive, meaning they will appear in areas where they are needed.
You can edit these properties of a hint ring. There is a title, and then a message. What they do is pretty self explanatory.
I started with this simple layout, which is the title on top, then the message below. There's a border around the text to help with readability, because otherwise the text may mesh in with the background.
Then of course there's an "okay" button, pressing this will close the hint.
After I got the layout down, I worked on polishing it up a bit.
Firstly, I added the same yellow border that the chest UI had, this is to just help keep the user interface consistent throughout the game.
I also changed the font to match the same one used as the chest UI. Again, to help with consistency.
I also separated the title to be outside the border, this just helps to separate them. I also added a slight outline and drop shadow to the title to help separate it from the background.
The vignette from the chest UI was added, however the top and bottom gradients weren't added since they aren't needed in this UI as your eyes are already drawn to the middle box.
Something that was left until this section was that I am using rich text for the message body. This is so I can do things like have different text styles, you can see on the left that "Hint Rings" appears in blue, this signifies that this is important. The yellow also helps to signify key words.
I also didn't really like the big "Okay!" button, so I replaced it a with a subtle "Dismiss" text that has a button prompt to the right of it.
One important thing to note is that button prompts can actually be included in the hint via the rich images. This is another good reason I used the rich text option, since this is easier to read from a player's POV.
