Tuesday, June 12, 2018

Painscreek Devlog #6: Designing The Menu & UI

(An early design of the Painscreek's grading system. Background image taken from 'The Secret World'.)

When first designing the user interface, we decided to go with a minimalist design, for a number of reasons. First, we couldn't understand how to use Autodesk's Scaleform. Second, we were new to Unity and didn't want to spend a lot of time on implementing a complicated UI. Third, we thought that an immersive experience meant placing on the screen only what was mandatory. Fast forward 5 years later: Although more UI elements were added as the development progressed, our end-product embraced much of what our original design set out to be. It was rough in areas, but it got the job done.



Here's the design process we went through when coming up with the UI for The Painscreek Killings: What should we include/exclude? That was one of the first things we decided to focus on. What would be essential to players? We definitely needed a start menu and an options menu. A dot in the center, a reticle, to inform the players what they were focusing on. An action alert, a text prompt, to notify players what they could do when certain objectives aligned. An inventory system that would hold all of the important items gained on the journey. And finally, the camera. We wanted players to capture everything they wanted to as they explored the game. All of these were considered the bare essentials.

(Note: Some of the background images shown here were googled and taken from the commercial games, such as 'The Vanishing Of Ethan Carter' and 'The Secret World'. They were solely used for prototyping during the design phase as the images resemble our game's atmosphere.)



THE ESSENTIALS

The Action Icon
One of the essential features of the UI was, again, the Action Icon/Reticle. We'd decided early on that it'd be a white dot in the middle of the screen to guide players on what they were focusing on during game-play. However, when it came to accessing items or objects we didn't know what would work best. We tested text prompts and image icons, and we favored the latter. But the icons used during prototyping were amateurish. And for each type of action, a different image had to be created, such a book icon for reading a document, an eye icon for inspecting stuff, and a hand icon for picking up collectibles. We just didn't know how many would be needed for the whole game when everything was finished, and so we eventually scrapped the idea of images and settled on using just text.

(An image-based action icon.)
(A text-based action icon.)


The Inventory
We spent quite some time thinking how we wanted the Inventory to look. What we wanted was a simple UI, with the left part of the screen showing what items the player had, and the right side of the screen providing information or additional hints about the item that was currently selected. There were a number of inventory plug-ins on the Unity Asset Store, but we just couldn't find them to our liking, they just didn't fit our design. In the end, our self-taught programmer found a way to script it all up.

(Early design of the inventory.)

The Camera & Photo Album
When designing the Camera's UI we wanted players to feel a certain authenticity when using the feature, so we mimicked the look of a 90s digital camera's viewfinder. For the photo album we prioritized function over aesthetic by implementing the view and delete buttons, and by allowing unlimited photographs. We wanted players to be able to snap as many photos as they wanted to, and for them to delete anything they considered useless, and we wanted all of this accessible in-game. 

(Early design of the camera's viewfinder. Imperfections shown here were discarded for the final build.)


(Coming up with different types of layout for the photo album.)


The Maps
At a point we found it necessary to add a Map feature. Players would likely get lost when running around in the village. And we didn't want the players to be burdened with having to take photos of maps they might see. Providing a map would dramatically decrease the chance of loosing yourself in a smaller alley or side street. We decided that a simple click of the 'M' key would give us a pop up image with the map of our choice. Although it broke the 'realistic UI' rule, it was a necessary step in making things a little easier for players.

(Different looks for different type of maps. Here's what the village map would look like.)
(Here's what a building's map would look like, which resembles a blueprint.)


Choosing The Font
During the UI design phase, one key factor that is subtle, but massive, is fonts. We played around with several variations, from conservative fonts to typewriter fonts to contemporary fonts. We had to see if these could work on a game title, in options menus, in readable documents. For every font we looked at we considered the two important factors. First, it should support the overall look of the gamer rather than stand out like a sore thumb. Second, it had to be easy for players to read. Although we favored the typewriter font initially, we decided to go with contemporary fonts by the time the game was published.

(The Start Menu with the 'typewriter' look.)
(The Start Menu with a contemporary look, which has a better appeal and still works.)



THE UNNECESSARY THAT BECAME NECESSARY

The Journal System
Some game testers complained that there were too many documents to read and to memorize. Although taking a photo of the pages was an option it just wasn't an ideal method when there's about a hundred documents in the game, and some of these can contain up to several pages. So we decided to look back at a journal system. It was something that we'd wanted to have when we first designed the game, but it was dropped when we found no 'on-the-shelf' plugin that could do what we had in mind. When we figured out that this sort of feature would be nearly necessary for players we were entering our internal beta testing. Fortunately our programmer had a basic foundation with C# by that point, and she felt that it could be done. Since we had so many NPCs with their various documents that covered decades we needed a system that could get us to where we needed to be, when we wanted to be. To further help players keep track of a system that could still be confusing we had to make sure everything was in alphabetical and chronological format. 

(An early design of the player's journal, with a focus on the overall look. Despite the nice look to it, we did not know how to implement it into the game.)
(A second version of the player's journal. We went for a minimalist look this time.)
(The final version listed alphabetically as seen in-game.)



Video & Audio Options
One of our previous developers mentioned the need to implement individual video settings for players to tinker with. We thought that was a luxury we couldn't achieve at the time, going instead for a global setting choice of fantastic, beautiful, or good. After launch, however, players were asking for the possibility of tweaking the game the way they prefer rather than what the developers wanted them to experience. Some players even wanted to separate the sound effects from the BGM. To fulfill what they wanted we started to take time to individualize as many settings as possible.

(An early depiction of what would be included in the video options.)


THE LUXURY
Our original design for the start menu had a static, but appealing, background with the menu options sitting at the bottom right hand corner for players to access. This served us well enough and was easy to implement. Somewhere during development we chose to go with an animated background instead, not only showing off the game's environments, but helping create an atmosphere of what was to come by having the music playing in the background. Although we viewed it as a luxury rather than a necessity, we felt that it was a good choice at the end of the day.

Unity 5 made UI implementation much easier than before. Issues such as resolution scaling, centering, or corner locking became easy tweaks. 



CONCLUSION
It's the design of the UI that can help make or break a game. Although a minimalist UI might be functional enough, it should always be appealing to the players. For future games, we'll go with something more suited for the current era while still maintaining a suitable UI

No comments:

Post a Comment