Major Project 2
Kelly Lau Jie Ning/ 0354839
Major Project 2/ Bachelor of Design (Honors) in Creative Media
Goal
The goal for this week was to explore and understand the UI design of horror games, especially for the main menu. I wanted to collect good references and get inspiration for layout, style, and user experience. At the same time, I aimed to start developing initial ideas for our own game’s main menu design.
Implementation
In this week, I searched for different horror game UI references, focusing mainly on main menu designs. I looked at how other games arrange their elements such as title, buttons, background visuals, and overall mood.
Reference link:
https://www.artstation.com/artwork/gR6RBK
https://www.artstation.com/artwork/JrWgvZ
https://www.artstation.com/artwork/K3ykDB
After gathering references, I started sketching some ideas. I experimented with several layouts, trying different positions for the game title, buttons, and images. For example, I tested placing the title in the center, top, and side, and also tried different button arrangements to see which one feels clearer and more suitable for a horror theme.
Through this process, I focused on keeping the design simple but still atmospheric, so it can match the feeling of our horror game.
Result
At the end of the week, I came up with a final layout for our game’s main menu. The game title is placed at the top left corner, with the menu buttons positioned next to it on the right side. On the right side of the screen, there is a main visual image that helps to build the mood of the game.
This layout creates a clear structure and balances both UI and visual elements. It also leaves enough space for the background image to enhance the horror atmosphere. Overall, this serves as a good starting point for further development and refinement in the next stages.
Goal
The goal for this week was to understand how game UI works inside Unity and improve my main menu design. I also wanted to learn from existing games by exploring their UI structure and see how I can apply similar ideas to my own project.
Implementation
In this week, I explored other Unity game UI files to study how their UI is built. I tried to understand how different UI elements are arranged, such as buttons, layouts, and transitions between pages. By looking at these examples, I wanted to learn what works well and apply similar ideas to my own design. However, when I tried to open the Unity file, some errors happened, and the buttons were all missing, so I could only look at the video for reference
Reference link:
https://www.bilibili.com/video/BV1AFvYe1EBv/?spm_id_from=333.1391.0.0
At the same time, I created the main menu design in Illustrator. However, after testing, I realized that the font I chose was not suitable for the horror theme. Because of this, I redesigned the main menu and changed the font to ProvidenceSansOffcW00-Regular, which better fits the mood and atmosphere of the game.
I also started testing in Unity. I experimented with basic interactions, such as making buttons clickable and allowing them to navigate to the next page. This helped me understand how UI interaction works in Unity and how to connect different scenes or panels together.
Other than that, I am also testing the pop-up page with the scripting.
YouTube Tutorial Link:
https://www.youtube.com/watch?v=DX7HyN7oJjE
Result
By the end of the week, I gained a better understanding of how Unity UI works, especially in terms of button interaction and page navigation. I was able to successfully test basic button functions that move from one page to another.
After redesigning the main menu with the new font, the overall visual style became more suitable for a horror game. The UI now looks more consistent and matches the intended atmosphere. Overall, this week helped me improve both my technical skills in Unity and my design decisions for the UI.
Goal
The goal for this week was to further improve the UI design of the game, especially the main menu and settings page. I also wanted to refine the visual style of the game title and think more carefully about how users will interact with the UI buttons.
Implementation
In this week, I designed both the main menu and the settings page using Illustrator. I focused on improving the layout, visual balance, and overall consistency of the UI. I adjusted the placement of elements such as buttons, text, and background visuals to make the interface clearer and more visually appealing.
At the same time, I started to think more about the interaction of the buttons. I considered how the buttons should behave when users hover over them or click on them, such as changes in size, highlight effects, or visual feedback. This helped me plan how the UI should feel more interactive and responsive in the game.
In addition, I worked on designing the game title. I experimented with the Frost Scream font and used it as a base. After that, I refined and modified the font design to better match the theme of our horror game. I adjusted details such as the shape, spacing, and style to make it look more unique and suitable for our game identity.
Result
By the end of the week, I successfully completed improved designs for both the main menu and the settings page. The UI now looks more consistent and better aligned with the horror theme.
I also developed a clearer idea of how button interactions should work, which will be helpful when implementing them in Unity later.
For the game title, the refined version of the Frost Scream font gives a stronger visual identity to the game and better represents the overall mood. Overall, this week helped strengthen both my UI design and visual development skills.
Goal
The goal for this week was to develop a strong visual identity for our game and explore animation for UI elements. I also aimed to design and visualize the loading page, and test how it could be animated before implementing it in Unity.
Implementation
In this week, I designed a logo for our game. The purpose of this logo is to create a clear identity, so that when people see it, they can immediately recognize our game. I focused on making the logo match the horror theme and overall style of the game.
After designing the logo, I used Adobe After Effects to animate it. I experimented with different animation styles to make the logo more dynamic and engaging. This also helps to introduce more animated elements into our game, making the experience feel more immersive and polished.
In addition, I designed the loading page using Adobe Illustrator. I carefully arranged the layout and visual elements to match the game’s theme. After that, I imported the design into After Effects and started to animate it. I tried to simulate how the loading page would look and behave in Unity, including how the animation flows and how the elements move together.
Result
By the end of the week, I successfully created a game logo and an animated version of it. The logo helps to establish a stronger identity for the game, and the animation adds more visual interest and professionalism.
I also completed the design and initial animation of the loading page. This gives a clearer idea of how the loading experience will look in the final game.
Overall, this week allowed me to explore both design and animation, and helped prepare assets that can be further developed and implemented in Unity.
Goal
The goal for this week was to improve the game’s visual identity and refine the loading page based on feedback. I also aimed to start implementing my UI design into Unity and learn more about scripting for interaction.
Implementation
In this week, we decided to redesign the logo because the previous version was not working well. Together with my teammates, we explored a new direction by creating a studio-style logo that will appear at the beginning of the game before the main menu. This helps to make the game feel more complete and professional.
Bernice, Jie Ying, and I each created our own logo sketches. After that, we discussed and voted to select the design that we liked the most. This collaborative process helped us choose a logo that best represents our game.
Based on the feedback from last week, we found that the loading page looked too empty. To improve this, I added fog effects in the background to enhance the horror atmosphere. I also included a family photo of a little girl and a little boy, where the boy’s face is blacked out. This not only fills the empty space but also suggests that there is a misunderstanding or conflict between them, which helps to emphasize the story of our game.
In addition, I started implementing my UI design into Unity. I imported the assets that I created in Illustrator and began building the main menu UI inside Unity. I arranged the UI elements such as the title, buttons, and background, and tested how they appear on screen.
At the same time, I also started exploring scripting for UI interaction. I experimented with simple scripts to control button behavior and improve user interaction.
This script can adjust the scale when you highlight it and press it.
Result
By the end of the week, we successfully finalized a new direction for the logo through team discussion and voting. The idea of a studio logo also improves the overall game experience by adding a proper introduction before the main menu.
The loading page has been improved with additional visual elements, making it less empty and more aligned with the horror theme. It also now better communicates the story behind the game.
I was also able to implement my UI design into Unity and make it work. Through this process, I gained a better understanding of scripting for interactions, which will be useful for further UI development. Overall, this week helped improve both the visual design and technical implementation of the project.
Goal
The goal for this week was to build the full UI flow of the game and improve the loading experience. I also aimed to integrate animations into Unity and enhance user interaction through scripting. In addition, I worked on developing more UI pages such as the chapter select and settings page.
Implementation
In this week, I created the full UI flow of the game. This includes the sequence from launching the game, showing the studio logo, entering the main menu, clicking “New Game”, transitioning to the loading page, playing the opening scene, and finally entering the gameplay scene.
For the studio logo, I implemented scripting to control its transition. Initially, the logo would automatically move to the main menu after a few seconds. However, I added an extra interaction where players can press any key to skip directly to the main menu. This improves user experience, especially for players who do not want to wait.
For the opening story scene, I also implemented scripting so that the video will automatically play when the scene starts. Once the video finishes, it will directly transition to the gameplay scene without requiring user input. This creates a smoother and more cinematic flow.
I also implemented the loading system so that it automatically transitions to the opening scene after loading is complete. However, after testing, I found that the transition was too fast, and players did not have enough time to see the loading page. To solve this, I adjusted my scripting so that the first 80% of the loading progresses faster, while the last 20% slows down. This allows players to better view and experience the loading screen.
I also worked on integrating the ghost chasing the little boy animation that I created in After Effects into Unity. I designed the animation so that it follows the progress of the loading bar. Using scripting, I controlled its start point, end point, and adjusted its X and Y offsets to ensure it moves correctly along the loading bar.
To import the animation, I exported each frame as a PNG sequence from After Effects and imported them into Unity. Then, I used scripting to play the frames in sequence, creating a smooth animation. This method also ensured that the animation kept a transparent background.
In addition, I designed and implemented the Chapter Select and Settings pages as pop-up UI panels. The Chapter Select page allows players to choose which chapter to start from. Each chapter is linked to specific props, and locked chapters remain hidden or inaccessible until the player unlocks them in the game. Once unlocked, the player can directly select and start from that chapter.
Result
By the end of the week, I successfully created a complete UI flow for the game, from the start screen to the gameplay scene. The transitions between scenes are now smoother and more controlled.
The addition of “press any key to skip” for the studio logo improves user experience by giving players more control. The automatic playback and transition of the opening scene also create a more seamless and cinematic flow.
The loading experience was significantly improved by adjusting the loading speed, allowing players to better view the visuals and animations.
The animation of the ghost chasing the boy was successfully integrated into Unity and synchronized with the loading bar, enhancing the visual storytelling and interactivity of the loading page.
Additionally, the Chapter Select and Settings pages are now functional, adding more depth and usability to the game UI.
Overall, this week greatly improved both the technical implementation and the user experience of the game.
Goal
The goal for this week was to refine the Chapter Select UI, improve user interaction, and work on the character rigging and animation for the ghost character.
Implementation
In this week, I refined the Chapter Select page. I redesigned the frame of each chapter and changed it to a yellowish, aged paper style, similar to the border of the Chapter Select pop-up page. This makes the overall design more consistent and visually cohesive.
I also improved the interaction of the chapter buttons. When a chapter is highlighted, it appears brighter, and when it is not selected, it appears darker. This creates a clearer visual feedback for the user. In addition, I added a lock icon for chapters that are not yet unlocked, making it more intuitive for players to understand which chapters are accessible.
For the ghost character, I worked on rigging and animation. After receiving the model, I first attempted to do rigging in Blender. However, I found that after rigging, the model could not move properly. Later, I realized that the model topology contains many triangular faces, which caused issues with the rigging process.
Because of this, I decided to switch my workflow. I used Mixamo to rig the character instead, as it provides automatic rigging. After rigging in Mixamo, I exported the model back to Blender to continue working on the animation.
I then created the animation for the ghost character in Blender, preparing it for use in the game.
Result
By the end of the week, the Chapter Select page was successfully refined with improved visual consistency and better interaction design. The addition of highlight effects and lock icons makes the UI clearer and more user-friendly.
For the ghost character, although the initial rigging attempt in Blender was unsuccessful, I was able to solve the problem by switching to Mixamo. This allowed me to complete the rigging and proceed with animation.
Overall, this week involved both design refinement and technical problem-solving, and I was able to successfully continue the workflow despite the challenges.
Final Output
- UI/UX design for the game
- Human rigging
- Story animation (opening scene)
- Illustration/modeling of a living room corner to test consistency with the character’s rendering style and overall texture appearance
- To find more references for textures and UI/UX
- To improve the Canva board with more detailed information
Download and study assets from other authors on Unity.
Create topology for all characters.
Design UI/UX sprites.
Determine the character scale by blocking out one character first, then scale all other props accordingly.
Find a suitable font that matches the horror theme.
(Sketches from Mr. Kannan)
To create a visual guidelines book for all team members to follow, ensuring more consistent art direction (including references, rendering style etc.)
Find a proper typeface for UI and list down the reasons why you use this typeface.
For UI, the most important thing is interaction, so do interaction first.
Adjust textures according to the render reference
Create a UI/UX wireframe with assets, showing how it develops into the final version.
Explore ways to enhance the sense of weight and heaviness for all characters and the environment.
Determine the loop duration and ensure proper lighting particles are implemented.
Test the animation and evaluate how well the loop works.
Review all game files to identify anything missing.
Develop a complete and cohesive UI design set.
Define the concept and style, including how it evolved and how it translates from 2D to 3D.
The test serves as a proof of concept to demonstrate understanding.
Consider how to make the project into an interactive game.
Need solid concepts for every single room
Block out everything in Blender
The model is dropping - due to no collision box.
Light probes are for reflection.
Check the error and fix it (Script).
Post processing for Unity (make sure the checkbox is enabled in the camera) - rendering component
Need to show what you learn in your specialization.
Sketch out the concept for environment
Need to add some animation to the ui design
- The background of the loading page can have like grain and texture slowly animating
- The logo - look at proper reference.
- Same naming convention, so that it’s easier to overwrite in unity
- Test the character with the environment
- Test out the box (trigger box) that it can pops out
- Add in modifier, to sway (movement) in blender,
- Need to have more rhythm for the rooms, try to extend it
- Repaint the textures following our references
- Find the solution to fix the camera for the character.
- Rendered the environment to have a better showcase.
- Finish the whole environment scene design.
- The Unseen logo needs to be brighter
- The loading page is too plain; put more things
- Use video editing to complete parts that cannot be achieved in Unity.
The fog in the animation is too heavy.
The lighting in the animation is too dim.
Consider what can be improved in the environment.
Try adding a light that follows the character so the scene is not too dark (in Unity).
The lamp in the relaxing area is too dim and should be brighter.
The frames on the wall are too close together, causing them to overlap.
For the sacrifice area, the light is too sharp a change, and doesn't have shadows reflected in the surroundings.
Add more body movement (e.g., hand movement) to the character.
Make sure the content on the presentation slides is easy to read.
Use different perspectives and apply transformations to improve the animation.
It would be better to present a playable live game during the presentation.
For the chapter selection page, the chapter frame can be enhanced.
The lower part of Cynthia’s model needs to be simplified, as the game cannot handle such high polycounts.
In the opening cinematic, fix the character’s hand.
Avoid using red text on a grey background.
Add simple animations, such as Cynthia’s hand moving up and down.
For the chapter select, use a simple padlock animation that opens and closes on top of it.
Comments
Post a Comment