SHINDY LEONG - A1 - Interface Design of a Working Prototype

SHINDY LEONG

Assignment - Interface Design of a Working Prototype

SHINDY LEONG

Game ideas

Genre: Side scroller
Narrative: "A young robot scientist has to win the international paintball robot tournament in order to get rich and fund his latest project - a better paintball robot."
Art Style: Stylized
Tone: Dark mood or starts dark but turns ligher (other way around)
Objectives:

> Goal - Eliminate oppenents with paintball

> Collection - such as ammo or total ammo is unlimited but reloading is required , powerups, health/shields and coins

> Boss fight - Low priority

Location: Robot Paintball Arena - oppenents and environment get coloured with paint

UI Menu options

Artstyle

Reference - Artstyle

My idea for the UI Menu so far is to try our various compositions and have the tank on the menu with colour splashing on the screen. Putting these elements together will give the player an idea what the game play is about. The mood of the game will be colourful, since the game inspiration is taken from Splatoon. The colourful hues will give the player a postive and energetic feeling.

References

UI - Reference

Concepts

Quick sketch

Clean up

I did a couple of quick sketches and cleaned it up afterwards to get a better idea how my UI would look like. I wanted to include the robot and splash as it's sums up the game quite well. I liked thumbnail 5 as there is a robot close up, blurry background which brings focus to the menu and robot. Including the composition, everything is mapped out great. I also want to include some robot animation to it, but I'm not sure yet.

Colour exploration

Robot_Trim.mp4

Speedpaint Robot

Drawing the robot, I wanted it to be a mix of tank but sci-fi to make it look more tech and modern. Reference images are from sketchfab, using the 3D models allowed me to get the different perspectives. This gives a more accurate perspective as well. I used the right robot as a guide for the body, while doing the blockout I added some other parts taken from two other images. I used Procreate and time-lapse built in the software.

I did several different colour explorations with thumbnail 5. I mainly want to keep the contrasted hues and splash on the walls as it explains the game. To focus on the robot I blurred the background, this is also to minimise the amount of detail in the game menu as it should be kept simple. I decided to explore thumbnail 4 further by minimising the logo background colour as it looks too messy and replace it with a different font downloaded from dafont [1]. I felt the others had too much or too little in the main menu. But I think having the low opacity behind the buttons separates the robot from the whole UI. I want to add a head animation where the head moves left and right and an animation when you hover on the menu buttons as the splash expand from smaller > bigger. The hover animation would have been too much if I included the low opacity background as well, that’s the reason I didn’t choose the other ones.

Before and after

MENU - Setting up the layout

Flowchart

This flowchart is the same as the flowchart above, but this was mainly to clarify for myself what buttons and menusI will need for my UI. Since I have done some UI from last year I will be following the same tutorials and eventually try to expand it.

I will begin with setting up a basic layout for each panel, and add my final designs afterwards.

Start Menu in Unity by Brackeys [2]

Buttons

As I have set up all the panels and buttons, I began adding the navigators. Each button leads to another panel and leads back to the main menu. I have so far set up the Main menu > Options Menu and the other way around. There was no coding included, this was done by going to the options button and "On Click ()". The empty boxes where I would have to drag the options menu and set.active, and also tick the empty square box to make it enabled.

Layout and buttons

Since the tutorial doesn't include the other buttons I have included, I will be copy and paste the options menu and edit the layout. I will also add a back button, there won't be much required besides an illustration to show the tutorial and scoreboard.

A small change I have done it to get rid of the scoreboard as it's not supposed to be included, I misunderstood the flowchart with the team. There will only be Start, Tutorial, Options and Quit.

I created two scenes, UI and Game. The game is only used as a background right now, as it shows the play button works. I had to add both scenes in the build settings to be able to open the other scene. I will also include pause menu in the game screen to allow me to go back to main menu.

Pause Menu

I set up the Pause Menu in my Game scene, it required some scripts for Main menu and Pause Menu but there were no difficulties. I have so far set up the layouts to navigate to different menus. I'm planning to include sound when pressing the button and background music to expand the players experience.

Considering I missed the options button in the Pause menu I will be adding it in there. Although the tutorial doesn't show how to connect it to the options menu, I will have to figure it out myself. I’m sure it’s done in the dynamic float option, the same way I did for the other menus.

Pause Menu in Unity by Brackeys [3]

Pause menu

Options menu in Pause menu

I managed to figure out how to set up the dynamic float options, the ingame text kept disappearing. I copied the whole group "Options menu" to game scene to be able to make it work.

