As one of the CS majors to join the team this term, I have been working on building the journal UI (mentioned in this post), specifically focusing on the notes section. There were several steps taken in this process, and we will walk through them here!

Visual Mock-up

This piece was completed by Lydia last term. She designed the basics of what we would need to see in the the final journal.

Unity Mock-up

The first thing to do was create a visual mock-up, both to get an idea of how building User interfaces through the unity editor works, as well as figuring out what we need to do, as well as if there are any design changes that need to be made. At this point the journal did not do anything other than opening and closing when the tab button was pressed.

Using Assets

The next step was pulling together actual assets to use. This included the journal background as well as the bookmark images. Later I would also add assets for the page turn buttons, an updated font, and a new asset for the ‘return to statehouse’ (later statehouse changes to town house for historical accuracy) button. Defining assets early on allows us to figure out exactly how we want to place and size things, as well as where to place anchor points for each component. (An anchor point controls how different pieces of the UI resize in relation to each other, and is really important if you want your UI to look good at different resolutions).

Adding Notes

Here I updated the fonts to better match the game, as well as the page turn buttons. An initial utility for adding notes was also added around this time. The initial utility lacked important features, such as using both sides of the journal to add notes, and supporting multiple stages.  It’s important to figure out the basics before going in too much depth with a feature. Since it was implemented this way first, it was easy to take the logic and improve it, before moving on to more complex steps. In the end we ended up using an event system provided by unity, so one object could send out a message when it wants to add a note to the journal. The journal then receives this message and adds the note. This is better than the first implementation, where a reference to the journal would need to be given to any object that wants to add notes to the journal. Though that method worked, it allows for more potential human error, as those who would use it may not know the details about how to set the object up. It is best to try to handle all of the game logic separately from the game play and story creation. An important lesson we see here: small steps and iteration lead to better design!

Tab Logic

The next step was to make it so that clicking on the buttons at the side actually changed the display! I created a filler page for depositions, and also added a map page at this point. In Unity it is very easy to add functionality to buttons so this step, though important, was relatively simple.

Multi-Page Notes

This step is where things really start looking like a final product! I updated the notes so that they are dynamically added to the pages via an array. This way there are always three notes displayed per page: a safe amount for most screen resolutions. At this point I also implemented a page turn system, so we can have as many notes as we want! Nifty! The notes section is just about done, just with potential bonus features and fixes to add. (Click on the image to view a GIF of the state).

Bug-Fixes and Extra Details

Finally, just before writing this blog post, I wrapped most of the features for the notes page up. I noticed a bug related to how Unity handles disabled objects (which is important due to the UI functioning by enabling and disabling it), so I changed how the Journal is opened and closed to use opacity instead. I also added a notification for when notes are added to the journal- so the user knows to open the journal and check, as well as sound effects for page turns.

Here is a video displaying all of the features: