Project 1:

Click To Play

The Client:

This page has been worked further upon after the initial submission of the projects deadline.

Key Points:

Client is 'Unruly Ember'
I must produce a functional UI game menu in unreal engine 4
Must be suitable to the given themes and target audience
The aim is to showcase my skills so the client might hire me.
Three themes: Horror; Sport and Medieval
Target audience: 12 - 25 year olds
Must comply with PEGI regulations

More in Depth:

The Client is an indie game developer who goes by the name of Unruly Ember, I am required to produce (design and develop) a UI game menu in Unreal Engine 4 that is suitable to the theme and target audience. It must be fully functional. The aim of this project is to showcase my skills to the client so that they might hire me as a prospective developer. I have three themes to choose from: Medieval; Sports and Horror. I will ask people in the target audience which theme appeals to them the most and choose my theme from that. The target audience are young people aged 12 - 25, and I will check the PEGI regulations to assure I stay within those guidelines.

Theme Research:

Stimulus Mind Map

I have done some research to help me decide on what theme I will choose to make my menu off. First of all I made a mind map that considers the characteristics of each theme, as well as giving examples of games from each theme of which I will base a future mood board off of.

Medieval games, emphasise the landscape which would work well as the background for a main menu. As well as this, medieval games are normally based off ancient civilisations. Overall I have a lot of options I can use if I do choose to make a medieval themed game menu.

Horror games are normally very dark, therefore I would have to make the menu dark and mysterious. They feature confined spaces along with creative uses of colours and lighting to emphasise that fear factor, making a menu of this theme would be very dependant on my photoshop skills to use lighting effectively.

Sport Games almost always rely heavily on their online multiplayer aspect, this means I would have to add extra buttons to my menu to accommodate for the multiplayer functionality, such as online play and a social tab where friends are located. They are normally quite colourful and vibrant as the teams have different colour kit, and the stadium is full of bright lights.

Menu Mood Board

Outlast: An atmospheric horror game, the feelings this game gives just by its theme and colour pallete is amazing. It also blurs part of the background and title, small details like this really add to the fear factor. The use of black in the menu makes the foreground look like a silhouette, and the de-saturated green really works well together. Making a horror menu would rely on my ability to use colour effectively to convey a dark, scary feeling.

NBA 2K20: A basketball sports game, the main menu for this game has a lot of bright colours: the team logos; the background; the players kit etc. For me to make a sports menu, I would need to research teams of that sport, and have a bright background.

In this mood board I looked at the unique properties of some game menus that I selected for each theme.

For Honor: A medieval fighting game, the main menu shows the vast landscape as a background image, this is important as it ties in to the games functionality. This also fits the medieval game as, seen in the mind map, the medieval times were heavily based on landscape and terrain. Making a menu on this theme would require a suitable colour pallete to really show the landscape of the world.

Medieval

Horror

Sport

Focuses on landscapes
Natural colours
Lots of options (environment, characters etc)
If showing blood, I must keep it suitable for the target audience

Dark theme
Clever use of lighting
Will have to convey the horror element whilst remaining suitable for the target audience

Lots of colours
Bright colours
Multiplayer buttons

What theme I will choose

I will be choosing to make a medieval game menu, this is because I play a lot of medieval games like God of War and For Honor, also I really like the types of colours medieval games use and I believe I will be able to efficiently exploit them to make a suitable game menu for the client.

Style Sheet Survey Results:

I made a style sheet containing a colour pallet, fonts and how my buttons might look. I then made a survey in order to ask helpful questions and gain essential feedback improve upon it.

Here are the results:

Initial Style Sheet

1.

This question was asking about the colour scheme I had, and what other colours they would recommend.

Most of the answers included brown and grey, and one person mentioned red.

This was extremely useful to me as it opened my eyes to other possibilities and other colours that would fit really well, this also helped me think of more ideas I could use for my menu assets.

2.

This question was asking if the initial colour scheme was suitable, to which %88 answered yes and %13 answered no.

