HUD and UI Concepts

In my game, I have come to realise after looking at a few RPGs, that not many of them have UIs. The vital things that are necessary to the game (such as the inventory), can be found in the pause menu. I think that following what most narrative RPGs will work out visually for my game as well. However, I still want to layout my main menu in an eye catching way for the player, the main menu’s buttons should compact and shouldn’t be far away from each other as this can make the player look at too many places at once.

Above, I have come up with a few placements for the main menu. I was reviewing a few previous years GDDs and how they came up with their HUDs, UIs etc was that, they all stayed relatively minimal.

Then, I did a couple of sketches of what the pause menu could look like as well. The second layout was heavily inspired by Paper Lily by Leef6010

Feedback

I asked two people for their feedback for these concepts and how I can improve on these designs;

“I think it’s a good thing that you want to keep your menu screen buttons close together, whenever I play games, I find it a bit annoying when buttons are spaced out. Although it’s a small design choice, it keeps my sanity in check.”

(In regards to the pause menu) “I think you should try to develop the second concept more. The first one is minimalistic- it can be good but I think for your game it would be nice if you had a more intricate design.”

Finalised text layouts

Finally, I came up with this as the main title screen. The point of this concept is to show where the text could go. I also added Nola’s hat as what is currently being selected.

And here’s the mock up of the pause menu! I would also like to state that the back ground for the pause menu will be the current game the player is playing, but blurred.

Designing the Logo

For the logo design, I wanted to make it look like a ticket or vintage. So the first order of business was to look on Pinterest for circus ticket designs and analyse a couple things: the font, distortion and colours.

In the very quickly compiled mood board above, I have come to the conclusion that in my logo design, the font must be quite thick / chunky with a vintage feel to it. But before I jumped into finding the right font, I wanted to play with word placement and how it would look:

After that, I went to look for free fonts and play around with Adobe Illustrator for the word order. Addtionally I looked at a Youtube tutorial for a vintage font effect.

At first, I wanted this to be my finalised logo design but when I was trying to put it in different colours, it didn’t feel right. As a result, I went back to Adobe and worked on a different draft.

Finalised design

For my finalised design, I browsed Pinterest different ways to set out logos and eventually came across a ready made alphabet. With this alphabet, I tediously put the words together and went for a more simplistic approach, which in the end, I came to like a lot more.

Vintage circus alphabet – Freepik

Lost Souls – “Audience Members”

The lost souls are the audience members in No Entry After Midnight and if they feed on too many human souls/remains, they go through a transformation into something horrifying. These new manifestations are called “corrupted lost souls”. They are sensitive to sound and vibration, but they’re blind.

Initially, I got inspiration from a character in media called “No face” which is a character from Spirited Away, a Studio Ghibli film.

I liked this character’s silhouette and overall simplistic design, it’s something that I want to implement with the audience members’ concept art. Another thing I want to put in their design are masks. As I did research on 4th wall breaks- which can be found here– I feel like it would be fitting to use masks to symbolise the lack of remorse and responsibility the audience members have.

Lost souls concept art

Displayed above are the concepts of the lost souls that can be found in the audience or carnival at night. The first one shows the state of the soul acting normally, the second one shows the soul in distress, this means the player can do side quests for this soul in exchange for other quest items or currency.

Corrupted lost souls concept art

Here, I practiced some silhouette concept art, plotting down ink without thinking too much of it at first and adding onto those ink shapes. Eventually, I came up with three designs as I wanted to get this done relatively quickly.

Finally, I came up with this crooked design of a corrupted lost soul. I wanted to create a disfigured silhouette with ink or black tar seemingly spilling out of it. Another thing that I painted in was the mask split into two halves, showcasing the happy face and sad face commonly found in theatres.

Platform Specs & Controls

PC specifications

MINIMUM: 

Requires a 64-bit processor and operating system 

OS *: Windows 7 (64-bit) or above 

Processor: Intel Core i3 4th generation or above 

Memory: 4 GB RAM 

Graphics: OpenGL ES 3.0 Compatible 

Storage: 350 MB available space 

Sound Card: WASAPI Compatible 

RECOMMENDED: 

Requires a 64-bit processor and operating system 

OS *: Windows 7 (64-bit) or above 

Processor: Intel Core i5 8th generation or above 

Memory: 8 GB RAM 

Graphics: OpenGL ES 3.0 Compatible 

Storage: 350 MB available space 

Sound Card: WASAPI Compatible 

Keyboard controls

Movement: WASD

Inventory/Pause: E or Esc

Interact: F

Run: Shift

