Brief 2

A moodboard I put together using Google Images and Slides. I chose to create an ornamental round shield for this Brief, because it will be a simple enough shape that I will be able to spend more time on texturing it than modelling. These images are a collection of both the front and back of a shield, although I will focus more on the front. I really like the idea of having a sculpted centre piece (such in the lion shield above) with some kind of accompanying details around the edge.

The sketches I drew as I brainstormed possible designs. The back will be relatively simple, so I focused more on the front. I especially like Design 2, which I envision to be more realistic than the other two. It will likely feature either a hand-painted dragon of some kind or an endless Celtic/Viking knot, around an embellished centre boss.

Design 1 would be something you might expect of a 'legendary-tier' item in a Viking-themed RPG game, and Design 3 is more along the lines of a stylized 1800's-pirate item. I do like the idea of having a compass painted onto the shield, but I think Design 2 is what I will go with.

The round shield was one of the most popular types of shields during ancient and medieval periods. They were in use throughout Ancient Greece and the Roman Empire, as well as much of Europe and the Middle East, for millennia (Claude & Leonid, 1982).

Round shields - small in comparison to the larger kite-shaped ones that were introduced to England by the Normans in the 10th century A.D. (Van Houts & Horrox, 2000) - were designed to protect foot soldiers in close combat. The shields used by the Vikings generally had a boss, or circular indent, in the middle to protect the wielder's hand and allowed greater manoeuvrability as an offensive weapon (Hurstwic, n.d.)

Claude, B. & Leonid, T (Eds.). (1982). The Complete Encyclopaedia of Arms and Weapons. Batsford London. http://web.prm.ox.ac.uk/Kent/shieweap/shgenex3.html

Hurstwic. (n.d.). Viking Age Arms and Armor: Viking Shields. Retrieved October 13, 2022 from https://www.hurstwic.org/history/articles/manufacturing/text/viking_shields.htm

Van Houts, E. M. C. & Horrox, R. (2000). The Normans in Europe . Manchester University Press. https://doi.org/10.7765/9781526112675

These are the three possible colour palettes I decided on. Each has four basic colours which will be used for the wooden back/base, the metallic frame, and then two possible paints to be used as decoration.

I like the first one the best, because the green paints against the light wooden back make for a nice, natural feel - as if it were made with what could be found in the woods. This is closest to what I had in mind during the research and sketch process, as I'm aiming for a decorative shield that's visually appealing rather than (hypothetically) practical.

The second one is my least favourite, but I think it has the most realistic medieval colours even if the embellishments are gold.

The third palette is an interesting one, because the metal embellishments are lighter than the rest, unlike the previous designs. Red is my personal favourite colour, so this caught my eye immediately. I think it would work best with a dragon or serpent design to create a threatening feel, which also plays into the shield being useable as a weapon.

I used the website Coolors.com to find swatches and assembled them into a table using Google Docs.

Process

1. I created a simple cylinder object in Blender3D. I added a mirror modifier so that I could have the back and front be the same for this part. I inset the outside edges to create the frame.

2. I deleted a few faces in the middle of the shield, from both sides. Then I created a RoundCube object to shape the boss.

3. I used the magnet tool to snap the vertices to the right places.

4. A clip of the shield from the back and the front. I created the boss and handguard from the same RoundCube as before.

5. I used the Multiresolution modifier to add more detail without compromising the number of vertices in the model. This gave it a nice smooth look after I fixed the edges to make them sharp. Note that the board is not perfectly flat; this wasn't intentional, but I actually prefer it because it makes the shield look less machine-made and more natural.

6. Using an alpha stencil that I downloaded from Textures.com, I was able to create a sculpted boss like I'd wanted.

Textures.com. (n.d.). Celtic. Retrieved October 17, 2022 from https://www.textures.com/browse/3d-ornaments/114561#celtic

7. I created a handle and did some simple extrusion to add a grip. Admittedly, I got a little carried away here, but I do want to put this model up online eventually.

8. I managed to unwrap the model fairly well, with only the handle giving me any difficulties. Eventually, I just adjusted the vertices on the UV map by hand until it looked the way I wanted. To make sure that the shield was unwrapped correctly, I added a temporary material in Blender. This will not be imported into Unity.

9. All components of the shield unwrapped and fitted into a single UV map. It took some rescaling and careful planning to get each piece to fit.

10. I downloaded the UV map and imported it into Photopea to edit. The flat textures are from Textures.com (n.d.). I drew the green decoration in Procreate, and then emailed the PNG to myself.

I had an issue with the back of the boss not displaying correctly, which I realised was because the faces were oriented the wrong way. I fixed that in Blender and tried to reimport the model into Unity but it didn't work.

