Brief 3

An early sketch I did of a potential layout for the scene, as well as some tree designs. The canopies will need to be fairly spherical to make them easier to unwrap later on. I also briefly brainstormed how I might go about UV unwrapping the tree trunks.

I found some examples of the type of tree shape I am aiming for, from various versions of MarioKart (right). Around 2/3 of the total height of each model is the leaves, and the trunk is generally short and stout.

I chose to go with the round look of these trees because it will hopefully be an easy shape to unwrap and texture, without compromising the overall style.

This is a more specific design sketch I did for the trees, with some notes about the shape and composition. Because they look fairly similar, I may create variation by having one tree bear a kind of fruit.

I got these colours using Coolors.co, having input both reference images. The '8C9C5A moss green' shade might be a bit muddy for my project, but I'll see how it looks before throwing it out.

The Cutting Room Floor. (2022, October 27). castle_tree1.brres [Image]. https://tcrf.net/Mario_Kart_Wii/Unused_Course_Objects

IGN. (2014, June 26). N64 Royal Raceway [Image]. https://www.ign.com/wikis/mario-kart-8/N64_Royal_Raceway

Super Mario Wiki. (2022). A ? coin [Image]. https://www.mariowiki.com/%3F_Coin

This colour sheet was also created using Coolors.co. Although I might be able to hand-paint the coin texture, if I run out of time then I will go with 'F8E442 Minion Yellow' and add a metallic shader.

Nintendo. (2020). Items Galore! [Image]. https://www.nintendo.co.uk/Games/Nintendo-Switch-download-software/Mario-Kart-Live-Home-Circuit-1832413.html

MSPaint sketch of coin design. Although Nintendo's coins have the vertical slit in the middle, I would prefer to keep the star shape as a motif throughout.

Extracting colours from these fence references was difficult, because I couldn't plug them directly into Coolors.co but I found an eye-dropping tool online. From this I was able to generate HEX codes to put into Coolors.

I like the idea of having two horizontal beams between each post, but I feel that it will become too repetitive over a large area. So, I may have some sections where there is a cross-beam as well to make it more visually interesting.

UPDATE: I did not end up keeping this idea. It would've required me to make the posts a lot thicker to accommodate the extra beam across the front, and I found that it ruined the overall look.

Sketch of possible fence section design, done with MSPaint.

Another idea that I really like is to have corner posts that stand out from the rest; they will have a scaled-down version of the star item placed on top as an ornament. I feel it would add a little bit extra to the scene but without creating too much more work for myself.

Burman, R. (2012). 'Secret' Super Mario Galaxy Levels Hands-on [Image]. IGN. https://www.ign.com/articles/2007/08/31/secret-super-mario-galaxy-levels-hands-on

IGN. (2014). Wii Moo Moo Meadows [Image]. https://www.ign.com/wikis/mario-kart-8/Wii_Moo_Moo_Meadows

Parkin, J. (2020). Super Mario Galaxy guide: Every Prankster Comet [Image]. Polygon. https://www.polygon.com/guides/21440114/super-mario-galaxy-prankster-comet-power-star-cosmic-daredevil-fast-foes-purple-speedy

Super Mario Wiki (2022). Artwork of a Power Star [Image]. https://www.mariowiki.com/Power_Star

For the star item, I'm not going to add the 'eyes' as Nintendo does. This is mostly because I don't know if I am allowed to use trademarked images in my projects if I showcase in a public portfolio, and partly because it won't fit in with the other assets in the scene if there is an implication that it is sentient/magical.

I will use the same colours for the star as for the coin, because for this project I don't see the benefit in having to manage two palettes with only slight differences. To show that they are separate items I will space them out in the layout instead.

A sketch of how the grass may be constructed. From what I understand, there are two main ways to go about creating the blades: shape them in Blender and apply a plain colour texture, which will result in slightly higher poly-count, or try using Lisa Rye's method of using textures to create the leaf shapes (Week 8). For the sake of saving time, I will stick with the first option even though I would very much like to learn the second.

