Major Project

My role

For my main role for the major project I was tasked with being a UX and UI developer. For this role I was to design a main menu for our game and create UI for all the different elements in our game such as pause menu and dialog boxes. As the UX developer I need to try and make the UI easy to follow and allow the player to not be overwhelmed by the amount of options there is. I was tasked this by my team as I have made main menus before for other projects and I have had some previous experience in that field.

For side roles I may take on in the project I am able to do character design and also 3D modeling depending on the amount of 3D models that need to be produced by the other 3D modelers. Additionally I will be creating cutscenes as part of my role in the project. These will be used to tell the narrative of the game and will introduce characters into the story.

Overview

Our project will be a first person murder mystery game demo that will take place in the early 1920s. The game will take place on a steam boat in new Orleans and the player needs to solve the murder before the boat gets to land. To solve this murder the player must investigate and find clues around the boat to decide who the murderer is and speak to the different passengers on the boat for additional clues and to work out who the murderer is.

Genre: The genre of the game will be a noir detective thriller.

Setting: The game will take place on an old time paddle steamer boat, named the SS Arctic, travelling through the swamps in New Orleans.

Story: While travelling down the Mississippi aboard the SS Arctic, Detective CC Tinsley by chance becomes embroiled in a party full of old acquaintances when the host of the event is found dead in an unusual manner. Because Detective CC Tinsley had no connections to the other passengers, the boat’s captain assigns him the responsibility of determining the truth behind this stunning tragedy.

Characters

We have created a unique set of characters with different backgrounds and motives. This will make it so that when we eventually decide who the murderer is we can have different evidence pointing to different people to keep the mystery of the situation. The characters are as followed:

  • CC Tinsley (Detective)
  • Captain Luce (American)
  • William Eubanks (American)
  • Fernand Lacroix (French)
  • David Kirkwood (British)
  • Irene McAllister (British)
  • Lillian Brown (American)
  • Mr Watanabe (Japanese)
  • Franz Haber (Prussian)
  • Jacque Bennétt (French

Gameplay Mechanics

Movement: The game will be first person and the player will have the ability to walk around the environment. A crouching feature will also be implemented to allow the player to enter additional areas.

Interrogation/conversation: When communicating to an NPC the player will have the option to pick what they would like to say to the other characters through a dialog system. Dependent on the information the player has received by collecting evidence new dialog options will appear to further the plot.

Evidence board/deduction: The player can inspect the evidence board at any moment during the game and draw judgments based on the evidence they have at the time; some evidence may indict someone, while other evidence may establish their innocence.

Evidence gathering: Different objects can be collected in the environment that may or may not be used as evidence. The player will be able to inspect these pieces and see if there is evidence on them. After doing so the player will be able to pin it on a pin board so that they can keep track of evidence they have collected.

Journal/notes: The player will be able to take notes on a built-in notebook, which they may go to at any moment to check whether what they write down applies to different pieces of evidence they may be looking at.

Puzzles for extra info (Not a priority): Around the boat there will be different puzzles. The player may be able to crack open several safes throughout the game, giving them new evidence to put to the evidence wall and maybe expanding their knowledge on who the killer is. The player may also be able to re-arrange paintings for further evidence/clues.

Visual Styles

The game will be predominantly black and white, with just the blood in red. This visual style will provide a distinct appearance akin to Sin City. However, depending on the play test, the graphic style may alter if the play testers dislike the black and white as it may hides any visual information.

Audio Considerations

Audio will be used in our game to enhance the players experience. The sounds we would like to include are:

⦁ Ocean sounds/rain

⦁ Crowd muttering 

⦁ Boat sounds, engine, creaking etc.

⦁ Footsteps

⦁ Character voices/mumbling

⦁ Jazz or appropriate music

All of these different sounds will be used to make the player more immerse in the environment and the game that that they are playing.

PRE-PRODUCTION/PROTOTYPE WORK

After deciding what I wanted to do for the main menu, I started working on a rudimentary prototype for the Unreal project. I began with creating the UI components because they are basic and can be simply produced utilising everything that Unreal offers. After the UI elements were constructed, they were placed on the screen, and a 3D environment was made behind the buttons to provide an intriguing aspect so that the player could see something fascinating on the main menu. Following that, I linked the menus to various cameras in the level blueprint. This was done so that they would move based on whatever menu you were viewing (this was done with the help of another member of the team).

During the prototype stage of development i was tasked with experimenting with designing characters. Previously i have used a program called Fuse to develop characters which is a simple to use character creator which allows me to make characters with clothing and accessories. The reason for making this character is this program is because i could easily get a handful of characters made for a basic prototype and if we have time towards the end of the project we can improve the character models.

PROJECT MANAGEMENT

Our team is attempting to keep open lines of contact. As a team, we believe that if we do not correctly convey our ideas, the end product will fall short of expectations. In this blog, I will go over the many methods that we communicated as a team to ensure that the final result was correct.

Group meetings: We had a number of meetings over the course of the project during the original idea development and prototyping stage. Some of these sessions were in person, when we would all sit around a computer brainstorming new ideas with the rest of the team. During these in-person sessions, we would be able to show other people our prototype project and solicit thoughts and suggestions from outside sources for improvements to the game’s performance.

We also talked as a team on Discord, where we would debate various ideas that team members would bring to the table. We would share screenshots of our work on Discord to ensure that every member of the team was engaging in the task assigned to them.

 

Google Docs: We created a Google Docs document to ensure that every member of the team understood the premise of the game we were developing. We prepared a Google Docs page that explained the essential premise and story of the game so that everyone on the team understood what we were working on. We implemented this so that team members would not deviate from the basic concept while writing blog entries or generating game assets.

Gantt Chart: Two members of the team opted to create gantt charts while developing this game so that everyone in the group could see what needed to be done. The figure below depicts the project gantt chart from all departments, with purple representing Max, green representing Kieran, blue representing myself, and orange representing Cameron and Jack. This chart lets the entire team to understand who should be where at what time, and it is vital not to fall behind or the project will not be done on time, making it incredibly efficient.

3D Modellers assert list: Members of the group discussed and decided on an asset list that would allow 3D modellers to choose and display progress on the items they were creating. The following asset chart depicts the assets and their priority. Individual 3D artists will choose which models to make and label them with their names. They will then change the colour of the box to represent the model’s stage of development.

Production PipelineThe key to producing a successful product is to ensure that everything flows and that things are completed at the proper time. I designed a basic pipeline model to demonstrate what has to be done first before proceeding to the next stage of development. This, together with the gantt chart, helps us to readily identify how we should grow our game.

 

GitHub: We utilised github to help us cooperate as a team since it allowed us to all have access to the same project and contribute our respective components to it. Github was simple to set up, and we began development as soon as we all got access to it.

CHARACTER CREATION

Before beginning to create any characters, I reviewed the proposal documents that my team and I created to get a sense of what the characters will look like. I knew the game would be set in 1920s New Orleans, so I began producing sketches and mood boards to show the rest of the team the style and ideas I had for the characters, as well as whether they wanted me to make any modifications.

CC TINSLEY:

I began with the primary character, CC Tinsley. I began with this character because I would be using it for the main menu and other members of the team would require it to begin working on other sections of the game.I came up with some initial designs for different kinds of attire for the character after looking at various photographs of what a 1920s investigator would look like. After careful consideration, my team and I opted on the brown coat design since we felt it would better fit the character and make him stand out from the other characters wearing black suits.

 

PASSANGERS:

I looked at photographs of upper-class people from the 1920s to create the many characters aboard the boat. I produced some concepts for these characters to present a basic idea of how they could potentially look. After creating the concepts, I communicated with the rest of the team to see if they liked what I had developed and suggest changes.

CAPTAIN AND STAFF:

i also wanted to make some staff to work on the boat to make the enviroment and the surroundings feel more livley. some of the staff that i included was a captain for the boat, kitchen staff and a barman who would work behind the bar and give suttle hints to the detective if they needed any help with anything.

This image has an empty alt attribute; its file name is image-5.png
chef concept 1
kitchen staff / boat staff 1
This image has an empty alt attribute; its file name is image-4.png
chef concept 2
kitchen staff / boat staff 2
captain concept

CHARACTER CREATION:

To build the characters, I utilised a programme called fuse and edited the models that they provided to produce the models that we had. Some of the clothing options provided by fusion are rather limited to the historical period and appearance that we wanted to achieve in our game, so I had to create custom apparel. I did, however, utilise the programme to modify the textures of some of the clothing items in order to give them a more vintage appearance.

To create the bespoke outfit, I imported the modelled character into Blender and decided on additional parts to add to the character. The chef I created needed an apron, so I added a skirt to the model and exported it separately before adding it to the character with minor adjustments. Another item I created was the chef’s toque. To produce this, I placed a cylinder to the top of his head and used the blender tools to create a convincing looking toque with the same material that I used for the apron. I also done similar for other characters such as the barman and others.

CHARACTER PROFILES:

After moddling all of the characters that we needed, I created UI elements featuring the characters, and another member and I developed character backstories and bios for each character to flesh out the characters even further. We did this so that I and the other team members could get a sense of the characters and their personalities.

Character BioCharacter image
CC Tinsley:
Age: REDACTED
Occupation: Detective
Nationality: REDACTED
“Nothing is certain about CC Tinsley. All that is known is that he’s an experienced detective and has some connection with William Eubanks”
William Eubanks:
Age: 31
Occupation: Businessman
Nationality: American
“William Eubanks is an extremely successful businessman and has invited his closest business partners and friends on a voyage down a Mississippi as a celebration of their success”
Irene McAllister-Eubank:
Age: 24
Occupation: Wife
Nationality: British
“Irene is William’s wife. She comes from a wealthy family and is suspected to have married to grow their business ventures. Getting most of her wealth from her inheritance, she lets her subordinates run her ventures whilst she reaps the reward for their labour”
Mr Watanabe:
Age: 64
Occupation: business partner to William Eubanks
Nationality: Japanese
“Mr Watanabe is part of the triumvirate between Eubanks and Lacroix, controlling the trade between Japan and the USA. Mr Watanabe’s role in all of this is to keep the trade moving from Japan to the USA ”
Dr. Franz Haber:
Age: 46
Nationality: Prussian
Occupation: business partner to William Eubanks
“Dr Franz Haber is a world renown chemist whose research into chemical fertilizers allowed food production to almost double, William Eubanks funded this research thus the Haber – Eubanks process was born making Haber famous in his field and Eubanks millions.
Fernand Lacroix:
Age: 42
Occupation: business partner 
Nationality: French
“Fernand Lacroix is one of William Eubanks closest business partners, having made their fortune in trade between New Orleans and Japan where he met Mr Watanabe, Ever since this Triumvirate has had a stranglehold of trade between the USA and the empire of Japan”
Adrian Lilford:
Age: 38
Occupation: Business Partner
Nationality:
“Only being business partners with William for a short amount of time, he has proved to William that he is very dependable to have by his side as he is a gift with getting favourable business deals”
Lillian Brown:
Age: 31
Occupation: William Eubanks childhood friend.
Nationality:
“Being William’s oldest friends, they grew up together and advanced their careers side by side. The extent of their friendship is unknown and has caused speculation within high society.”
David Kirkwood:
Age: 62
Occupation: Archaeologist 
Nationality:
“David Kirkwood is a controversial archaeologist who has obtained historical artefacts through dubious means and sold them to the great museums of Europe, Although eventually retiring from this role of no choice of his own he used his wealth to integrate himself into high society  ”
Capitan Luce:
Age: 59
Occupation: Captain of SS Arctic
Nationality: American
“Captain Luce has been navigating the great rivers of the South since he was sixteen, After working his way from an ordinary seaman he was able to finally purchase his own ship, The SS Arctic. Ever since, he’s been taking the rich and famous down the great Mississippi.”
Chef Piercy:
Age: 39
Occupation: Head Chef
Nationality: British
“Chef Piercy is a world-renowned chef who has worked in the greatest restaurants all throughout Europe, and his been specifically hired by William Eubanks at an exorbitant rate to provide food to die for.”
Jaque Bennett:
Age: 25
Occupation: Bartender
Nationality:French American
“Jaque Bennett worked in bars across New Orleans before landing a job aboard the SS Arctic, He is an old friend of CC Tinsley, although the origin of this friendship is unknown he has proved to be a stalwart ally ever since”

ANIMATION:

To rig and animate the characters, I took the character I created in Mixamo and applied a rig and animations that we could utilise in Unreal. Once the character was imported into Unreal, another member of the team modified the bone names and settings to allow the default Unreal movements as well as any extra animations that we wanted to work on it.

We later decided to give each character their own skelington. This caused issues at the time because we needed separate animations for each character, but the end result allows for better animations for each character with bone positions that are correct.

References:

centralcasting image (2020) 1920s Fashion Guide for Background Actors. available online: https://www.centralcasting.com/1920s-fashion-guide-for-background-actors/ [accessed 18/01/2023]

hespokestyle (NA) The Ultimate Guide to 1920’s Men’s Fashion. available online: https://hespokestyle.com/1920s-mens-fashion/ [accessed 18/01/2023]

hancock historical museum (NA) Woman’s fashion in the 1920’s. available online: https://hancockhistoricalmuseum.org/i-love-the-1920s/womens-fashion-in-the-1920s/ [accessed 18/01/2023]

queen dancer.com (NA) queen dancer. available online: https://www.queendancer.co.uk/ [accessed 18/01/2023]

MAIN MENU

CONCET ART:

When creating the main menu, I came up with various ideas for what I might use for the main menu, such as having the figure surrounded by darkness with the buttons to the side of him. We also investigated many ideas for the main menu, such as the main character being on a boat.

I opted to focus on making the core functionality of the menu and the background basic for the development stage, allowing me to later build more in time depending on how much time we have for development. If I had more time to make a menu, I would have constructed a scene that allows me to show more of the environment and give the game a greater feel.

PROTOTYPING:

I constructed a basic block out scene in Unreal for the main menu that I could modify with objects provided by the 3D modellers. Then, by adding default ui elements, I was able to create several menus into which I could incorporate various features for adding more options to the game and allowing the player to choose graphical settings to help it run on their own computer.

To create the options menu, I had to call different buttons to perform different functions within Unreal. For example, for each option I wanted to offer, I needed four separate buttons. I then told the button to do a certain function using blueprints, allowing that button to determine the graphical quality of the game.

I implemented some basic ideas for buttons I could utilise into the game’s main menu and the various sub menus I made off of that. I wanted the buttoins I created to seem like ripped and torn pieces of scrap paper. I was able to make the buttons that I first created look more realistic after further development.

To add more elements to the main menu, I proposed adding a character model viewer that would allow us to select a character and observe that figure in an idle stance. Another team member and I created a button in the extras menu that allows the camera to move between the extras menu camera and the character viewer camera. It was merely a matter of modifying the shown model after building that button, which was accomplished by adding a sim blueprint to the button, which updated the mesh on a preplaced model that was already in that environment.

Initially, when you pressed the character you wanted to select for the first time, you would see a transition when the engine was generating the characters textures, which didn’t look well and wouldn’t look professional for the end output. I countered this by creating a separate platform with all of the characters on it, so that the engin could already have the textures built.

To make the game load faster, we added all of the models created into the main menu, allowing them to all load from the beginning, allowing you to load into the game right away with maybe only a short loading period. People had some feedback on the menu’s user interface after some play testing. Some users thought the UI was nice, although there were some inconsistencies between the text fonts and colours on some of the buttons. I made the decision to alter this to make it more uniform. I also made the start button fade in and out to load you into the game. This was done to make it more professional and to transition into the introductory cutscene. I later added various partical systems to the environment to make it feel less dull and to provide life to it.

FINAL MENU:

CUT SCENES

PRE-RENDERED VS IN-GAME CUT SCENES:

I debated whether to make in-game cut scene or have them pre-rendered for this game. The advantage of having pre-rendered cut scenes is that it allows me to assist in the transition between different levels. Instead of a basic loading screen, I could mask the change with a pre-rendered cut scene, making it more immersive for the player and preventing them from feeling disconnected from the game they are playing.

In-game cut scenes will be tailored to the game’s resolution, allowing them to fit more into the game. Pre_rendered cut scenes can only be recorded at a specific resolution. For example, if you record a pre_rendered cut scene at 1920 x 1080, it will only be displayed at that resolution in game.

OPENING CUTSCENE:

I was entrusted with creating the first cutscene, which shows the host of the party being poisoned. I needed to wait for the dining room to be completely blocked out before I could figure out where all of the characters would be for the main sequence. I knew what I had to establish in the cutscene after discussing the story with other team members and knowing what would happen before and after the cutscene. I decided to make this cutscene in game because all of the assets I need are already done, and anything that isn’t modelled can be substituted with block out assets, eliminating the need to re-render the cutscene.

We chose to add more to the opening cutscene after some thought to develop more of a narrative. We discussed adding a scenario in which the main character, CC Tinsley, speaks to the audience and establishes that the game you’re about to play is a flashback to a story that CC Tinsley is telling you.

I wanted to make linkages between the suspects and the character who is being poisened in this moment. Because this is one of the first things the player will see and they won’t know anything about the plot, I wanted to establish the setting for them. This will be accomplished quickly with narration and the characters speaking within the cutscene. More in-game dialogue between characters will create more links and backstory.

After some additional thought, I approached the team with the notion of having the opening cutscene pre-rendered. I wanted to accomplish this because it would be better for playing the game if there was no loading screen between the main menu and the cutscene so that the engine could generate the environment. The cutscene would be the loading screen that connects the menu and gameplay. This allows for more interaction with the player because there is always something happening on that they may focus on. I wanted to render this cutscene at least in 2k resolution so that it would appear well on most monitors. I’ll add dialogue and music to the video once it’s rendered to add additional detail.

FINAL CUTSCENE:

I added voice acting, sound effects, and jazz music to the opening cinematic to give it more atmosphere.

 

GUN SHOT CUTSCENE:

I had to depict the character William Eubanks’ demise in the second cutscene. I wanted to make homage to vintage detective serials when the murderer’s silhouette is seen for this. Assailant would be pointing pistol at defenceless William. I utilised the CC Tinsley hand that another team member had animated in a grab animation as the murderer’s hand and gave it a black texture to maintain the sense of ambiguity regarding the identity of the murderer and prevent you from determining it from the murderer’s hand alone. For a more realistic appearance and to better conceal the hand, I also gave the camera depth of field. This scene is a is used to transition between the first and second locations.

UI DESIGN

Making 2D components for the UI was another responsibility I had for this project. This meant that I would create UI design concepts and present them to the team members for feedback. I would then replace the default elements that they had used after another team member had developed the functionality. I would create user interface elements for sections like the main menu, dialogue boxes, and a HUD if necessary. I had to discuss with the rest of the team what UI components the game required before I could start creating any UI.

EVIDENCE BOARED:

We intended to incorporate an evidence board so that the player could connect pieces of evidence and increase gameplay immersion. I sketched out a plan for the evidence board, and another team member suggested that they implement a system that allows you to draw lines between the items on the board.

We ultimately decided against including the evidence board ideas since it was tedious for players to traverse back and forth from the room to other parts of the game. Since the player may always carry a journal or note book with them, we decided to switch the gameplay from being evidence-based to that instead.

JOURNEL/NOTEBOOK:

I sketched out a basic design for a notebook system that would play an animation of the main character taking out a book and flipping through the pages. This would increase player interaction and be an excellent idea to test and incorporate into the game.

Later, we made the decision to use an ui element rather than a system where you pull out a book. I examined the idea and the games that served as the project’s inspiration for this. The character biographies in-game in Batman: Arkham Asylum resemble paperwork. This was one of the games I selected. I made the decision to use this as a guide when developing our ui.

I created various pictures of the characters that resembled photographs of the ones that were uploaded on the page. I then created a mock-up button that another team member would later incorporate into the game.

DIALOG BOXES:

I initially added the button ui texture to the ui for the dialogue boxes, but I thought it might be enhanced. I created a dialogue box that appeared to be a file that a detective would use after studying photographs of various user interface boxes for the upgraded user interface. For this, there would be room for the suspects name at the top and space in the middle for text options. Iadded fonts into the game. Initially, a handwritten font was to be included, but because it was difficult to read, i modified the font to one that was more blocky. I did this to make it easier for players to read because several testers for our game had trouble doing so.

OVERVIEW

TEAM MANAGMENT:

We chose Max to be the team leader and organiser right from the start of the project. because he is the sharpest and best at organising. In order for the team to know what needed to be done and how much time they had to complete it, we set up a gantt chart and a trello board.

We communicated using apps like Discord and had in-person meetings to go over all we needed to do and check our schedules. We also take a look at each person’s primary skills. When asked if they were comfortable with the tasks they were performing, everyone said they were.

After a few weeks of development, we would hold a brief meeting to check on everyone’s progress. If somebody wasn’t keeping up, we would ask them if they needed assistance or if anything else could be done to make things easier on them and free up work for others.

We learned a lot more about team collaboration and how to properly organise it throughout the course of the project. When the development process first began, we had trouble getting everyone to work on the project at once. One method we resolved this problem was by scheduling different times for people to work on the project. For instance, the 3D modellers would work on the project and upload their models so that the level designers could go on and edit and adjust what they had posted later. Another fix that we did was giving everyone their own levels so that the 3D modelers could upolaod there works to their own levels and the coder can do all the machanics in his own level.

WHAT WENT WELL:

Overall, there was good team communication and attendance from the members who needed to be there. Even though the original concept for the product was altered, we still managed to create a complete, solid, and enjoyable final product that met the requirements.

The story is simple to follow, and by using cutscenes, we were able to tie its disparate parts together and present a compelling narrative.

WHAT COULD HAVE BEEN IMPROVED:

Despite having good group communication. We had trouble getting people on the project and keeping track of who was working on it when at the beginning because we didn’t fully understand the communication component until we were developing our product.

I also believe that the plot should have been developed much earlier in the development process so that we could tell the 3D modellers what clues we required knowing what the tale was rather than having them create some models and then determine the story later.

My role

For my main role for the major project I was tasked with being a UX and UI developer. For this role I was to design a main menu for our game and create UI for all the different elements in our game such as pause menu and dialog boxes. As the UX developer I need to try and make the UI easy to follow and allow the player to not be overwhelmed by the amount of options there is. I was tasked this by my team as I have made main menus before for other projects and I have had some previous experience in that field.

For side roles I may take on in the project I am able to do character design and also 3D modeling depending on the amount of 3D models that need to be produced by the other 3D modelers. Additionally I will be creating cutscenes as part of my role in the project. These will be used to tell the narrative of the game and will introduce characters into the story.

Scroll to Top