Textures.com. (n.d.). PBR Materials. Retrieved October 24, 2022 from https://www.textures.com/browse/pbr-materials/114558

The albedo UV map. I also created a Normal map and a greyscale Metallic map using Photopea. It encompasses the wooden board, with the hand-painted green knot design; the iron frame, boss and handle; and the leather handle grip.

After applying these maps to the Shield, I did a quick demo with the light source to see how the model would look in different lighting conditions.

User Interface

Research & Design

Hu, S. (2021, October 22). How to Make Game UI Designs: Best Practices, Examples & Templates. Mockplus. Retrieved October 22, 2022 from https://www.mockplus.com/blog/post/game-ui-design

Arvydas Brazdeikis led a reimagining of the Dune user interface, with the project beginning in 2017. He is a seasoned UI designer with more than fifteen years of experience behind him (LinkedIn, n.d.). The original Dune UI was dated and somewhat clunky, having come from a game released in 1992 but his revamped version is clean and immersive, which is what instantly drew my attention.

He describes his process as starting with a reference board, using images and audio from various sources, including the works of Jackson Pollock. He also took inspiration from elements of the narrative, such as the “psychedelic, alien nature” of the game (Brazideikis, n.d.). One of the most important motifs of the new UI design is a simple circle. The title and mode selection screens (left) are the best example, depicting a planetary orbit. This particular choice was made to fit the theme of an extra-terrestrial desert world, long after our own has been decimated.

According to Hu (2021), simplicity is key when designing UI. Having too much clutter on the screen can confuse the player and make it hard for them to figure out how to navigate the game. I have taken this on board when thinking about the UI for my project. I began with the idea of having twisting branches framing each segment of the inventory and equipment menus, but it would most likely create too much visual stimulation and draw attention away from the model itself.

Brazideikis, A. (n.d.). Making DUNE II – Reimagined. Interface In Game. Retrieved October 22, 2022 from https://interfaceingame.com/articles/making-dune-ii-reimagined/

LinkedIn. (n.d.). Arvydas Brazideikis. Retrieved October 22, 2022 from https://lt.linkedin.com/in/arvydasbrazdeikis

MSPaint sketch of possible equipment menu layout. The shield can be equipped in either hand, here designated by R and L. In most games with an armour system, you can generally choose to equip a new item or leave it in your inventory, which is what I am going for here.

Kerr, R. (2022, October 5). Brief One: Implementing UI and Audio [Video]. Youtube. https://www.youtube.com/watch?v=Ozh8X3uFJkk&ab_channel=UnnaturalFreaksStudio