(Right) I found a stylized grass texture to use for the ground plane in the scene. I retrieved it from SangerStudios (2018).

SangerStudios. (2018). Stylized Grass [Image]. OpenGameArt. https://opengameart.org/content/stylized-grass-stylizedgrasstexturejpg

For the grass, there are two sets of colours present: the leaves and the stem. Once again, I used Coolors.co to find them.

Vos, N. (n.d.). Super Mario Galaxy [Image]. Pinterest. https://www.pinterest.co.uk/pin/376683956339802972/

Chard, B., Garripoli, J. & Morgan-Roberts, S. (n.d.) Through the Poison Swamp [Image]. Gamer Guides. https://www.gamerguides.com/super-mario-3d-all-stars/guide/super-mario-galaxy/bubble-breeze-galaxy/through-the-poison-swamp

Process

1. I started modelling the first tree variation with a Roundcube object in Blender. This will become the leaves.

2. I created some layers by extruding certain faces and resizing the edge loops. I made sure to merge all vertices that were occupying the same space, in order to minimise unused edges.

3. Here I shaped the layers a little bit to make it look more like a tree.

4. I then added a basic trunk with a cylinder. When I got the leaves to shade smooth, I got these weird shading artefacts and I'm not sure if that's normal for low-poly models.

5. The base of the trunk. I initially tried to use a cone to create the flared shape, but there was a very obvious seam between the two objects. This looks a little better, but the shading is still wrong.

6. I used the same method to create a second tree. Although they share a UV map, they will be exported as separate objects so that I can move them independently of each other.

7. The UV, Normal, Roughness and Albedo maps. They're a little ugly because I'm not used to painting textures by hand.

8. I decided to place the box collider primarily around the trunk. This is because in real life a person can sometimes shift the leaves to get closer to the tree, but the trunk is unmoving.

9. The completed tree models. The lighting is not perfect yet, as I hope to have some form of ambient and emissive lighting from the star nearby.

1. The beginning stage of the coin item.

2. The modelled coin.

3. It took me a while to get the coins textured properly, because the UV map did not align perfectly with the albedo map. I fixed this by resizing the texture in Procreate.

1. The first stage of the fence. The post on the left will be a corner post, so I made it slightly larger than the other.

2. A section of the completed fence. I plan to have the entire fence as one object for export, so that I don't have to fuss with placement in Unity.

UPDATE: this proved extremely tricky to move around the viewport and then unwrap, so instead I have the long and short sides as separate objects.

3. The completed fence. I still want to have the stars emit some light, if time allows, but otherwise I am fairly satisfied with how it turned out.

UPDATE: I was able to create a light source between each pair of stars to give the illusion that they emit their own.

1. The beginning of the star item. It was important that the cylinder have 20 sides, so that I could give the five points a rounder, more stylized look.

2. The completed star mesh. I achieved this by adding edge loops and bevelling the points to make them a bit softer. It is a bit higher-poly than I would like, but it will only be used once in the scene so it shouldn't cause any issues.

3. I managed to get the star to emit light by adding a point light to the scene and placing it as a child object of the star. When the item is collected, the light is destroyed with the mesh.

1. This is the little stem part of the grass, from which the blades will emanate.

2. The finished model. I expected the grass to be the most difficult to model but it went surprisingly fast.

3. The textured grasses. I realised at the last minute that the blades don't have back-faces. I decided not to attempt to change it because I don't know if I will have time, and it looks fine in-game.

User Interface

Research & Design

https://www.1001fonts.com/hawaiian-punk-font.html

https://www.1001fonts.com/aeromus-kirho-font.html

https://www.1001fonts.com/cartoo-nature-font.html

https://www.1001fonts.com/river-adventurer-font.html

https://www.1001fonts.com/guava-candy-font.html

The font in Super Mario Galaxy is what I want to try and achieve. To do so, I will use the style 'Hawaiian Punk', from 1001 Fonts for the title and heading text. This image is from the Game UI Database.

Game UI Database. (n.d.) Super Mario Galaxy Notification: Game State [Image]. https://www.gameuidatabase.com/gameData.php?id=422#&gid=1&pid=28

