UI Development - So many buttons

You never truly realise how many buttons the average game has until you're in charge of creating them, from the main menu, to options menus and so forth i had to create them all.

The design ended up being a metal supporting frame, with a wooden center, with more metallic aspects being the chain links (in the case of the main menu) the bolts and the text letters. i wanted this idea for the main menu to look like the signposts outside of pubs (this required me to re watch pirates of the Caribbean at the request of my group leader as research) and for them to appeal to the medieval and main title theming of our game.

UI Development - Papers, Parchment and Textboxes

While a little mundane, the need for material to put in game text on is very valued, from the collectable letters telling you of lore, to tutorial messages for the new player, every game has some need of these.

This post covers an assortment of paper material i produced for the game;

To start we wanted some nice text backing for our introduction to the world, dictating the story of the world, with respect to the time the best thing i thought would be to create some nice parchment designs that we could put the text on. To start i experimented with some format designs.

I quite enjoyed the open letter style (middle) which had a seal at the top, as it gives a good indication of something important the player would read.

Giving the parchment a nice paintover treatment and making a seal for it i came up with what is now our level up screen. (the story got repurposed due to some design decisions) I was quite happy with how clear i made the paper look and identify with what it is, 

As some of our more Game-y aspects came to light, between me and James we decided that we wanted there to be a paper that looked like someone has made up the story at the last minute for a tabletop campaign.

initially this looked more like a folded bit of paper, but the usage of text on this became a problem, so i needed a more straight forward design.

Taking inspiration from lined paper (and its vast usefulness) i created a bit of lined paper, and then proceeded to put our story onto it, and the "doodled" on it like it was someones set up for a story. i think this design adds a lot to acting within the theme of our game, whilst also being very easy to read and not problematic for our player.

Lastly as a bit of necessity i created a simple text box with some autumn leaf patterns for general and repurposable use throughout the game if need be. this was to cover any menu's the designers needed to make which were not part of the general plan.

All this paper was interesting to design, its not everyday you get to paint something thats so present in everyday life.

Inventory System Progress

Over a period of a month and a half I attempted to create an inventory system. It would work by instantiating GUI prefabs, most of which were buttons and I would be able to click and place images, which would have the item information stored in code and when placed within GUI slots the associated item would be instantiated on the player (if it were an item like a weapon) or stored in a menu that the player could access.

(Figure 1.)

I had errors with this for such a long time because I couldn't figure out how to properly store different item information, make them relevant and instantiate the game object within the scene. The furthest I got with the system can be seen in Figure 1.

I managed to store info on the dice within Figure 1, but I then struggled to figure out how to click and place items A. between menus, to transfer over to the player's inventory. B. between different item slots.

I managed to make basic statistics for the dice items but the amount of time it had taken to reach the culmination of Figure 1. (the culmination of the 1 and a half month time period I spent on this) had taken me too long to believe that I could complete the inventory system.

To improve for the further I believe I could implement a system to check if a slot is filled, and within an if statement I could call a stored game object within the code and make the set active boolean value to true to bring the item into the scene and be intractable by the player. Any statistics this item may affect within the game I would be able to interact with and manipulate like I did within my Level Up script to improve the player's HP and Damage Output.

UI Development - Cursors

To add a little more flair to the overall design of our game, we wanted to have custom cursors, with some variants that showed when the highlighted action would be to: walk to a location, engage a fight, investigate an incident or talk to an NPC

overall the deliberation over design was rather short, some brief sketches showed us that was wanted a simplistic design for both the highlighted actions and the cursor itself. so i made a modification to the standard windows mouse, added some tone to it for depth and created simple and similarly coloured prompts for each of the actions. The key here was for everything to be recognisable, and not irritating on the eyes.

Additionally i went for yellow tones here so there would be less conflict with the overall GUI and in game environment,

On reflection i would have spent more time polishing each of the logo elements, as i would have liked to make them even more recognisable to their corresponding action.

Camera Controls

The idea with the camera controls would be that the main camera would have a target to track and the camera would be able to rotate around the position of said target should the player click and hold the Right Mouse Button (RMB). It would do this with a line of code transform.RotateAround with the position being set as the target. To allow this action to be smooth, rather than allow the camera to jump between positions, I multiplied the speed of the camera rotation by Time.DeltaTime.

UI Development - Combat Menu

Every good turn based game needs a battle menu; where the player can make decisions on their actions. The group had a strong design style they wanted to go down at this stage, as we had started incorporating dice into the game world for deciding power, and our combat had switched to something based on the outcome of dice rolls for whether to deal damage or not.
As such they wanted the menu to reflect this, having a dice as a central element with the combat options coming off of it. this gave me a nice focus for development but still room to experiment design wise.

The first few were mainly to test the waters of what my team wanted, with each of them i tried a different dice as a focus to see what i could get out of it, the D6 made a very neat design, the D8 also made for neat design, the idea there being that there would be broad menu's that when clicked would bring more buttons for specific actions out, but this was dismissed (they wanted all the options clearly present from the start)

The D20 design felt like a bigger breakthrough to something good, the angular and multifaced aspect of it was visually interesting as a center piece (something which the D6 was not) and the options for combat all could be positioned around it in a professional manner.

Moving onto development of the D20 design i refined the dice by adding some tones to the design and making the dice more visually striking, alongside some orange tones to bring it into line with the life bar for the player. However, when i tried to orientate the text boxes to be more dynamically placed i quickly ran into the problem of legibility and professionality, the angles required to position some of the text here was not good looking, and so i quickly scrapped these text boxes in favour of the more earlier designed boxes.

The final design ended up being the best of most of my designs, the D20 dice, with a extra version of it scaled out for more impact on the shape. and the menu's from the D6 design, as these have the least complications with text placement and positioning on screen. In reflection i wish i could have done more to improve the legibility of the text, but i did make sure to add a stroke and some light tonal painting to make the text feel distinguished in the design, so it would look visually interesting.

Player UI and Enemy UI

We wanted the UI for the player to be represented both by text and a bar that would decrease and increase.

In the code, in Prem's Health Manager script, I added a field to place the health bar and stamina bar. Using a float and calling the local scale of the GUI image game object I was able to reduce the width of the game object on the local scale proportionate to the amount of health and stamina the player currently has. This will also increase should the player recover HP and/or stamina.

(Figure 1.)

The buttons on the main menu all act as on and off switches. To create the main menu system I created all the GUI buttons and input fields we would need to progress the main menu. On Click() the button pressed would set active (true or false) the boolean value of the game object attached depending on the context of the button. For example with the New Game button it switches on the text fields and input fields for the character creation work, the Back and Start Game buttons and switches off the exit game button; clicking on the Start Game button activates a script which loads the game level using the name space using UnityEngine.SceneManager; and then typing into the appropriate function Application.LoadLevel and then the appropriate level within () brackets.

Prem added to the character creation system the ability to store and save the text inputed into the character name and bio text fields which could be stored and accessed later onion the game proper and be displayed on the character sheet option, seen in Figure 1.