top of page

UI Design

UI

Technical Summary:

A small detail with the UI that I mentioned I wanted to change, since it looked odd, was the image box that we would change to be the image of the selected item. To fix this, I changed the boxes' material to be an entirely invisible material intended to be used inside different User Interfaces, which worked really well since we changed the image material to the renders. Because of this method, we didn't have to change the image's starting opacity to zero and then turn it back up when adding the image to it.

Reflection:

This is quite a subtle change to several different UI's, but a very effect change, adding a more polished look to them. It really helps to hold the overall immersion of them, and doesn't break the player's experience by having a large white rectangle intruding onto the screen.

Inventory UI

Technical Summary:

A significant piece of feedback we received and something I noticed myself was that people would check the map in the inventory and would become confused in relations to where locations really were since it was a universal map for both Day and Night. However, to enhance this feature further, I used the same 2D capture as I did for the Mini-Map and placed it above the level to capture the whole scene. It worked really well with the NPC and Player Icon to see where you, and they are, as well as creating a numbered marker system to help the player still follow the key included to the side of the map. Since we used this system during the day, we also had a copy during the night, so when you look at the map, it fits the lighting, and includes the Redcoat related markers.

Finally, a change we wanted to implement in Beta, was using the buttons of the escape methods to show which method you were following when you interacted with it. I spent a lot of time reiterating this design, trying out using an image inside the button that would change when you swapped methods, but couldn't get this to work and decided to look into a different method to achieve this effect. To equally space out the buttons, I put them inside a Horizontal Box, which did put each button super close to each other, but adding some padding helped add a gap between each button. Finally, I used the chosen method from the player to set the button's colour to be green and changing all the others to be a default grey, so the player knew it wasn't selected. A huge benefit of also using the Horizontal Box helps to reorder each button without having the trouble of keeping individual items inline and in the correct location. So when I made these changes to the Escape Methods, I moved the Mars Monkey Method to the very bottom, since people will most likely overlook it, and it's not an implemented method, whereas the other four are.

Reflection:

The Map change was a very useful addition, helping the player see where every moving part currently is when the game is paused. It also meant that we didn't have to keep rendering an overhead image every time we made changes to the level and add new markers over the image, which is a huge time saver in the long run. Although the Escape Methods didn't require the changes we added to them, it definitely improves the player experience of being able to know what method they are following and what items they can look into to complete the playthrough. The only issue with this change is that it makes me wish that I'd have known about Horizontal and Vertical boxes sooner so that I didn't spend as much time throughout different User Interfaces to line different images and text boxes perfectly inline with each other. 

Crafting UI

Technical Summary:

The Crafting UI is probably one of the most unchanged and forgotten elements of the game, that was most certainly due an upgrade by the time we reached Gold Standard. During the week that I recorded all the gameplay footage, I was recording the Hidden Path Method, the longest method in the game, which requires a lot of different crafting items to make the Scanning Device. After recording for nearly seven minutes, I got hit with the huge roadblock of being unable to finish the method at all since the remaining items were missing, which not only was a huge time waste, but super annoying when I didn't want to have to restart the game to potentially not even complete the method again. The easiest solution to this problem was to use the already existing Scrap Metal and use that to craft every other Crafting Item so that players wouldn't get stuck in this situation no matter the methods they follow. 

 

This was a good change I was going to make, but the clear issue was that not every item was going to fit onto the box we had, so I decided to use a scroll box so that I could have every item fit inside one box and simply scroll down to find the other options. I changed the whole item to be a button, with the image and text alongside it, to keep it inline with the original design. I also added a larger amount of padding to these buttons so they weren't as tight to each other, as well as using the same code for the Iron Gear for the other items, since having the different crafting items cost different amounts didn't make sense.

Reflection:

This was a brilliant improvement on the overall design and function of the Crafting UI, not only benefitting the player and dodging potential issues with the player being locked out of following the method they originally wanted to follow. It's also got some unique elements that aren't used in any other UI, making it stand out a lot more in comparison.

© 2024 - 2025 BY ELIOT WILLIAMS. Powered and secured by Wix

bottom of page