I picked out these fonts as possible candidates because they share in the cartoony, fun style of many Nintendo Wii games. My favourite is 'River Adventurer', but I don't think I will be able to use it as it has more of a jungle theme than the others, and wouldn't really fit in.

Here is an example of the font style used for the dialogue text in Super Mario Galaxy 2 (Nintendo, 2010). For this, I will use the font 'Guava Candy' in my project because it is simple and easy to read, but still has the same whimsical feel as the rest of the design.

Nintendo. (2010, June 11). Super Mario Galaxy 2 [Image]. https://www.nintendo.co.uk/Games/Wii/Super-Mario-Galaxy-2-529982.html

This is a screenshot of the end-game menu from Mario Kart 8 Deluxe (Game UI Database, n.d.). Though the colours in this are more muted than I want for my project, I like how the screen is clean and clutter-free.

Game UI Database. (n.d.). Mario Kart 8 Deluxe Post-Game Menu [Image]. https://www.gameuidatabase.com/gameData.php?id=83#&gid=1&pid=38

These buttons are almost exactly what I will try to emulate in my UI. This image was also sourced from the Game UI Database (n.d.). To stay true to the mid-2000-s Nintendo Wii style, I will keep the glossy-looking buttons and opaque background for this project.

Game UI Database. (n.d.). Mario Kart 7 Post-Game Menu [Image]. https://www.gameuidatabase.com/gameData.php?id=754#&gid=1&pid=20

This is a fan-made alternative title screen for Mario Kart 8 Deluxe (YoshiLOL, 2017). I really like the combination of crisp, clean lines and the brightly-coloured chaos because it still feels true to the Nintendo brand even though it's a more modern take on the classic design.

YoshiLOL. (2017). MockUp [Image]. GameTurkey. https://gamebanana.com/wips/47522

The title screen from Mario Kart Wii (PressStartOnce, 2014). This is also sleek and simple, despite being almost fifteen years old. I really like the style of the title, as it's far more interesting than just plain text. My only worry is that it will be difficult to replicate.

PressStartOnce. (2014, May 12). Mario Kart Wii Title Screen [Video]. YouTube. https://www.youtube.com/watch?v=jlnzmKAx4-M

Falling somewhere between the two Mario Kart games, the title screen of Super Mario Galaxy 2 is closer to what I will try to achieve. The background slowly orbits the title, which I won't do, but I like having the galaxy behind a fun, colourful title. I got this image from another PressStartOnce (2014) video.

PressStartOnce. (2014, May 30). Super Mario Galaxy 2 Title Screen [Video]. YouTube. https://www.youtube.com/watch?v=zVmNAZ24VRI

I quickly sketched out some possible designs for my title screen. I found that I really like the idea of having a large, graphic title, as well as the split background. The smaller side will be plain white or light blue, and the other will be a picture of a galaxy.

This is the pause menu from Super Mario Galaxy (Game UI Database, n.d.). It features similar round, glossy buttons to Mario Kart 7, as well as a title (in this case, the name of the current galaxy) and inventory counter.

Game UI Database. (n.d.) Super Mario Galaxy Pause [Image]. https://www.gameuidatabase.com/index.php?&set=1&sort=1&series=2&scrn=44#&gid=1&pid=8

The pause screen from Mario Kart 8 has the controls showing, as well as the standard resume and quit buttons (Cemu Wiki, 2022). I was previously considering having the controls on the title screen or as part of the HUD, but I decided I will add it to the pause menu as suggested.

Cemu Wiki. (2022). In-game pause menu [Image]. http://wiki.cemu.info/wiki/Mario_Kart_8

These are two possible designs that I came up with for the pause menu. I really liked the idea of having some kind of semi-transparent pattern as the background, like in Super Mario Galaxy.

A mock-up of the title screen, created with Photopea. The galaxy image is from Avabrayan (2021). I will have to play with the colours a bit more to find a combination that works, as the purple title is a bit hard to see against the dark sky.