The background I sourced for the Title Screen (O'Mally, 2017).

MSPaint sketch of the two options that come up when the player interacts with the shield. If the player chooses to "equip now", the equipment menu (left) appears. If they choose "save for later", the inventory menu appears instead.

These are the designs I came up with for possible title screen UI. I liked the idea of having an animal skull motif alongside a brushstroke motif, and thought I might be able to use it as a logo-title (Design 3). However, I discarded the skull idea and settled on Design 2 because it is minimalistic and clean - which is a theme I picked because it doesn't overload the viewer with clutter, and allows you to focus on the game art instead. Design 1 felt too much like a placeholder menu for this project.

O'Mally, N. (2017, July 18). The Fog Lay Low. Folk Lifestyle. https://www.folklifestyle.com/blog/2017/7/18/the-fog-lay-low

Some examples of title screens with simplistic UI, from Assassin's Creed: Valhalla, God of War, and The Witcher 3: Wild Hunt. I sourced these images from the same website: https://www.gameuidatabase.com/

As we are largely visually-dependant creatures, the way written information is presented to us is very important. Typography is the art of using pre-existing fonts and layouts to design a specific user experience (Aela, 2022).

If designing for a console, GameUXMasterGuide (2019) suggests scaling the UI design down to around 30% of the intended size, to simulate how the screen would look on a television screen. This would allow you to see if any text is too difficult to read.

Aela Editorial. (2022, May 26). Typography in UI: How To Enhance User Experience. Aela. https://aelaschool.com/en/visualdesign/typography-ui-enhance-ux/

GameUXMasterGuide. (2019, April 28). Designing with Typography. Retrieved October 31, 2022 from https://gameuxmasterguide.com/2019-04-28-DesigningTypography/

When designing typography for games, decorative fonts need to be kept to a minimum whilst the bulk of text should be in an easy-to-read font style (Mertz, 2015). I kept this in mind while working on my UI, even though I am not presenting any sizeable bodies of text.

I liked these four particular fonts because they have an organic, medieval feel without being too fancy or illegible.

Tobacco Road NF would be my choice for the title. It stands out the most of the four and is therefore the most difficult to read from a distance or in a small font size.

Mertz, C. (2015, May 13). Down to the Letter: The Importance of Typography in Video Games. Game Developer. https://www.gamedeveloper.com/design/down-to-the-letter-the-importance-of-typography-in-video-games

Process

1. I began setting up some placeholder UI in Unity (ver. 2021.3.6f1), using Kerr (2022) as a reference tutorial. In this clip, I triggered the pink square - which is standing in for a menu - by pressing 'e'.

2. I added options for the player to choose what to do with the shield.

3. Next, I created a title screen/main menu as a separate scene in Unity. At the moment, it is also just a placeholder.

4. I changed the font styles and created a brush-stroke sprite using Procreate. The sprite needs to be resized a bit to centre it properly.

5. The UI is almost finished now, with just the inventory and equipped menus needing refinement. With help in class, I was able to get the 'Load Game' button to load the main scene. For some reason, the second scene is darker in Play Mode than I expected. It seems to only happen when I start from the Title Scene, so I'm not sure what's happening.

UPDATE: fixed this by regenerating the lighting (Watts, 2021).

6. The completed in-game UI. I drew the slots using Procreate and imported them as sprites. I'm very proud of how this turned out.

Watts, J. (2021, August 16). Lighting in Unity goes darker when reloading a scene fix. Medium. t.ly/gjdI

Audio

Research & Design

Foley is the the art of "sound effects recorded during post-production" (Contis, 2022). It is primarily used in film to replicate the everyday, background sounds that may not have been captured in the video recording. For instance, the sound of footsteps in snow could be created in a Foley studio using sand. Without it, a scene can feel hollow and lifeless because even 'silence' is not truly silent in real life (MasterClass, 2021).

In games, the concept is much the same but almost all sound needs to be recorded independently. Wen (2022) notes that, ironically, the best sound design is that which you don't actively notice, but it is what makes a game so immersive. For my project, I chose to record the sound of metal knocking against metal, such as a sword clanking against the frame or boss of the shield. I did this by hitting two butter knives together until it created the desired sound, which I recorded using my mobile phone.

Contis, E. (2022, October 23). What Is Foley Sound and Why Do You Need It?. Careers In Film. https://www.careersinfilm.com/foley-sound/

MasterClass. (2021, September 4). Film 101: Understanding Foley Sound and Why Foley Sound Is Important. Retrieved October 31, 2022 from https://www.masterclass.com/articles/film-101-understanding-foley-sound-and-why-foley-sound-is-important

Wen, A. (2022, January 4). Unpacking foley design in video games. GamesIndustry.biz. https://www.gamesindustry.biz/unpacking-foley-design-in-video-games#:~:text=Much%20of%20this%20comes%20from,creaking%20of%20a%20door%20being

I used CloudConvert.com to convert the raw recordings of my sound effect from .MOV files to to .MP3 in order to edit using Audacity.

I also learned how to sample and clean audio in Audacity using a tutorial by Bouchrika (2022).

Bouchrika, I. (2022, September 6). How to Use Audacity Clean Up Audio Functionalities. Research.com. Retrieved October 31, 2022 from https://research.com/tutorials/audacity-clean-up-audio

Process

1. I recorded a solid-sounding, metallic clink to use as an interaction sound. Of the four clips, two of which were done with the nearby door open and the other two with the door shut, I decided on the ones that had minimal outside ambience. This is before either have been edited.

2. This is after the clips had been cleaned up and shortened. For this project, I went with the first one because it has slightly more 'depth' than the second clip. That one sounded too light and hollow for my purposes so I discarded it.

3. In order to get my clips to play when the corresponding buttons are clicked, I tried to follow Kerr (2022) again but I had an issue where the audio source was "disabled." I couldn't figure out why, but when I added the clip as an empty game object in the scene, it solved the problem.

I also added another version of the same sound but edited to be at a slightly lower pitch. I used this for all the 'Close' buttons.

4. I built some background ambience and music using various audio tracks that I found online. This video was recorded prior to the lighting being rebuilt.

The windchimes: https://freesound.org/people/Owl/sounds/187661/

The background music: https://pixabay.com/music/mystery-mysterious-and-mystic-116127/

5. The background music was not carrying over from the Title Screen to the Main scene properly; it kept restarting when the second scene loaded and was a bit jarring. I found a tutorial online (CatoDevs, 2020) that showed me how to get the music to play across both scenes without stopping and starting.

CatoDevs. (2020, September 2). Unity Tutorial : How to Seamlessly playing music between multiple scenes [Video]. YouTube. https://www.youtube.com/watch?v=Xtfe5S9n4SI

Reflections

Mid-Project Reflection

Proficiency: How did you develop your technical skills and knowledge? Give examples of the skills and knowledge, techniques, and self-directed research that inform your project (min. 50 words).

I continued learning UI in Unity; although I'm getting much better at creating functional UI for my projects, I'm still struggling a little bit to figure out how to make an interaction prompt disappear after use. I will ask about this is class next week (Week 6). For this assignment, I did all of my modelling and UV unwrapping in Blender because I know how this software works, and I already know how UV maps work. I have done some unwrapping and texturing in the past, but it has all been confined to Blender, so learning to texture in Unity is challenging.

Process: How did you improve your workflows and processes, including changes and setbacks? Give specific examples of your research and how it influenced your creative process (min. 50 words).

My initial design for the UI was to have hand-drawn branches and leaves serving as borders, such as the inventory slots. However, during my research I discovered that simplicity is always better than over-complicated visuals (Hu, 2021), so I changed my design to more simple lines. I also managed to keep to one main motif, an old brush-stroke. This was because I noticed that many examples of good UI had one or two common motifs (Brazideikis, n.d.).

I scribbled ideas down in a sketchbook between classes to remember them, and also to visualise what kinds of elements I wanted in my UI. This was especially helpful for the shield model, as it made it easier to visualise exactly how I wanted it to look. I like to write my ideas down on paper because it helps me work through them better, as I can sketch layouts and designs freely. It also allows me to record new ideas much faster than if I were trying to type.

Person: What communication and collaboration skills did this project require, and how did you develop these skills? How did you manage collaboration, receiving and giving feedback to others? (min. 50 words)

I found some of the answers to my questions regarding UI by going back to the video I used for the last project (Kerr, 2022). It was mainly to help me remember how to get the UI to work how I wanted, such as triggering a menu by clicking a button on the screen. Additionally, I got feedback from last assignment about how I laid out my work and suggestions for improvement. Previously, everything was on the same page which created problems when trying to load the page later. I adjusted my Brief pages for all of my classes so that I now have a separate page for each one, after double-checking with my lecturer to confirm it was correct.

Hu, S. (2021, October 22). How to Make Game UI Designs: Best Practices, Examples & Templates. Mockplus. Retrieved October 22, 2022 from https://www.mockplus.com/blog/post/game-ui-design

Brazideikis, A. (n.d.). Making DUNE II – Reimagined. Interface In Game. Retrieved October 22, 2022 from https://interfaceingame.com/articles/making-dune-ii-reimagined/

Post-Mortem Reflection

Appraisal: Overall, how successful was your project? What worked or didn't work, and why? How did it match with your expectations? Give specific examples, screenshots or links (min. 50 words).

I'd say this project was very successful. I really enjoyed working on it, and I'm especially proud of how the UI turned out. I had a little trouble with the model itself, as I didn't realise that the multiresolution modifiers I'd used in Blender would be applied on export. It ended up being a high-poly mesh with thousands of vertices. This became apparent when I noticed that the back (inside) of the shield boss wasn't displaying properly, and figured it was a problem with the faces pointing the wrong way. Because there were so many faces in the new model, trying to select all the right ones and flip them would've been too time-consuming and labour-intensive to justify for this assignment. I could've definitely fixed it if I'd had a bit more time but I just didn't get a chance, unfortunately.

Challenges: What obstacles did you overcome and how? What lessons did you learn? (min. 50 words)

In Week 6 I discovered that I hadn't textured the model correctly: I'd separated out the parts of the shield and applied a specific, custom material to each (i.e. the iron elements got a material of their own, and the wooden element got a different material). However, I managed to layer all the textures onto the UV map as required, and generated both Normal and Metallic maps from it. This part wasn't too difficult but if I'd realised my mistake sooner, I might've had time to fix the model's poly-count. Additionally, I had some difficulty with getting the audio to work. I followed the steps in Kerr (2022) to play a my recorded sound on-click, but when I tried to play-test my project I got an error saying "cannot play disabled audio". I googled what that meant but couldn't find any helpful answers, so instead I tried placing an empty game object in the scene and attaching the audio to it. It worked perfectly after that, even though I still don't understand what went wrong.

Future Goals: How will you improve your skills for future projects? What will you do differently in your next project? What will you repeat? (min. 50 words)

Going forward, I will be careful to apply my sculpted ornaments and modifiers to the model before exporting and creating a Normal map instead. I will have to figure out how to merge this with texture Normals to achieve the desired look. Next time we have an assignment like this, I want to try modelling a more complicated object. Although the shield was fun to make, it was not very challenging. Although I learnt a lot about Foley and sound effects, and it was educational to use Audacity for the first time, I think I will continue to use downloadable SFX from now on because audio design is not quite my area of interest.

Page updated

Report abuse