This told me that the colour scheme was suitable but could definitely be improved.

3.

I then asked what colours they recommend I include into my colour scheme, the most popular colours where brown and grey.

This was really helpful as I could include these colours in my updated colour scheme.

4.

This question simply asked which font they thought was most suitable for a medieval game.

Antihero was the most popular with %25 of the votes, so I will be using this font.

5.

I asked if I should design actual buttons for my options instead of leaving it as text with a transparent background (which was my original idea). However, %88 of people suggested I make actual buttons for my menu.

Here is a link to the survey:

Style Sheet Improvements:

Using the results of the survey (shown above), I have expanded upon my style sheet.

I added requested colours and included the Hex Codes of the colours so I can get the exact colour.

I underlined the most popular font so I know which one to use.

Finally, I added some buttons I found online that I think is suitable for a medieval game.

Feedback Updated Style Sheet

Colour:

Yellow-ish for things like banners and flags
Green for landscape
Blue for water
Brown for dirt or wooden shields etc
Grey for swords and armour
Red for blood or injuries (toned down to where the PEGI 12 rating won't be compromised)

Font:

The survey showed that the "Antihero" font was the most popular and rated the most suitable font.
Therefore I will be using this font for my menu

Buttons:

The survey showed that majority of responses suggest I make buttons instead of making it text with a transparent background.
Here are some examples I found that I might draw inspiration from.

Limitations and Specifications

Time:

Time is a big limitation for this project, making sure I get the task done by the deadline is essential. To do this I have created a time schedule that I will follow, this shows time management skills that the employer will also be looking for. The schedule I have made will allow me the time to get the project done and leave me with time for contingencies and any time left will be spent to improve and push my grade.

Each of the tasks are main things I need to do in this project, I thought carefully about how much time I would need per task, and I gave myself some extra time to do any task.

Aspect Ratio & Resolution:

What is Aspect Ratio?

Aspect ratio is the ratio of a screen's width to it's height, there are many aspect ratios that best suit different screen resolutions.

16:9 is the most common aspect ratio, this aspect ratio is widely used across the majority of all resolutions (screen sizes). There are only a select few that differ from this ratio.

The biggest aspect ratio right now is 32:9, this aspect ratio is for a "super ultrawide" monitor.

Second to that is the "ultrawide" monitor with an aspect ratio of 21:9, both the "ultrawide" and "super ultrawide" monitors have the same height ratio as the "widescreen" monitor, the only difference is that they are wider (as implied by the name) so there width ratio is higher.

16:9 would be the best ratio for me to make my menu in.

What is Resolution?

The resolution of a screen is the amount of pixels the screen can show vertically and horizontally.

There are a few different screen resolutions that are used today. The most common is 1920 x 1080, this is the standard for a High Definition screen.

However, there is another version of this resolution, 1920 x 1200, this resolution is quite dated and less popular than 1920 x 1080, but it was for those who couldn't afford the higher res monitors but wanted more than 1920 x 1080.

The Biggest resolution today is 3840 x 2160. This is the resolution of a 4k monitor. It would be most suitable for me to make my menu in 3840 x 2160.

It is important to note that resolution is not the same as how big the screen is, for example a super ultra wide monitor could have the same resolution as a widescreen monitor.

What I will do

For my menu, I will make the resolution 3840 x 2160, this is so it fits on every resolution. Images can always be scaled down but not always scaled up.

The Aspect ratio will be 16:9, this is the most common and is suitable with the majority of screens today.

With these specifications, my menu will be suitable to be displayed on every screen.

Software Used

Photoshop

What is Photoshop?

Photoshop is an extremely powerful photo editing software owned by Adobe Systems Inc.

It is widely used all over the world, by many types of people and big corporations.

I will be using this software to help design my game menu.

How I will use it

I will use Photoshop to design the assets for my game menu.

It will be much more efficient to make these assets in Photoshop, such as backgrounds and buttons.

This is because of the tools available in Photoshop, they allow me to edit in high detail, this will be helpful for the development of my assets

To use the assets I make in Photoshop in Unreal Engine, they will have to be in the .png file format.

Unreal Engine 4

What is Unreal Engine?

Unreal Engine is a game development engine created by Epic Games, however it is now used in most industries of media, such as the production of films.

It is one of, if not, the most powerful game engines out there.

It has everything you will need for game development, including the tools for making a game menu, which is what I will be using it for in this project.

I will be using Unreal Engine 4.27.

How I will use it

I will be using Unreal Engine 4 to develop and create my game menu.

Unreal Engine has 'widgets' that I will use to make my menu.

In Unreal Engine I will: place all my assets I have made; animate my assets; make them functional and test the menu.

Unreal Engine is the functional part of the assignment, where everything I have previously made will come together to form my final product.

PEGI Regulations

What are the PEGI regulations?

PEGI (Pan European Game Information) handles how games are aged and that people know what sort of content the game contains.

PEGI has different symbols that tell the buyer information about the recommended age the player should be, as well as the game's contents.

For game developers, they must develop their game so that it is deemed fit for the target audience.

Certain age ratings are limited to what content they can include, for example you can not have gambling in a game for anyone under the age of 18.

As for in-game purchases, a card holder is required to enter information for the purchase, so they are available at the lowest age rating.

Source of Information

How it applies to the Target Audience

The client has stated that the target audience for the game menu are young people aged 12 - 25.

To meet these requirements my game menu will not be aged higher than PEGI 12.

The regulations of this are:

Slightly graphic violence is allowed as long as it towards fantasy characters, i.e. Aliens or mythical creatures.
Sexual innuendos and posturing is also allowed.
Any bad language must considered mild.
Moderate horror is allowed, but nothing to scary.

The limitations of this are:

Any type of gambling found in casinos or the like.
Anything to do with drugs.
Any sort of discrimination

Menu Mock-ups:

Layouts and Flowchart

Layout 1

Layout 2

These are rough looks of what layouts I might choose for my menu, these only reflects the layout I might use, not the font, colours or buttons.

I labeled each layout so I can create a survey and gain feedback on how I might be able to improve.

Layout 3

Flowchart:

This flowchart is depicting how my menu buttons will work, I don't have to script any of these to work except the new game button. However, if I have any time left at the end I will be able to push my grade by scripting the other buttons as well.

Layouts and Flowchart: Survey Results

Layout Feedback:

1.

2.

Flowchart Feedback:

1.

This question asked which layout was the best, %67 answered that layout 2 was the best.

The other %33 answering layout 1.

This is interesting as I was expecting layout 3 to be most popular as I included more elements.

Here I asked for suggestions of what I could add to the layout, all of these answers don't really help me since these are just layout prototypes and aren't the actual elements I will use for the menu.

%67 of answers stated that they could easily read the flowchart.

%17 answered that they could more or less read it easily.

The final %17 answered that they could not read it easily (but this answer is irrelevant as they just couldn't be bothered)

This confirms that my flowchart is suitable.

2.

5/6 people answered that the paths of the flow chart made sense.

However, 1 person answered no.

This tells me that there isn't majority of people understand the flowchart, therefore I can use it in my menu.

3.

This is what I was referring to in question 1.

4.

Majority of answers said that there wasn't anything else, but one person said that there was too much, which I agree with.

Here's a link to the survey:

Flowchart Update

I took the criticism from my survey and removed any unnecessary parts that would be too hard and/or unneeded.

The result is much better and clearer, as well, I will be able to do all this in the time I have.

I removed the "are you sure" choices from the load and new game buttons, I also took away all the settings except for audio, which I made it it's own section.

Asset List

Background Image

My background image is 3840 x 2160 pixels, this is because that is the resolution of a 4k monitor, and it is the biggest resolution today. This means it will be able to fit on any screen because it can scale down.

To make the background I downloaded 5 images that I then edited in Photoshop.

Source: https://wallpapercave.com/w/wp2338383

.jpg file

Source: https://www.pinterest.co.uk/pin/243405554833749161/

.jpg file

Source: https://fire-risk-assessment-network.com/blog/disastrous-fires-uk/

.png file

Source: https://survivalstronghold.com/simple-survival-smoke-signal/

.jpg file

.png fle

My background image is completed, and looks like this:

3840 x 2160

.jpg file

Button Image

My buttons were 2268 x 1748 but that was way too big, so I resized them to 261 x 124. I downloaded a base image which I edited in Photoshop.

Source: https://wallpaperaccess.com/ancient-scroll

.jpg file

My button asset is complete and looks like this:

.png file

Info Box

My info box asset was 1424 x 1777 pixels; however, this was too big, so I resized it to 560 x 674.5.

I downloaded this base image and edited it in photoshop.

Source: https://www.pngwing.com/en/free-png-bxfzo

.png file

.png file (had to screenshot it)

Font

The font I used is a font I downloaded called Antihero, it's a TrueTypeFont (ttp) format.

Source: Antihero Font | dafont.com

Sound Effects

I have 2 sound effects, a hover sound effect and clashing swords (clicked) sound effect.

The hover sound effect has a bit rate of 1536kbps

Whereas the clicked sound effect has a bit rate of 1411kbps.

Hovered Sound effect: Freesound - "g_ui_button_hover_1.wav" by GameDevC

Clicked Sound effect: https://www.youtube.com/watch?v=vEXMfzit17o

I converted the files to .wav files because that is the only audio type unreal accepts.

Background Track

For my background music I used a royalty free soundtrack

https://www.youtube.com/watch?v=hXV5MfePBRs&t=2s (15:21 - 18:26)

It has a bit rate of 1411 kbps and it is a .wav file

Production Log

Slide1

Slide2

Slide136

Slide1

1/136

Showcase & Testing

Here's me testing the menu: YouTube Link

Here's my brother testing the menu: YouTube Link

Project Files and Application

Link to Unreal Project Files:

Unreal Project Files

Link to exe application:

Click To Play Menu .exe

Evaluation

Experience:

Throughout this project I was tasked with designing and developing a functional UI game menu, inside unreal engine. I had to research themes, gather feedback and develop the game menu. In this project I felt like I learnt a lot in aspects such as, sound systems, efficient UI development and time management. It was fun making the assets and scripting all the buttons and sound. I felt a bit of pressure with it being the first project but I believe I came out with an exceptional project in the end.

Reflection:

What went well: I succeeded in designing and developing a functional menu that meets the PEGI regulations of the set target audience, and everything works the way it's supposed to. I finished all my graphical assets and documented the whole development process, I also managed to (more or less) stick to my time schedule. I also backed everything up to my college one drive as I was doing the assignment just in case anything went wrong. I also learnt some new skills, as talked about above, the big skill being sound in Unreal Engine. I learnt how to properly make: Audio Cues, Sound Classes and Sound Mix Modifiers. These all work very closely with each-other. I also learnt that the audio file type unreal accepts is the .wav file type.

What I could of done better: I should of took more time to research the other themes and compare them in greater detail, I also should've made a style sheet for the other two themes. I should have written a weekly evaluation to discuss how that week went and what I achieved, this would have helped me see my goals clearer and what I could improve.

What I Would Change: I would have done more research for the other two themes instead of just the one I liked, and I would compare all three in more detail, by, giving each theme their own mood board, allowing me to talk about them more. I could've talked about what actually makes the menu's suitable for their respective themes. Such as, how the dark shadows in the outlast menu convey a sense of fear of the unknown.

Action:

I will take what I have learned from this project and this evaluation to improve on my next project and make sure I cover the points I should have covered in this project, I will definitely give weekly evaluations of progress and how the project is going. I'll use more time management tools to remind myself to do these things.