Avabrayan. (2021.). Colorful galaxy space digital art wallpaper [Image]. XFCE-Look. https://www.xfce-look.org/p/1601936/

themancalledscott. (2022). Super Mario Galaxy Turns 15! [Image]. Wizard Dojo. https://wizarddojo.com/tag/super-mario-galaxy/

Game Over Dex Wiki. (2020). Mario Kart Wii [Image]. Fandom Wiki. https://game-over-dex.fandom.com/wiki/Mario_Kart_Wii

I've noticed that Mario Kart and Super Mario Galaxy don't really have generic end screens to signify to the player that they won or lost. Instead, there is an animation sequence followed by information specific to the game.

For instance, in Mario Kart Wii it will show the player's position on the podium or the final ranking of all competitors. In Super Mario Galaxy, the player is told that they "got a star" and the game returns to the level selection menu.

As a result, I don't have any specific references to go off so I will use my own title and pause menus to guide my design.

I came up with some ideas for how to do an end-game screen, and decided on something similar to either the pause menu or the title screen.

A mock-up of what the end-screen could look like. I will do the "You Win!" announcement in the same style as the title on the start screen.

An example of an interaction prompt in Super Mario Galaxy (Supper Mario Broth, 2021). I really like how simple it is, especially as it requires a key to be pressed rather than a UI button.

Supper Mario Broth [@MarioBrothBlog]. (2021, January 2). In Super Mario Galaxy 2, Mario's prompt for interacting [Tweet]. Twitter. https://twitter.com/mariobrothblog/status/1345385707267891200

Process

1. Using Procreate, I drew a title for the starting screen. The aim was to make it look like the Mario Kart Wii title, but I don't know if I quite got there. When I exported the image, I found that the colours had changed a bit so I had to do some colour-correction in Photopea.

2. I also created two variants of a button to use. The golden one is for when the mouse hovers over the button and the darker one is the general colour. Once again, my inspiration was Mario Kart.

3. The final Title Screen. I don't need any of this to be interactable, as the player will just press A to get started. I created this using Photopea. I ended up scrapping the multiple options on this screen because, when I looked back over the Nintendo start menus, I found that they used simple prompts rather than multiple buttons.

4. This is the final render of the menu. The resume button is yellow because it is currently highlighted. I had to play around a little to get this menu to come up when escape was pressed, as it initially didn't. I realised that I was turning the entire menu off at the beginning, rather than just the visible aspects. The honeycomb mesh is from Kayal (n.d.) and the arrows were sourced form EncoderXSolutions (2019).

UPDATE: the game works perfectly the first time around, but as soon as the player tries to restart all of the UI assets default to the original prefabs.

EncoderXSolutions. (2019). Right Direction Arrow Icon Vector Art PNG [Image]. PNGTree. https://pngtree.com/freepng/right-direction-arrow-icon_4243467.html

5. This is the end-game screen that I chose. I wanted it to be similar to the pause menu because I felt that the harmony of the slanted panel was a nice way to visually separate the game from the title screen, but tied it back with the decorative text. That was also done in Procreate.

During development of the pause and end menus, I was experimenting with the placement of the inventory counter. In the end, I decided to keep it at the top right.

Kayal, N. (n.d.) Clip Art X Grey Honeycomb [Image]. PNGItem. https://www.pngitem.com/middle/hhmJwJ_clip-art-x-grey-honeycomb-black-mesh-texture/#google_vignette

6. I was able to get the main menu to disappear when the player presses A by creating this key binding script. Once done, I attached it to an empty game object and assigned the main menu to the right slot. I still need to figure out how to add music and a start-up sound effect.

UPDATE: I changed the start key from A to X. This means that I won't have any overlap between actions.

7. For the inventory counter, I changed out the plain squares for coin and star images. These I created by taking screenshots of the objects in-game and removing the backgrounds using Photopea.

8. I set up some simple dialogue boxes and changed the text.

9. I created a simple sprite to prompt the player to press E in order to collect the items. The button was made in Procreate, and then the text was added on using Photopea.