When I press "options button" it will be enabled, the pause menu will be disabled.

Settings Menu

Make a volume slider by John [4]

Settings menu in Unity by Brackeys [6]

Layout - Options Menu

Brightness and audio + add ons

Going through some research I couldn't find any scripts or tutorials for brightness settings, I will be skipping this part. Although, I set up the volume slider following the article on the left side. I thought having some background music would give the player a better experience within the UI, the volume slider is also adjustable.

To add in some extra options I will be adding graphics and fullscreen options as well. This will be done through Brackeys tutorial.

Controls and back button

For the controls I decided to create some illustration of how to use the controls. This will be an easy illustration as this project is focused on the UI, if the game was further developed there could have been more advanced such as change buttons, mouse sensitivity etc.

UI Design - Process

Main Menu

Finishing setting up all the layouts and menus I will begin to do the UI design. Since the main menu is the only design I have done so far, I will set up the button animations when hovering the buttons. Afterwards, do the rest of the designs for the menus as is won't require as much as the main menu. I might include a start screen where it says, "Press any button to start game". Things I need to get done is replacing the plain layouts with my own artwork, add my animations (mostly splatter animations), icons and sounds.

1. Issue - Sprite hidden

I tried importing my splatter sheet into my logo, for some reason the sprite is hidden. The red area I have marked is the tiny sprite, it was the correct image size which was weird.

1. Solved - Sprite Hidden

I managed to fix the issue, instead I copy and pasted the playbutton and removed the button compontent, changed the font and replaced the animation with my new animation. The image size was correct, I didn't find any solution online but managed to solve the issue.

Splatter - Sprite Sheet

Before - Issue

After - Solved

2. Issue - Title animation not appearing

An issue I came across is the Main Menu title animation not appearing once I go from In-game scene to Main Menu scene. The animation should be sliding in once the Main Menu scene is enabled, in this case nothing appears.

2. Solved -Title animation not appearing

The issue was the script in the Pause Menu, I had to changed the time.TimeScale from 0 to 1. Time scale 0 pauses all functions which caused this issue, setting tims scale to 1 will unpause everything.

Before and after

Button Animation by N3K EN [5]

I followed this tutorial to get an animation whenever the button is highlighted. I used a similar splatter sprite to the logo.

3. Issue - button background

I had a small issue where black edges would appear when hovering on the button. I solved the issue by removing the shadow in Photoshop and instead using Unity's shadow.

Size adjustment

The highlighted button sprites would come in a low resolution even though it's the correct size. I fixed the resolution by changing it from Max size: 2048 > 8192

Exploration - Splatter animation

I'm not satisfied with the pink splatter animation as I find the shape size too small and the resolution is low even though I set it to 8192. I did some exploration where I wanted a bolder splatter, and I tried adding some gradient and shadows to make is less plain.

Receiving feedback I decided to go for number 3 splatter animation as it suits the style and menus. Since the menus have shadows and the whole scene itself, it would match the other assets.

1 - With shadow

2 - Without shadow

3 - With shadow

4 - Without shadow

Main Menu

Final Main Menu

For the final main menu, I added an animation for the Paintball title with a fade in and splatter animation and different colours when hovering over the buttons. These small details makes such a huge difference as it increases the UI experience and our eyes focuses better to moving objects.

We decided to name the game to Robo Yam Slam, the word Yam is similar to pwned and is used in the sports when defeating their opponents.

Start Menu

Splatter effect by MOBOX Graphics [7]

Splatter animation - After Effects

For the start menu I wanted to have some animation before entering the main menu. Since photoshop doesn't give such smooth animation I decided to try After Effects, this is my first time creating an animation and using this software. I think besides using Photoshop for animation and editing, I thought it would be a great way to learn After Effects as it's used for animation and might be quicker to create my splatter animation.

Without rough edges (effect)

With rough edges (effect)

After a few attempts trying to create my splatter animation I managed to create a decent splatter. I found the software confusing at first, the layout is different to photoshop. Although, the effects After Effects have effects that is very useful. For my splatter animation the effect called "Rough Edges" created a sort of liquid effect. I would definitely consider using After Effect for animation rather than Photoshop, this gave a much smoother result.

Sprite sheet - Splatter

Each frame was saved as a PNG and placing each frame in photoshop would be very time consuming. I created the spritesheet using GLUEIT [8] which allowed me to select all images and convert it into a spritesheet, I could also adjust number of columns.

Final Start Screen

