USER INTERFACE (UI)
Here you will find the designs and development for the UI I have made for the 'Wild Wild Animals' vertical slice. There have been multiple stages of development, consultations, deleting ideas and re-visiting others. This page compiles all of the various elements I have looked at for our vertical slice.
The first thing I looked at in this project regarding the UI was the individual scenes/ areas we wanted the players to be able to explore. Unfortunately we had to drop areas like the gunshop and the tailors very early on in the process but this has helped us to focus and not overstep our limitations. From this, I looked into the church, sheriff's office and general town areas as 2D scenes we would need. The town was designed to be a view of the main areas a player could explore before setting off on their quest. As outlined in Bernado's GDD the tailors and gunshop were for customisation, the saloon was for recruitments, the church for stat point allocations and the sheriff's office for mission selection. Despite our vertical slice not working out this way, the town still needed to be a space the player could learn and feel as if it was their own - this space acted as a base. These are the first designs I sketched out and proposed to the group.
After failed attempts at using this traditional piece and being recommended the Lucky Luke study (see research) I re-invented the town UI to be something much brighter, chalky textured and overall give it a much more hospitable vibe. The art bible images from my sketchbook are included at the end of these slides however the design process follows the same technique outlined in the art bible at the bottom of this page.
I was much happier with this attempt although the group correctly pointed out that I needed more ground texture and better spacing between buildings for example. I wasn't entirely pleased with it myself so I re-made it a little later on with some slight improvements.
This final design has much more atmosphere to it with the simple two-tone shading and the added chalk textures. It was slightly later on that we discussed not having this area in the vertical slice to interact with but by the end of the project it had crept into the animations so I'm pleased it was not entirely in vain. Next in the process was the Sheriff's office and the church. I wanted these areas to be more specialised like their purposes and be full of character so I developed the designs below.
The Sheriff's office idea was scrapped pretty early on (before making its grand re-appearance in the final showcase) but at this point I only developed the church UI. The church was supposed to be the place to demonstrate the skill trees and include some of the icons I had designed before however these trees caused a lot of issues across the project in complexity and design. I made the church UI to fit these but this was another detail to be changed later on.
These designs were then abandoned for the majority of the rest of the project as we realised we couldn't really use them with the limitations we had and the goals we already wanted to achieve. In the final two weeks of the project we took on more of a vertical slice presentation than the playable demo (ish) version we were looking for originally. We had come across an issue where we had no images for menu backgrounds and through a handful of discussions we came back across these designs. they seemed to fit really well, in that we could showcase the character profiles in the church and the environments in the Sheriff's office so thats exactly what we did.
Overall I'm really happy with these designs. I had refined my approach to coloured digital work across the project so this visual representation sums up a lot of what I've learnt in terms of shading, depth and composition all in a cartoon style.
BATTLE UI
I started to tackle the battle UI later in the project so that the other members of the team could figure out exactly what they needed in terms of what was needed to display their mechanics. They made me a list which covered a lot of the basics like skills icons, basic button backgrounds, a menu, quit and objective button etc. and then I added to this as I went along and we thought of more things that would help the design. My main concern was having too much on-screen at once so I set out some designs to first discuss with the group.
As I discussed in my blogs we couldn't add in-battle animations very easily so the examples below didn't feature. Having said this the digital UI elements i think came out really well. Below are the UI components I made for the battles.
Post-battle UI. I put together some similar types of imagery for the collectables after a battle, however, as our vertical slice format changed, it became apparent that these wouldn't inherently be necessary. Instead I put together some screens that weren't animated just to show off these items. Without these screens in the showcase, the intro to cutscenes 2 and 3 wouldn't make sense as we decided much earlier on to have the characters interact with these pickups. I've also added below images of extras, such as the borders, icons and replay screen that have filtered into the project at various points when needed.
Some of the UI additions included character profile images seen on the church scene above. Below is a timelapse video including the character sheets I made to demonstrate my process. You can see how I hand-colour each image to get the chalky grain effect.
