FMPTy Armfield

Idea Generation - Mechanics Key Mechanics from brief - Jumping, Timed

Final Mechanics-Wall Jump-Time of day effects character-Collectable shield/ranged attack system.Time of Day/Light impactDuring the daytime/in light:-Character is normal sized-Can attack/defendDuring the Night/in darkness:-Character is smaller-Can jump higher-Glows in the dark, reveals hidden paths

Level Design - Forest

Level Design - Deep/Dark Forest

Level Design - Cave

Level Blockout - Forest Version 1

Level Blockout - Forest Version 2

Forest - Final

Level Blockout - Dark Forest Version 1

Level Blockout - Dark Forest Version 2

Level Blockout - Cave

For the main menu, I decided to look at simplistic designs that each show off the style and environments of their games well. Each of these designs have a balanced relationship regarding user appeal and practicality. For example, Journey of a Roach has a very clear design that is easy to read by the player but still captures the content of the game well, the combination of both technical and artistic design needs to be strongly connected to create a solid set of UI. If it isn’t good on the artistic side then it won’t be visually appealing and the player may be turned away from the game as UI (the main menu) is the first thing they’ll see. It also has to be good regarding the technical side as usability is a key aspect of UI, if it’s difficult to use then the player may be confused and struggle to understand and play the game well. Journey of a roach balances both sides of design well as the limited set of options are easy to read over quickly. The typography and style of this menu is suitable for this game and helps to set up it well. Using a metallic sheen for the title along with a more natural dirt look helps to suggest both the contrast and combination of those attributes within the game as the player must utilise the environment and technology as a cockroach. The layered papers suggest a sense of chaos as they’re skewed along with a possible sense of knowledge or exploration as it looks like a guide.

Unit 7:Research of Game UI - PO1:P1,P3,M1

For the pause menu, I decided to look at simplistic designs again. The UI from Persona - shows off unique style and typography well. The combination of multiple fonts, busy shapes and repeated colours creates a very loud and energetic menu. Using multiple different fonts within single words creates a chaotic feeling, this is spread towards the right side of the screen too where the stars overlap in random positions. The use of red on both the left side and the hand helps to elevate the menu options as they contrast in black and white.

Unit 7:Research of Other Game UI - PO1:P2

For the UI in our game we need to make sure that it covers the aspects that the researched UI does too, for example, usability and user experience. There will be several elements that are essential for us to create good UI, including suitable options, solid design and considering limitations. Regarding usability and utility we need to accommodate for the different options in our game, for example, volume. We will need to add some sort of volume slider to our menu that the player can understand and use easily, it would also need to be visually suitable for our game and so match the style of the rest of the menu along with the game overall. It could be best to have a single volume slider on the main screen for simplicity as a more complicated menu system wouldn’t suit our game. As we are working on a PC game, we don’t have as strict limitations as mobile or VR game might have and so we have more free reign over how we want our menu to function and look. A simplistic design that shows off the themes of our game would be best along with being quite art heavy to suit the rest of our game. We need a main menu consisting of a start function, volume adjustment and quit button, we’d want to keep this simple like Journey of a Roach to suit our game as it isn’t complicated in nature. In a similar structure, we’d need a pause menu, this could consist of the same options; resume, volume and quit. Throughout our game, we will have several on-screen UI to indicate to the player about the different elements that change. For example, a life system would be displayed along with a collectible count to show to the player how many lives they have and how many leaves they are currently carrying. These would be more visually based with a simple number system to keep it clear and readable throughout as we wouldn’t want them to be distracting from gameplay. Finally, we would need some sort of endscreen should the player run out of lives without completing the game. This would also contain a restart and quit function to allow the player to instantly play the game again without having to go through multiple menus. Throughout the game, we would want the typography to be consistent and reminiscent of the on screen graphics. The font itself should be colourful and bubbly to create a sense of softness and fun. The title on the main menu is likely the first thing the player’s eye will be drawn to and so needs to be clear and representative of our game.

Unit 7: Client Brief - PO1: M2

The prototype documentation covers which menus and UI will be needed for the game and how this impacts user experience. For each piece of UI, the documentation explores what will be needed regarding usability along with how this might look in relation to other, researched menus. It talks about how the typography effects the players initial perception of the game and therefore its importance. The style of font is described as ‘fun’ and ‘bubbly’ which suits the game well and so is relevant. This also provides just enough information for designers to go off without it being completely defined, leaving room for experimentation and individuality between each concept. The documentation covers which menus will be needed and mentions possible additional UI, like pickups. Whilst it talks briefly about the different types, it could be beneficial to go into more detail for each in order to create a clearer image for better understanding of what is required. The documentation could also make more comparison to the researched designs as it only references one briefly. By comparing to the other menus, it would be easier to visualise what we want and how we can go about making them. Relating to this, mention of general style and visual content would be beneficial as it’d give initial concepts a starting point along with making sure that each concept is different yet still appropriate. In terms of platform limitations, the documentation says that there aren’t many regarding a PC game yet doesn’t mention what some limitations may be. It does say that in comparison to other platforms, there’s much more range however there are still some. For example, as the game uses controller rather than mouse without a cursor, the order and flow of the options needs to be clear as the player will have to cycle through them rather than hover over to the one they want instantly.

