Week 10 (24/11/2024 - 30/11/2024) Polishing a Development logs and Game UI

The Wix.com development blog got a further update this week and tweaked some of the game's UI. Create a scene that shows the player how the Perlin sound animation worked and how the real-time maze generation worked. Then linking all the scenes in the menu together created a button that could be pressed to go to the menu, and placed the basketball in the menu using random range principles.  Also, fixed a bug in the menu page by managing the timescale not resetting to its original value when the game ended.

Development Blog

Having created a blog site all about this video game and divided it into weekly sections to show what is the future of this project. The reason this project chose Wix.com is because it is easy to use and when uploading a video, there is no need to have to upload it to the website. Using a link. So uploading the video to YouTube and pasting the link to the video on the website. When doing this, there was a slight problem with the layout because the website is quite slow and there are some features that cannot center some images. 

Figure 1: Weekly development blog on Wix.com, showcasing updates and progress logs for the video game development.

Linking Scene and UI 

Having to customize the buttons on the menu page, such as adding a color when the player presses the button or hovers the mouse over it. Then link all my scenes together into 4 scenes called GameplayMazeScene, MazeGenPreviewScene, PerlinNoiseScene, and MenuScene. Using a simple script with settings that say when the player press this button, it will go to the scene with the name player set. At the moment, each scene can not be made to go back and forth. It will have to be made to go back and forth next week. Right now, it is just a blank scene.

Figure 2: Menu screen for "The Scary Random Maze," showing interactive buttons linking to different scenes: GameplayMazeScene, MazeGenPreviewScene, PerlinNoiseScene, and MenuScene.

Polishing and Fixing Bugs in the game.

The rotation of cubes in the menu page has been implemented using the Random Range system to make the menu page look more profound and aesthetically pleasing. Also, we need to add the Perlin noise texture functionality to give the cube more playfulness. While changing the scene,  noticing a bug that occurred because when finished the game and exited the menu, the time scale was still set to the same. So it had to be reset the settings and when exited the game, set the time scale back to the original.

Source: Created by Juclachak Juntasilp, 2024.

Idea to create UI

Watching the UI tutorial video called Unity UI Tutorial | An Introduction by the channel called AIA gave me a lot of new ideas and knowledge. For example, using Anchor presets that can be used to anchor the UI to any desired angle. Making your own sprites and putting them in your game to make it more engaging. Using shadows on buttons to make the buttons more dimensional. Adding Vertical Layout Groups so that it do not have to waste time arranging each button individually, and it will also arrange itself when our computer screens are not the same width.

Source: Example of UI layout management inspired by the CSS Grid Layout tutorial from AIA.

Reference

---

1. Juntasilp, J. (2024) Jino1113 Development Log: CT7120 Procedural Generation Algorithms. Available at: https://junlachaktophat.wixsite.com/jino1113devlogct7120 (Accessed: 25 November 2024).

2. Juntasilp, J. (2024) The rotation of cubes in the menu page implemented using the Random Range system. Available at: https://youtu.be/TEYH_xyCrdM (Accessed: 9 December 2024).

3. AIA (2018) CSS Grid Layout Tutorial: Understanding Grid Areas. YouTube. Available at: https://www.youtube.com/watch?v=IuuKUaZQiSU (Accessed: 10 December 2024)