Week 2 - Music | Mysite 1

Week 2 - Music

This week we talked to Matt Fearnley about music in games and how we can use a variety of techniques to enhance our game experience. In particular he discussed gameplay music, i.e. not sound effects or cutscenes but exactly how the music responds to player behaviour (adaptive music). He talked about how music conveys information that isn't necessarily visible to the player, citing examples like Bioshock, Hotline Miami, Silent Hill and God of War. What I found particularly interesting was his discussion around diagetic and non-diagetic sounds:

"Diegetic sound

Sound whose source is visible on the screen or whose source is implied to be present by the action of the film:

voices of characters
sounds made by objects in the story
music represented as coming from instruments in the story space ( = source music)

Diegetic sound is any sound presented as originated from source within the film's world

Digetic sound can be either on screen or off screen depending on whatever its source is within the frame or outside the frame.

Non-diegetic sound

Sound whose source is neither visible on the screen nor has been implied to be present in the action:

narrator's commentary
sound effects which is added for the dramatic effect
mood music

Non-diegetic sound is represented as coming from the a source outside story space.

The distinction between diegetic or non-diegetic sound depends on our understanding of the conventions of film viewing and listening. We know of that certain sounds are represented as coming from the story world, while others are represented as coming from outside the space of the story events. A play with diegetic and non-diegetic conventions can be used to create ambiguity (horror), or to surprise the audience (comedy)."

(Filmsound.org, 2021)

We intend to use this in our own gameplay, such as when the player is nearer the stage curtain they can hear the crowds cheering from the circus stand or when they are in the eaves of the tent the show music is muffled and their footsteps are louder.

I spoke with Matt afterwards about our idea, in particular how we are currently separating the music via character (we have planned an overall looping gameplay track and each performer has a variation on this depending on their characteristics, e.g. the fortune teller may have a slower, deeper tone to the tune to make the atmosphere heavier and more eerie). He said to loosen up a little bit as the music doesn't have to be so rigid within the gameplay. He loved the idea of muffled sounds and tent noises as the player moves around the environment and he said to build more atmosphere by developing touchpoints into the music (e.g. cultural touchpoints - if one of the ladies has a background from a specific country there could be instruments featured from similar cultural music).

Later this week I looked at the importance of UI and UX design. I started by finding an appropriate definition of UI and UX and the distinction between them:

"UI - Human first approach to designing the aesthetic experience of a product - digital products only / visual touchpoints that allow users to interact with a product / combinations of typography, colour palettes, buttons, animations and imagery

UX - Human first approach to product design - physical and digital products / the full experience from a user's first contact to the last / structural design solutions for pain points that users encounter anywhere along their journey with the product"

(Career Foundry, 2021)

I then focussed in on what makes effective UI (we have to think less about the physical communication of UX and more about the visual communication of UI for this project), following the points mentioned in this gamesindustry.biz article -

Use design patterns that other developers have iterated on
Understand the history of your desired UI
Use wireframing to decide on the placement of UI elements
Anticipate how the player will interact with your UI
Place UI elements into a hierarchy of importance
Use animation in your UI
Think about the UI's role in your game's aesthetic
Find a balance between the game world and the UI

(gamesindustry.biz, available at)

I would also add the importance of playtesting to this list. I have taken on a UI design role in previous projects and you can never anticipate how your audience reacts until a design is put in front of them. Only then can you see how effective your design is - do people know what a certain button does? Is it jarring or blocking other key on-screen elements? Are your players overwhelmed with visual information?

I looked at two in-game examples of UI to assess how effective their designs are - Persona 5 and The Legend of Zelda: Breath of the Wild.

This first example is an image from Persona 5 and as popular as the game is, I wouldn't say is it utilises the most effective UI. Firstly there is a lot of information on-screen at once. Sometimes it is necessary for a game to make a lot of information available to the player however the visuals here take up a lot of screen space, making the physical battle environment in the game difficult to see. The UI surrounding the active player almost eminates out, making the shapes difficult to process. The text makes it worse, with a cut and paste style typography in a stark black and white colour set and extra black and red shapes splaying out behind these options. This all makes the available information difficult to digest as the player. Not only do we need to understand controls and strategies but now we have to navigate the interface too which is extra unnecessary work and can be quite confusing.

I then compared this to LoZ:

The UI in this scenario is clearly pushed to the edges of the screen so that it doesn't encroach on the environment. Clear, simple graphics in the top left demonstrate abilities and controls making it simple to see what actions are available to the player. These abilities also have animations in the game, showing when they are ready to use. This conveys more information to the player without adding extra visuals to process. The health bar and map are kept in simple shapes - such as circles and lines - in a linear fashion (not at jaunty angles for example) making it easy to understand and quick to process.

Leading on from this I wanted to implement similar ideas into our own UI designs;

Main Menu Mockup

In-game UI Mockup

Level UI Mockup

Narrative Conversation UI Mockup

Pause Menu Mockup

I've kept these mockup details very simple so that each element has enough space for visual impact whilst keeping the information to a minimum. I kept the same principles that I identified in the examples above, keeping the UI and artwork distinct so as not to confuse the player and incorporating linear, clean shapes for easy processing.

I've also been working on the art style and structure for the assets, designs and room layouts. This should give us a strong sense of direction moving forward as my teammate James has been working on hand-made textures like clothing as well as starting to 3D model for the environment. Our lecturer, James, also put us together a short prototype with an inventory system which worked incredibly smoothly. My next step is to finish the character designs.

Filmsound.org, 2021 Diagetic and Non-Diagetic Sound [Online]. Available at: http://www.filmsound.org/terminology/diegetic.htm (Accessed 11th of March 2021).

Lamprecht, E., 2021 The Difference Between UX and UI Design - A Beginner's Guide [Online]. Available at: https://careerfoundry.com/en/blog/ux-design/the-difference-between-ux-and-ui-design-a-laymans-guide/ (Accessed 11th of March 2021).

Nelson, W., 2021 Best practises for designing an effective user interface [Online]. Available at: https://www.gamesindustry.biz/articles/2021-03-04-best-practices-for-designing-an-effective-video-game-ui (Accessed 11th of March 2021).

Wen. J., 2017 The UI Design of Persona 5 [Online] Available at: https://jiaxinwen.wordpress.com/2017/04/27/the-ui-design-of-persona-5/ (Accessed 11th of March 2021).

Reynaud, E., 2018 The UI/UX analysis of Zelda: Breath of the Wilds [Online]. Available at: https://www.gamasutra.com/blogs/EvahnReynaud/20180122/313449/A_UIUX_analysis_of_Zelda_Breath_of_the_Wilds.php (Accessed 11th of March 2021).