Sneak: Ctrl

Edith – Knife Thrower

Edith is a more mysterious personality. Unlike Clara who has a reason to want to be alone, Edith likes to be alone for other reasons. In the game, Edith is introduced as someone who doesn’t like talking at all, she doesn’t seem to have close relationships with the others as well. She also walks around and talks like she’s holding back from spilling the truth; this is because she’s aware that the Ring Master erases the crew’s memories of all the ritualistic events that occur at night- and she has to pretend like everything’s fine.


Finalised Design

For Edith’s design I wanted to incorporate stripey patterns and the colour purple to connote mystery and an enigmatic personality. I think that the stripes are her defining feature as well as her micro bangs and long hair. As she’s a knife thrower, I added a belt with sheathed knives.

Clara – Trapezist

Clara is a trapezist and loves being high up in the air. She is quite reserved and quiet but as soon as she steps foot on stage, you can see the level of professionalism. She likes to keep to herself most of the time and appreciates the quiet once in a while. Because of this, she gets along with Bozo the clown very well. She also likes cute frilly costumes but as it’s a hazard to her health being so high up and doing dangerous tricks, she is prohibited from wearing anything that would get in the way of her performance. However, she still collects dresses and wears them inside of her trailer.


Finalised Design

For Clara, I initially used purple but it clashed with the pink hair too much and I didn’t like the look of it. As mentioned, Clara can’t wear skirts that are too long or anything that gets in the way as she performs, so I’ve designed a see through skirt that goes over her leotard, this showcases a bit of her personality.

Finch – Fire Performer

Finch is a fire performer at the circus and one of the oldest at age 45. Finch is a loud and boisterous character, he loves talking to his crewmates and always checks up on them after their acts, offering them food that he personally makes. Finch has a family but can only see them once a week due to his line of work, he sees his circus crew as his secondary family.


Finalised Design

In comparison to the other characters, I kept Finch’s design relatively simple as when all the characters are displayed on screen, I don’t want to overload the player with too much design information. The one thing that separates Finch from the other characters is that he wears eye make up for his performance. To make him look like a fire performer, I added some fire patterns to his trousers and paired it with a red waist coat for some colour harmony.

Bozo – Clown

Bozo the clown is part of the crew in Cirque du PĂ©nombre, his act consists of making other people laugh at his health and dignity at stake. Although on stage he has a lively and joyful demeanour, there is nothing more in the world he wants more than to lock himself up in his trailer and watch his favourite TV show. His crewmates have no idea that he enjoys watching colourful ponies on screen fixing problems about friendship; if anyone were to find out, he would dig a hole 6 feet under and bury himself alive. Bozo has a very conflicting relationship with his occupation, he hates his job but appreciates the comfort his crewmates give him and doesn’t want to leave.

At this point of my design journey, I wanted to be more efficient with my time, so instead of making warm up sketches, I went straight into the action. I also chose images I was sure I was going to use for my design concepts, I chose images for my concept that I would use for certain and incorporate that into my design.


Finalised Design

This is my finalised design for Bozo, for his costume, I took inspiration from real clown costumes. I noted down that the clown costumes were large and loose, like it doesn’t fit the wearer. Finally, I added the stereotypical oversized clown shoes.

Nola – Protagonist

Nola is protagonist of No Entry After Midnight, the player is first introduced to her whilst she’s still on the streets. Nola although is a capable individual, doesn’t mean she wants to be alone again, especially after discovering a life after living on the streets for so long. For her aesthetics, I want to make her look unisex, whilst still keeping some feminine aspects to incorporate in her design. Out of all the NPCs in the game, she will have the most outfits; I want to make a pre-circus life design, her main circus costume and another costume that she borrows from Wendy (this can only be achieved when she reaches a certain friendship threshold with her).


Initial Plan

Starting off with the main costume, I want to incorporate really fluffy materials, whilst making it look tomboyish. I started collecting some images that I think may be useful for my design journey, from what I can gather here, I want to make a costume where Nola is able to move freely but still look part of the circus.

Design Warm-ups

Here, I did a few more design warm ups, as we can see, I have incorporated shorts / bloomers in my iterations. When I look to making my finalised design, I want to design Nola in gender neutral clothes.


Finalised Design

This is the design I worked hard on, I used some images from my mood board and went on Pinterest to find new images to help me with my vision. In regards to Nola’s colour palette, I wanted to use primary colours, later on I felt that the red top / blouse made her look like an “angry” character, so I changed it.

Finally, I came up with this. I like this colour palette more as it uses primary colours and it makes her character appear more soft.