Audio

Research & Design

The audio used in Nintendo games is generally of the 8-bit, chiptune style. Chiptune music is a specific genre and method of creating music that originated before the development of modern synthesisers. This type of sound is rarely as well-defined as modern music, as it is made using early computer sound chips (Huang, 2021).

Huang, A. (2021, October 15). What is “Chiptune Music”? The Keynote. https://keystonekeynote.com/3367/forum/the-world-today/what-is-chiptune-music/

I found this compilation of the item sounds found in Mario Kart Wii (SoundMeFreely, 2022). In particular, I like two of the celebratory sounds (0:0:14 - 0:0:26).

SoundMeFreely. (2022, April 17). All Item Sounds • Mario Kart Wii • Sound Effects • Nintendo Wii 2008 • [Video]. YouTube. https://www.youtube.com/watch?v=ubhmUMW8BZo

During my design process, I had the idea of using some of the actual jingles and sound effects from Nintendo Wii games. However, Virostek (2015) explains that copyrighted sounds cannot be used at all without the permission of the copyright holder.

Although I don't have any plans to distribute this project or show it off to anyone other than SAE marking moderation, I'm unwilling to take the risk. Instead, I will find royalty free audio clips online and use those.

Virostek, P. (2015, December 5). Sound Effects Copyright Questions. Sound Effects Search. Retrieved December 2, 2022 from https://www.soundeffectssearch.com/2015/05/12/sound-effects-copyright-questions/

This video plays the background music of several racetracks from Mario Kart 8 (ClefferNotes, 2014). For the purposes of my project, I thought that 'Lakitu's Cloud Way' (0:25:54 - 0:29:37) is something I'd like to replicate. It's not as fast as some of the others, which is perfect for a relaxing scene.

ClefferNotes. (2014, April 17). Mario Kart 8 Music - Soundtrack Medley [Video]. YouTube. https://www.youtube.com/watch?v=muzgeISYv_0

Process

1. I decided that I wanted some form of voice over for the NPC's dialogue, so I used NaturalReader.com to play the text to speech and recorded it. I then used CloudConvert.com to change the mp4 files into mp3. Finally, I trimmed the three clips in Audacity to eliminate the blocks of silence.

2. I recorded a few mouse clicks using my mobile phone and my laptop, which I then converted to mp3 using the same site as before. Again in Audacity, I trimmed out the sections I didn't want and was left with a nice-sounding analogue click.

3. I was able to attach the click sound to the relevant buttons by simply adding another condition to play the 'Click SFX' audio source.

4. I found a suitable clip for picking up the coins (gamer127, 2022) and, after some brief editing in Audacity to alter the pitch, I imported it into Unity.

UPDATE: it overshadowed the background music too much, so I reduced the amplification in Audacity, as there was nowhere in Unity to change the volume.

gamer127. (2022, July 19). success. Pixabay. Retrieved December 2, 2022 from https://pixabay.com/sound-effects/success-68578/

5. The sound that plays when the star item is collected is from Fupicat (2021). I amplified it a bit with Audacity before importing the new clip.

Fupicat. (2021, August 10). WinSquare. Pixabay. Retrieved December 3, 2022 from https://pixabay.com/sound-effects/winsquare-6993/

6. I attempted to get a jingle to play when the start screen is closed, but it either played continuously every time the player pressed A or didn't work at all.

7. I found some suitable background music (MacLeod, n.d.) and imported it straight into Unity, no editing required.

8. After getting the start button to function properly, I found a fun tune to play when it is pressed (nojisuma, 2022). The original clip is around 2.5 minutes long, so I trimmed it right down with Audacity to get only the first few seconds. I also adjusted the speed so that it's more like the Nintendo start music.

MacLeod, K. (n.d.). Fluffing a Duck. Chosic. Retrieved December 3, 2022 from https://www.chosic.com/download-audio/27248/