Unit 7: Client Brief - PO1: D1

Navigation system for controller/keyboard input supportVolume button enables the volume slider and disables the quit button so the user can navigate between slider and buttons

UI Blockout Iteration

Unit 7: Prototype Functionality - PO2: P5

Final UI Implemented

All of the designs created are simple in terms of usability and art without being sparse or uninteresting. At this stage, they just contain core elements of potential concepts and so have room for developments in each department. All of these are intentionally limited to make sure that the options are clear to the player.

Unit 7:UI Prototypes - PO2: P5

This design centres the game title and ‘Play’ button as these are the focal elements of a main menu screen. The typography matches the art of the

buttons, containing a key aspect of the game; mushrooms. The text is also very round and bubbly

which creates a sense of fun and suggests the lightheartedness of the game. Something that could

be improved about this design is the inclusion or even suggestion of a background as it’s unclear

what might go behind the text. Another possible improvement could be distinguishing between each

button more clearly. As the ‘play’ button would typically be more dominant it may be best to enlarge

it to make it stand out from the others.

Unit 7:UI Prototypes Evaluation - PO2: P5,M3, D2

This design centres the main character and aligns the title and start button to it too. This creates a very solid structure as all the main elements flow vertically on the screen. This is good for both user experience and usability as the flow of the viewer's eye travels across it nicely thanks to the clear composition. This design also links to the Journey of a Roach menu as it features the main character heavily. Something that could be improved about this design is, again, suggestion of a background as it’s unclear what this may be and could leave the design feeling isolated.

Unit 7:UI Prototypes Evaluation - PO2: P5,M3, D2

Unit 7:UI Prototypes Evaluation - PO2: P5,M3, D2This design focuses on the games initial setting and uses a similar vertical structure to the last. By having the title and options central, the player is drawn to them and can immediately take them in. The background scene also accommodates for the position of these too as the path leads up to them and the trees curve around them. By using imagery similar to that of the first level, the game is set up nicely as this is essentially a taste of what they’re about to experience when they play. The typography used is very bare currently and needs work but a simple and bubbly style would be best suited for the scene and game. Something that could be improved about this design would be the addition of a more solid font as it’s unclear what it might actually look like. This design is reminiscent of Ori and the Blind Forest predominantly due to the focus on the games environment and heavily art based. It’s also somewhat similar to Journey of a Roach in terms of structure due to the simple options and limited text.

We received feedback after creating these initial designs for each of them which allowed us to see what we could do to improve them. For the first design, we were told that there needed to be more detail in the design overall as it feels somewhat empty for a main menu. It was also mentioned that the options and quit buttons should be slightly smaller to make sure the title and play button remain dominant. Regarding the second design, we received similar feedback about filling in the empty space by adding some sort of background elements around the character, we were also told to implement an options menu and quite button into this design. For the final design, we were told that the potential typography should be clearer even for an initial concept as the font can make a strong impact on the rest of the menu. It was also mentioned that it should stand out more from the rest of the imagery as it has nothing to set it apart. We decided to use this final design as it had the most potential and felt suitable for a PC game. The other designs may have been more suitable for mobile platforms due to the simplicity and composition but we decided that we wanted something more detailed that would fill the screen and suggest what was to come in the game.

Unit 7:Peer Feedback - PO2: P6

With this design, we added rough background elements and an options and quit button based off the feedback we received. We also decided to outline aspects of the central imagery in order to make it stand out more against the backdrop as the character is the focus of this design.

Unit 7:UI Prototype Improvement - PO2:P7

With this design, we again looked at adding a background to fill in the empty space. We chose a forest clearing for this to surround the title and set the atmosphere for the environment. We also altered the scale slightly of the buttons to make the play button the largest of the three along with moving the others down to seperate them from the title.

Unit 7:UI Prototype Improvement - PO2:P7

For this design, we added some more detail to the title to get a better grasp of the font we were after. We worked on the imagery too and developed some parts more, e.g. the stump and flowers on the grass.

We also decided to use this design as the one we wanted to use in game so we started to look at key colours. These aren’t complete and can be developed on further as we work on the final UI.

Unit 7:UI Prototype Improvement - PO2:P7

Our design is similar to the title screen of Ori and the Blind Forest in terms of composition and content. The name of both games is centralised and raised towards the top of the screen with background elements framing them nicely. The actual content and setting of both is somewhat similar as they’re heavily nature based with trees and plants present in each. A difference between the two is the much heavier focus on the background in Ori and the Blind Forest, whilst ours still has a strong presence, Ori prioritises it over the menu options and simply shows just the title and progression function. We wanted the title and options on our menu to be the main focus with the background acting as a setting to frame them and the game itself well.

Unit 7: UI Prototype Comparison - PO2:M4

