Tuesday, 19 April 2016

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.

Game Design Document

UI Development - Minimap Construction

Minimaps are definitely a strong staple of gaming today, particularly in the RPG genre, the need to plan where you are going next, or how to navigate through large land masses is definitely needed. As such i needed to design a minimap for the game.

To start i had to come up with general shape concepts, my group leader wanted the more traditional circular designs, which unfortunately didn't work due to how we were producing our own minimap (this being to add another aerial camera...which was square shaped) to add a satisfactory border to cover up the shape of the camera would require so thick a frame that it would have been intrusive to the game itself, so i had to persuade the group to a square frame and then work from there.

Initially my idea's were kind of bare bones, typically games used thin borders and some nice shading to give a frame to the mini map but ultimately there wasn't a lot there. so i worked from adding some more nature orientated frames to the UI, throwing in some self made compasses and time of day indicators for some added detail.




Later on in development we started shifting design more to being a depiction of a tabletop game as reality, so the idea between me and James (our lead designer) was to make the minimap appear as if it was an aerial view of a tabletop surface, this idea gave me some real nice ideas for framing, additionally from some research, many of these dedicated tabletop tables had things like cupholders, so i worked the compass to look like it was fit into these cupholders.


since this had to look like wood, i opted for light brown and cream tones to not be too similar to some of the more important elements of the UI, the minimap had to be noticeable but discrete. and in our case the design was in reference to our games themes (in the end our map even had the border look like a tabletop).
I did have to make a slight edit during testing as we found the border was too robust, so i gave that the border thinner but left the positioning of the other elements the same, giving them an appealing overlap.

All in all the minimap was probably one of the harder elements to design, research and reference not giving too much variation or interesting design to spurr off, it seems to be a minor enough element to some games that it got minor treatment, which was not great to base my designs from. but in the end talking with the team and focusing on our game themes enabled me to make a nice design.

Character: Animation Skinning

After creating the skeletons for the character models, they need to be skinned so the mesh reacts to the skeletons movements.

Although this seams like an easy task, It's the part i found the most challenging as I did not fully understand the mechanics. to my understanding the colours indicate the intensity of the skin's "grip" on the node of that part of the skeleton. As certain areas will distort when rotated unless the skin weights are correctly applied. In order to get a professionally finished model, the skinning must be applied correctly so there is no distortion or clipping when the model is posed.

I found the more I tried to adjust the skin weights, the more distorted my model became. Although I'm sure with more time and practice I could understand and use this weighting effectively.




UI development - Portrait and Character alterations

During the course of production there are always some bumps in the road, for our group the bump in the road was some disagreements on the design of the main character.
Since i wanted to design a portrait for use in the UI i offered to do a redesign as a way of testing if another point of view might make for healthy development. This is the brief design i went with to see if this got the approval of the team.



Our main character is a mercenary, a tough middle aged woman (although this is now the character the player is using in a tabletop game as part of our games meta narrative) so i wanted to convey some of this in my design decisions, the slightly tanned skin to show she spends alot of time travelling and doing work. Fierce hair and expression to show that she's a tough customer and to be eye catching in comparison to the environment. Other details which don't show in a portrait i also tried to convey in a brief sketch, such as the muscular and wide build, owing to her strength as a merc.

The team really liked the design, and so to allow our character designer to work of of this i was asked to apply this to a design sheet for the head, something which i was happy to do since my design helped fix the problem we were having. Keeping a design consistent in multiple perspectives is quite hard, making sure the various facial elements and things like hair remain the same, but i was proud of this design as it shows that i have grown much more confident in my digital art.


Finally for the purpose of a polished in game usage of the portrait, i made some further modifications to clean up the design and added a muted background for framing purposes but not as to make her less visible. I enjoyed doing the design and think it demonstrates my ability to problem solve within the team and help cover some of the shortcomings we may have, even if this extends slightly beyond my role.

Character Design: Enemies

Initial Sketches: Multiple designs based on different dinosaurs, both herbavors and carnivores. Different levels of armour and weaponry.
Sketch 1: T-Rex enemy, colours to have a degree of camouflague in the environment but still be visible. Hunched, predatory stance and posture.
 Sketch 2: T-Rex enemy, with heavy armour. Colours designed to mirror the protagonist's colours. Armour significantly changes the enemies proportions.
Sketch 3: T-Rex enemy, with medium armour. Designed to more maneuvarable and less complex.

Character Design: Protagonist

Initial Sketch 1: A demo of multiple potential characters. Based on knight with more modern design features. Rejected in favour of a more traditional RPG protagonist.
Initial Sketch 2: The first sketch of the protagonist, that was decided to be a female monster hunter. Also includes designs for hair, head-pieces and helmets.
Initial Sketch 3: A selection of chest armour for the protagonist. Based on medieval tunics and light armour, mixture of cloth, hide and leather.
Character Art 1: A design highlighting the characters proportions and outfit. Blues and goldish colours designed to contrast with the enemies and the environment. Character is designed to look experienced and skilled, similar to characters like Brienne in GoT.
Character Art 2: A design incorporating more armour for the legs and arm. Based on armour used for one hhanded sword fighting but simple enough to be worth upgrading.