nojisuma. (2022, November 24). あられ hail. Pixabay. Retrieved December 5, 2022 from https://pixabay.com/music/beats-hail-126903/

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'm hand-painting textures for the very first time, as well as attempting low-poly designs. This is totally new to me as I generally prefer realistic models and textures, and I'm finding it to be unexpectedly tricky. I still don't quite have my head around roughness maps and how to create them. Barber's post (n.d.) about the different types of maps was useful for getting a quick overview of what they each do, but unfortunately didn't answer my questions about roughness maps.

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).

During my research, I read an article (Hemphill, 1995) that examined the association between certain colours and emotions. The study was especially interesting because it found that women tend have a higher emotional response to colour than men, and that more than 50% of either group listed blue as their favourite colour. Bright colours (such as yellow, blue, red and white) elicited mostly positive emotional responses, whilst darker colours (like brown, black and grey) resulted in negative responses. Notably, the highest-ranked positive colour was blue, then green and red. I tried to use this information in my project by including as much blue and green as possible, and found that the skybox I chose cast a bluish light over the whole scene. Even though I want to stay on-brand with Nintendo's love of bright colours as much as possible, I also want to create a scene that is relaxing for the player.

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)

Currently, I've not had to outsource too much beyond my general design research, but I'm expecting to need some assistance with a couple of minor issues. One of these is the camera positioning, and the fact that it doesn't follow the player properly. I asked about it in class, but I felt the instructions were a bit loose and I don't want to accidentally end up without a functioning camera. It's been a bit difficult, with class being online lately, to get feedback on how I'm tracking. I think I may need to email Bec and ask her to have a look over my Learning Journal.

Barber, B. (n.d.). What are the different texture maps for? Poliigon. Retrieved December 1, 2022 from https://help.poliigon.com/en/articles/1712652-what-are-the-different-texture-maps-for

Hemphill, M. (1995). A Note on Adults' Color–Emotion Associations. The Journal of Genetic Psychology, 157(3), 275-280. https://doi.org/10.1080/00221325.1996.9914865

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).

Ultimately, this project was successful. The models were a bit uncomfortable to make, and I've realised that low-poly isn't really my style. It was a bit of a struggle to get them textured correctly, particularly the trees. I didn't have access to 3D painting software like Substance Designer, so I had to keep reimporting my textures to see if they worked. Eventually I settled on a design I liked and moved on. Other than that, I had fun with this project and am pleased with how it eventually turned out. I would've liked to have been able to include actual music and sound effects from Nintendo, but I decided against it because I don't fully understand how copyright works for SFX. Additionally, I learned how to use lights in a fairly simple way in the scene; I imported a nice skybox which provided some ambience, and then set up a point light to emanate from the star item and fence corner posts. This gave the whole scene a really relaxing, evening feel and I'm really happy with the overall aesthetic.

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

The biggest problem I had was when the player character stopped moving. Without it, I couldn't test any of the UI or NPC assets I'd just created, so I was suddenly very stressed about how I was going to deliver a finished project on time. I emailed Bec to let her know what was going on and she arranged a video call to help me that same day, which I am immensely grateful for! After about half an hour of trying to figure out what was going wrong, we realised that I'd somehow accidentally messed with the original prefabs for the player and camera. With Bec's guidance, I created a save file of my project and completely reimported the starter assets pack, then replaced the faulty prefabs. That fixed the movement problem, but the restart button kept resetting the scene to all the default assets, including music and UI. In Week 12's class, it turned out that because I had two scenes in the project, the code on the restart button was loading the default scene instead of my saved scene. It was an easy fix, and now everything works as intended.

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)

For any future projects, I will probably try to stick to higher-poly, more realistic models. I have newfound respect for people who can make low-poly models look really good, because I found it quite hard. Over the holidays, I'd like to learn more about the different types of texture maps and their usage. I'm familiar with albedo, bump and normal maps from previous projects, but others such as roughness have given me trouble. I think some practice with how roughness, metallic and gloss maps affect a mesh and interact with light will be useful in giving me a better understanding. I've heard about some software that is used for baking ambient occlusion maps and the like, so I'd be interested in looking into getting Substance Designer and other texturing programs at home.

Page updated

Report abuse