Our design has less similarities to the LittleBigPlanet menu in terms of both content and visuals. Our text simply focuses on the title and key options whereas LBP has several different functions shown immediately. In the centre of LBP’s menu is the players ‘moon’ which is used to harbour their achievements and collectibles, with the menu buttons being placed to the left rather than being centralised like ours. In this sense, our menu is much more minimalistic as we don’t have additional functions and modes of play. Despite the composition being different, the background aspect of LBP’s menu is similar to ours in the sense of it being an environment. It also frames the UI elements in a similar way to ours, as the tree hangs over the top with the house and tent sitting around the edges.

Unit 7: UI Prototype Comparison - PO2:M4

Our design doesn’t resemble the Journey of a Roach menu much in terms of content or colours. However, the layout of title and buttons is the same despite having different options. For JoaR, these are set to the left of the screen and tilted to match the imagery present but still have the title larger at the top and subsequent options following below like in ours. The core style is somewhat similar too in the sense that it’s clearly very cartoony and hints towards a more light hearted game. The darker colours in JoaR suggest that despite its cartoony nature, it’s likely to have some darker undertones due to the lack of vibrancy in its menu. Ours, however, contrasts this with its colourful

scheme and storybook narrative.

Unit 7: UI Prototype Comparison - PO2:M4

Unit 7:Produce final assets for a UI - PO3: P8

We have created a functional menu system for the player, we have done this by using brightly coloured buttons to take the player to a corresponding scene.When the player presses the start button it will load the game.The volume button will bring up a separate UI and allow the player to adjust the audio levels.The resolution will allow the player to adjust the quality displayed on their screen.The quit button will take the player to the desktop.

Unit 7:Import art assets using the methods taught - PO3: P9We have imported 2D and 3D art assets into the game. The 2D UI backgrounds were put on to UI canvas, where as the 3D assets were put into the general game scene. This was so the players could physically interact with the 3D assets.

Unit 7:Set up the layout for the user interface using the art assets - PO3:P10We have set out the layout for the menu, in the main scene. Everything was organized in the hierarchy and was linked to the scene.

We import the audio slider from the game object tab > UI > slider and put it on the main menu.

Unit 7:Setup functionality and the interface is able to be navigated - PO3: P11We have created a functional menu system for the player, we have done this by using brightly coloured buttons to take the player to a corresponding scene.

Additionally, when the button is selected it will change colour. This shows the player more clearly which button is highlighted.

We have also done this for the audio slider; when the player drags the slider, it will alter the audio level.UI Showcasing

https://www.youtube.com/watch?v=JGLKIWH8vbgFull Walkthroughhttps://www.youtube.com/watch?v=SjJxxdHIgdg

Unit 7: Setup main menu, which is visible upon starting the game - PO3: P12

This videos shows our game menu. This is the first thing the player will see when starting our game, so we wanted to make sure the art style was going to reflect what the rest of the game was going to look like.

It’s functional, because the player can see the buttons clearly, and they change colour when selected so you know which option you’re hovering over. When clicking the button, the scene will transition to the next scene, for example when you press ‘Start’ the loading scene will be shown and then will transition to the game.

Unit 7: Set up functionality for the game options section of the main menu - PO3: M5

This videos shows the audio slider working on our main menu; when the player drags the slider, it will alter the audio level.

The control buttons takes the player to a separate scene, that runs through the controller settings.

We also have an extra button for game quality settings, where the player can adjust the overall quality of the game on their screen.

Unit 7:Evaluation - PO3: D3 The main menu that we created was successfully integrated into our game and fitted with the artstyle and theme. I think the art that was produced for the menu was very fitting and it functioned well. The background of the menu is heavily in focus as we wanted it to be a predominant feature of our UI, the text on top of this is also very visual based. We decided on a simple, painterly style to suit the feel of our game and the storybook theme shown throughout, the colours are bright but balanced and not overly saturated. As our game is aimed at a wide audience, this also includes younger children and so the addition of bright yet pleasant colours is appealing to this group along with older players. I believe that the art of the menu is effective and well made as it suits our game and is polished. One improvement regarding the visuals of this menu would be the addition of the main character positioned somewhere to give more life to the scene and to show clearly to the player who ‘Shroomio’ is. Regarding functionality, we made it so that when one of the buttons is selected, it will turn green and it will be highlighted by a leaf pointer. I think this makes it easy for the player to see what option they have selected whilst still sticking to our theming. Regarding what we could have done better, I think we could have improved this menu by adding more animations to make it more interesting and eye grabbing. We had a lot of issues with the animation playing on command and it was rather temperamental. I think this made our game look a bit sloppy sometimes. Animation could have also been added to the background visuals to make it seem more lively, for example, grass or clouds moving in the wind. I think it would have also been nice if we would have included the characters on the menu, as that would show what the game is about.

Design Notes

Leaf Projectile and Shield Designs Spider Animation Sketches Post-Pitch Animation review list

Character Animations

Shroomio

Panicking Villagers

Character Animations: Enemy AI

Bird/Projectile AI

Ram AI

Spider AI