I tried to look for a "Press any button to start" script but I didn't manage to find anything. Instead, I decided to change the text to "Press screen to start". I added an invisible button covering the whole Start Screen, once you press the screen it navigates to the Main Menu. I used the same script used for the play button that leads to the in-game scene. I thought it's the same process, all I did was adjust the script a bit.

The splatter animation is supposed to give the illusion it's dropping down which makes the Paintball text pop up. I didn't have any issues with the animation since it's very similar to the Main Menu process. My thought about the design was to keep it simple and focus more on the Main menu. Considering my UI has a simple design I thought adding animation to it would explain the game through images.

Play Menu

For the in-game menu there weren't much to add besides replacing the font, importing the menu, options and quit buttons from main menu scene and re-applying the settings in dynamic float options to each button in the pause menu which was the exact same process in the main menu.

This is just a prototype of the User interface for the in-game scene, it's difficult to know what should be in the pause menu as we are making the game next semester. But I'm glad I managed to lead each button to another as everything works smoothly.

Tutorial Menu

In the tutorial menu I wanted to include an image gallery with a next/previous button whilst there is a text on the right side explaining the game mechanics. Playing games such as Ghost Recon Wildlands and Ghost Recon Breakpoint I liked the idea of having images and game mechanics explanation. I find it extremely helpful and tend to understand the mechanics quicker and easier.

I tried to look for several tutorials but didn't any, it was only image sliders tutorials. I decided to figure it out myself, I used the same method as the other buttons in the menu.

When I press the left button, image 2 get put on false and image 1 get put on true and the other way around.

Options Menu

Before

After

Control Menu

Reference

Exploration

I did some exploration with the controls menu as I haven't done any concept drawing for the other menus besides the Main Menu. I found this method more efficient.

Number 1 is the first exploration I did, everything is spread out and too much going on in the UI caused by the splatters. In number 2 I decided to remove the splatter as it was the issue that caused the messy UI, although there is still something that makes it look untidy. In number 3 I switched to a simple font instead and removed the white window, the main issue here was the white window that took a lot of space and made the white font blend together which could be confusing.

For the final number 4 I decided to go back to the old font as I find the simple font too boring, the old font suits the design of the game better. I also changed the larger text to blue colour to emphasize and structured. Since we are doing the UI first my team haven't decided the controls for the game, this is just an example of the controls. But I consider these controls easy to use and learn as these are the controls for most PC games.

Exploration

Controls Menu - Before

Final Controls Menu - After

Sounds

Click button without script by Troublesome Girl [9]

Lastly, I decided to import some audio for the splatter animation in the start menu, buttons and background music in the main menu. Combining the animation and GUI with the audio makes the player identify the sounds. An example could be the splatter sound, combining the splatter animation and splatter sound will give a better identification what it is. I only used 3 audios for the UI since having too many audios can irritate the player.

Start Menu

For the start menu I created an Audio Source and dragged in splatter audio into AudioClip, luckily the audio plays at the same time as the splatter animation. There wasn't any issue.

Button audio

The button audio was created the same way as the Start Menu Audio Source, but I put Play On Awake to false which will prevent the audio from playing when starting the Game scene.

In the dynamic float options, I added an Audio Source > PlayOneShot (AudioClip) > Dragged AudiocCip into empty box. Once I press the button, the button audio will be turned on.

Splatter sound - Start Menu link
Music - Main Menu link
Button sound - Main Menu link (same as pause menu)
Button sound - Pause Menu link (same as main menu)

Audio for UI

Feedback

Quit Screen

To get the quit screen I changed the Quit text to yes, it's function is to shut down the game. I changed the Quit button in the Menu by using the Dynamic Float Option, when the button is pressed the quit screen will be set to true (enables the quit screen).

Feedback

Receiving some feedback there were a few improvements and suggestions to add to my UI.

1. Esc back button - Something I didn't notice is when the esc button is pressed, it should go back to previous menu. However, I tried using the script from the Pause Menu since pressing Esc button opens the pause menu. Although I tried to make it work, I kept getting errors and couldn’t open my game. I will instead skip the esc back button as it would cause too many issues.

2. FIXED - Quit button - Going through the build.exe game I got a suggestion to add a quit screen when pressing the quit button. The reason is to prevent the game from closing down completely if you happen to click the quit button by mistake.

3. FIXED - Tutorial hover button - There were a small issue when hovering over the tutorial button in the main menu, the tutorial button panel was larger than the text which caused some issues when trying to hover between the play button and tutorial button.

