UI Design
Player UI
Technical Summary:
At this stage in Alpha, we created a very basic UI for the player, keeping the two different bars in the positions we documented in concept sketches. Unlike other games I've worked on, this game has a very unique shape to the different bars, being square rather than the typical bars I've done before. We plan to overlay an image to make the two squares look like circles adding a more unique spin on the UI. The UI shows the two player stats, Stamina and Invisibility, both finite resources that the player will deplete the longer they play. We decided against a health system since the player would be caught by enemies rather than take damage and be able to run away and survive. Having the Stamina and Invisibility as resources that won't regenerate, we needed a way to make sure that this didn't become a permeant roadblock for the player, so we included consumables around the level to help restore this. The UI itself is created through the level blueprints when the level starts and changes the values of each bar through a looping function inside of the player. For the UI to actually update the change in Stamina or Invisibility, the percentage bar is bound to a function that will always check for when a change occurs, the only significant thing to remember with this, is that the stats amount must be divided by its total so that the number fits between 0-1.
Reflection:
In comparison to other elements of the UI that we have created, this is the most basic, and although they are only two squares in each corner, they do take up a significant chunk of the screen, so reducing the size would definitely help improve what the player can see. It hasn't got much going for it in terms of style, but it works well enough to get the concept across. To help make it more understandable and stand out more, we should consider labelling the two bars to help players understand the use behind them as well as working on some elements to make it more significant. One thing we've considered is drawing inspiration from the original Doom design and having animated faces that play when the player does specific interactions to add more fun to the UI.
The Market
Technical Summary:
A significant part of the game is the ability to purchase items from the Market, so throughout Alpha, I spent several sessions working on building the UI as we get more and more elements developed for the game. I wanted to have a proper shop layout where the player could visually see the item they wanted, alongside the name of the item, and selecting it would give them information and a closer look at what they'd chosen. However, this was something that I hadn't looked into. So getting an image to change when you clicked a specific item, would not only be a cool piece of information to know, but also really enhanced the overall design of this UI.
To accomplish this, I had a specific image that would be the basis for the images to change, as well as a scale box and text to ensure that no matter what the text variable was set to, it would always fit. The buttons along the left side of the screen would be clicked, setting the image, a string to the chosen item, and the text box to the item's description. To actually change the image, the buttons would use the Set Brush From Texture and be allocated the correct image, at this stage, we used default engine images to know that this definitely worked.
As mentioned, this component requires the use of strings to check what the selected item is, this was to make sure that when the player did purchase an item, the correct amount of credits was removed, as well as gave the player the right item they had purchased. During a recording, I found an error where the items weren't priced in line with the text alongside them, showing the benefit of testing each element as much as possible.
Reflection:
The inclusion of the text box also serves as a benefit to the player experience, allowing for the player to get all the relevant information without having to go into the inventory to check what they constantly need, as well as using the same images to help the player become certain of what they need to purchase. This is, also, one of my favourite UI elements that I have created, the original design without any 2D assets was a step in the right direction and exactly how I planned for this to be expressed. I think to add a little more style to this, I should look into making an overlay that makes this look like the static of an old TV to sell the design of a teleshopping channel. Although the 2D images do help with the overall aesthetic of the element, it does force me to line up each element to that, when I could have used horizontal or vertical boxes to keep a consistent and equal layout between each item.
Crafting
Technical Summary:
The Crafting UI is a significant element inside the game, but doesn't come with as much charm or personality as the Market. The two of them share a very similar set up of click on an item and see a closer look and the information about how to craft and what it can do. The biggest alternative to the Market UI, is checking that the player has collected enough resources to be able to craft the item, which if they haven't will print a string of text saying "NOT ENOUGH MATERIALS".
Reflection:
I think to make this UI stand out more it could really benefit from the same fun style as the other UI we have to make it stand out from the others. Our current idea for this is to create a mechanics house which will serve as the person creating the items for the player, we could do a similar drawing of a Martian to appear onscreen to help express this further. Another change I would make to this is when a player crafts an item, it is unclear if they have successfully done so, unless they check the Inventory UI or to press the button several more times to know they have run out of items to craft it. An easy fix for this, would be to include a sound that would play when the player crafts an item, as well as a clear denied sound, so the player knows they are unable to craft these items.
Inventory UI
Technical Summary:
When developing the Inventory UI, we originally kept it simple to get the basic functionality down, and making it easy to navigate for the player, having every button clearly labelled for the player to understand. I also wanted to have it serve as a guide to the player, allowing for them to learn simple information about the game through the UI. It's a significant area that has always been overlooked in other projects has been guiding the player to understand the basics of the game, so having the Inventory serve as a documentation for the amount of items the player had was essential, also allowing them to know where they were going, how to craft items, or what they were following was a significant help towards the player experience.
One of the best and unique elements of this UI is the rotating image of the Martian, which really helps to separate this from how similar in functionality this is to the crafting and market UI's. This was one of the more fun elements to create, which at first we created by using the same scene as all our model renders to create. We used the invisible materials in a green colour to fit the rest of the colour scheme, so to effectively capture this, we changed the background to be Blue so we could easily mask it out inside of Adobe After Effects. We also added a rotating movement to the asset, so we could use a video capture to get a full 360 rotation of the asset. Inside of After Effects, I used the Key Light effect to remove the Blue Screen and create a transparent background. With this being a UI element, we had to export the full 360 video as separate images to make up every single frame.
Finally, to actually create the moving image, I imported every individual frame into the scene and made sure they were in the correct order. The next step had me creating a Texture Array, which if the frames were not in the correct order, would cause the animation to work incorrectly. With the Array, I could then create a material using it. The Material needed to be set for UI rather than a model, so using the texture coordinates block, I could use that alongside a Time multiplied by the frames per second (30) and then use a FMod to get the divisible outcome between the total frames and the fps. Pairing that with the texture coords allows for the texture array to be cycled through, creating the moving Martian.
Reflection:
The updated version that is currently in the game was a huge upgrade on the original design, adding so much more personality and style to the element, as well as really differentiating it from all the other UI in the game. Once we finally have every item inside the game, and rendered, the UI will stand out even more, and serve as a very useful guide to the player and their experience. I think to help improve the player's experience with this UI, we should overhaul the Escape Methods Tab to allow them to follow the chosen methods and the steps they should take to complete it, this would work well with an objective system to help them understand the fundamentals of the game even further.