Task 3
To start my prototype menu system I imported all the graphics I created in photoshop to my project in unreal engine.
I created a separate folder for them to keep it organised and I used the same resolution in photoshop for UE4. I made sure my canvas size in photoshop was 1920x1080 which is what Iām working in. Iāve chosen three bright colours and stuck with them throughout all the graphics. The only other colours are the white rectangles which act as a highlight for the buttons.
During task 2 I looked atĀ āHello Kitty Roller Rescueā a game which I speak about in my history of games which was my first introduction to the playstation. It uses these white rectangles to clearly show the buttons. The splash screen and menu are very loud so it is important to highlight what the player needs to select so they know where to look.
I created a menu widget and used different canvas panels to contain the different pages of the menu.Ā
Hereās the splash screen. The prompt to press X takes the player to the next menu. Itās also informing them that X is the select button.
After pressing X the canvas panel is collapsed and the main menu opens.
Here the player can select to Start the game, exit the game or view the credits. Each of these also collapse and open a new canvas panel. (Except for start which simply closes the menu)
If the player does selectĀ āCreditsā they are brought to the credit sequence. This is simply a placeholder as Iāve not added any credits yet. The credit title however is animated to tilt side to side.
The player can exit the credits which will collapse the canvas panel and return them to the main menu.
Once the player has started the game they can pause the game by pressingĀ āPā (This is placeholder as it will later be ESC on keyboard or Start on gamepad.)
I opened up the project settings and added Pause in the action mappings. I then created a blueprint which paused the game.Ā
If the player selectsĀ āExitā it closes the pause menu and resumes the game.
On the pause menu the player can selectĀ āHELPā this opens up the Help menu which displays the character controls.
The player can view the controls then selectĀ āExitā to return to the paused screen. They can selectĀ āExitā once more to resume playing the game.
Video Showcase
Iām really happy with my prototype menu so far. I especially like how the normal appearance and hovered appearance change. It makes it clear to the player what theyāre about to select. I plan on adding a sound for when they select to make it more satisfying. Iāll need to ensure the sound isnāt shrill or annoying.
Issues that I came across whilst developing my menu system was that I had to manually place the graphics and size them. This caused some of them to look stretched. I realised I could go back into photoshop, view the PNG and get the exact size from there.Ā
This allowed me to display the graphics at the exact same resolution so they look uniform.Ā
Interactive Elements
Ā I plan on creating an environment to be displayed behind the splash screen/main menu for before the player spawns. Iāll also add interact-able in game assets to make it more fun. Itās common in games to have interact-able elements to menus.
Skyrim lets character rotate and view in game models. I think this is a great system to keep the player entertained during loading screen and also showcase your models.Ā
Bayonetta allows the player to practice combos. This is a great system for a fighting game however my project isnāt a complex fighting game so a system like this wonāt be needed.Ā
Iāll look into ideas for what interactive element Iād like to implement into my menu system.
I decided a fun idea would be to have clickable assets which react in different ways. I created a cute bird model in maya and exported and textured in UE4.
I created three different animations. Two Idle animations and oneĀ āshockedā animation for when itās clicked on.
I imported the mesh, imported the skeleton and the three animations and created a blueprint class actor. I then set the animation setting toĀ āplay animation blueprintā I then began creating my animation blueprint.
An issue I came across was all the birds were doing the idle animation in sync which looks unrealistic. I used the random sequence player to add my two idle animations/Ā This means the birds will randomly do 1 of 2 animations at different speeds.Ā
Another issue I came across was when the birds were clicked on and played theirĀ āshockā animations they lost their idle animations forever. This was fixed by making the idle animations as anĀ āIDLEā state in the animation blueprint and making use of montages.
Hereās a preview of my untextured smallscene which acts as the background for the Main Menu and Level Select. As the player uses the menu they can also play around with the birds placed around the scene.Ā
Audio
I finally got around to adding audio. I downloaded simple boop noises in WAV form and used the modulator node in UE4 to adjust the pitch and speed.
This allowed me to create two sounds one for selecting and one for going back.
Something thatās really fun that I found when using animations blueprints is you can have differentĀ āminsā andĀ āmaxā so every time the sound is played it varies in pitch/volume. This is really useful for characters footsteps as it makes them sound more realistic. For my menu I made the pitch modulation quite small to not be too jarring.
I used theĀ āPlay Sound 2Dā node as itās what youād use for sounds which donāt exist in the game world like the interface. The other node isĀ āPlay Sound at Locationā which would make use of spatialization in the 3D Space.This is useful for alerting players through audio which direction the source of the noise is.
BugTesting
Most of the issues I came across were easily fixed with some workarounds however when I had issues with figuring out where in the code it went wrong I made use of my dual monitors to watch the code and see if it stopped at any points.Ā
I also used breakpoints which freeze the project once a certain node is fired. This is great as it shows me exactly where it is in the project where nodes are firing.
Another simple way but slightly longer is adding printstrings to code which directly show text on the viewport when nodes have fired.
Updated Video
Evaluation/Feedback
Iām really pleased with my menu and the intractable birds. I learnt a lot about animations, canvas panels, cameras and player controllers. Anonymous feedback from my peers said that the seagulls was one of their favourite parts. This shows I should think about adding more ludic elements to my game. They donāt necessarily have to have any importance to the game narrative but players seem to just enjoy interaction. Feedback I received to improve the seagulls was to have some fly past during cameraĀ transitions. I think this is a great idea to make the scene more alive.
This was also the first time I used audio in UE4 and I was surprised at how simple it was. Unfortunately during my presentation and showcase of my menu, the speakers were not working so my peers couldnāt properly hear the audio. It can however be heard in the demonstration video I made.
Some feedback I received which I was really pleased with was that my āart style followed the same style throughout and suited my target audienceā Iām happy that my peers thought so because I spent a lot of time during pre production trying to keep my references a similar style and properly picture what I wanted to create.Ā
The UI for example (health bar, skill bar) was received quite well. It kept to the same style suited for a younger audience.Ā
All constructive criticism was to keep building on what I already have. To my knowledge there wasnāt anything missing that was required and the menu functions perfectly. Itās now just about going back and polishing what Iāve created. At the moment my menu system is functional and clear which Iām happy with.Ā
Iām going to keep working on my menu system as I want to eventually make the Level Selects buttons physical objects in the small scene rather then a widget on the view port. I also want to add different interact-able elements such as clicking on lights to make them flicker or clicking on billboards/posters to change colours or pictures. Iāve created materials before where the colours change, this can be done by making the colour a parameter and making a material instance.
I implemented all the minimal elements on the assignment brief which work properly. Iāve bug tested my menu and made changes when necessary such as the animation blueprint with the seagulls. I also changed the pitch slightly on the audio to make it less shrill.Ā
I enjoyed this Unit and Iāll be keeping this menu system in my current project which Iāll be using for the other units.