4. Robot Animation – Another feedback was to add robot animation which I mentioned earlier. But having the robot follow the mouse and shoot when pressing the button would have been a good idea. Although I attempted to make the head move, it didn’t work. I copied an old ArmRotation.script from last year project for a shooter game. But the head got stuck and couldn’t move the head. I will try to get it work for another project or when we begin the group project next semester.

Build game

Issue

There were issues with the tutorial animation and quit screen. The yes and no buttons aren't showing up and one letter disappears when hovering on the tutorial button. This is strange, in Unity project everything works perfectly fine. These issues only appeared in build.

Solved

I fixed the issues, but I'm not sure about the reason why. I tried looking for solutions and this issue is apparently a bug in Unity that has been happening to others as well.

I fixed the issue by enlarging the tutorial button size and created two new yes and no buttons. I tried enlarging the buttons but they wouldn't appear in the build scene.

Final UI menu

Start Menu

Main Menu

Tutorial Menu

Options Menu

Controls Menu

Pause Menu

Reflective Summary

Throughout this project I have been feeling both confident and unsure with the UI process. I didn’t have much interest doing a paintball game as it’s a shooter game again which I have done before. And the subject itself didn’t interest me much. Although this could be an opportunity to try something more challenging for the shooter game and try something new I’m not very fascinated about. Throughout this whole User Interface process, I have a much better understanding of Unity than before.

My plan from the beginning and the end has changed a lot. There were a few things I skipped such as the head animation, removed the esc button, skip the scoreboard and brightness. Even if I didn’t manage to make it work, I tried different scripts. But I’m happy I managed to get other things to work that didn’t work in my last project. I added an options button and options menu to the pause menu without following a tutorial. I have a much better understanding of the dynamic float option and what the functions mean. Even though I skipped a few things, I find it more important to understand Unity itself and try to figure things out by myself. Such as time.TimeScale 0 that pauses all functions while timescale 1 continue everything. The other stuff I didn’t include can be used for my next project.

There could be some improvements and more exploration, I feel like there were a lot of exploration in the beginning and it eventually minimized. I could have experimented different splatter shapes but using After Effect for the first time, but the program kept crashing. Although I will be using After Effect for future animation as it gives smoother results and better effects.

Once I received the feedback the game has improved, such as adding a quit screen which makes a lot of difference. I attempted the suggestions such as head following the mouse and key esc button back, but I didn’t manage to make it work. I consider using the suggestions and things that didn’t work for my future project as I get to experiment and make them work.

Overall, I’m happy with the final User Interface but it could be better. The basics are included and some animation which was the more difficult part and a few scripts that I managed to solve. Although I have definitely improved and learnt more of Unity I’m satisfied about.

(406 words)

Reference

[1] (2019), Restaurant Menu, Available at: https://www.dafont.com/restaurant-menu.font?text=Paintball&back=theme, [Accessed 3 November 2019]

[2] Brackeys, (2017), START MENU in Unity, [Online], Available from: https://www.youtube.com/watch?v=zc8ac_qUXQY&t=10s [Accessed 14 February 2019]

[3] Brackeys, (2017). PAUSE MENU in Unity, [Online], Available from: https://www.youtube.com/watch?v=JivuXdrIHK0 [Accessed 15 February 2019]

[4] John, (2018), The right way to make a volume slider in Unity (using logarithmic conversion), [Article], Available at: https://johnleonardfrench.com/articles/the-right-way-to-make-a-volume-slider-in-unity-using-logarithmic-conversion/, [Accessed 16 November 2019]

[5] N3K EN, (2016), Button Animation (Using Animator) - Unity 3D[Tutorial][C#] , Available at: https://www.youtube.com/watch?v=1x4LVGRTeB0, [19 november 2019]

[6] Brackeys, (2017), SETTINGS MENU in Unity, Available at: https://www.youtube.com/watch?v=YOaYQrN1oYQ, [Accessed 21 November 2019]

[7] MOBOX Graphics, (2017), Liquid Splatter Effect Tutorial - T034, Available at: https://www.youtube.com/watch?v=DNVKPe0AkiU&feature=youtu.be, [Accessed 24 November 2019]

[8] https://github.com/Kavex/GlueIT, [Accessed 24 November 2019]

[9] Troublesome Girl, (2017), Ep 10. Click button to play audio/ sound effect without script - unity tutorial, [Online], Available from: https://www.youtube.com/watch?v=kl7LZ6JQe1M [Accessed 28 November 2019]

Google Sites

Report abuse