Experiential Design: Final Project
9/11/2023 - 15/12/2023
Edwin Choo Quan Rong / 0348305 / Bachelor of
Design (Hons) In Creative Media
MMD 60204 / Experiential Design
Final
Project
Task 3: Final Project
For this task, we are to finalize the features of our app. Here is the
progress from
Project 2. This task serves as a continuation from it.
To begin the creation of a popup menu that displays the info of the projected
3D model such as width, height, and thickness, I created 2 buttons called
"Size" and "Close" to enable and disable the popup.
However, the buttons currently do not have any function attached to it. To
make the popup feature work, I attached a script that allows the buttons to be
interactable. This makes the buttons work as intended.
Fig 1.1 - Popup Buttons Script
The script is then attached to the canvas as a component, where the buttons
are located in. After that, the size button is selected to add an "On Click"
event.
Fig 1.2 - On Click Event
Drag and drop the canvas with the script for popup into the object and select
Popup Controller > Show Popup
Fig 1.3 - PopupController Settings
After doing this sequence, the "Size" button now works by popping up the info
board onto the screen. The close button follows the same sequence of steps
with the main difference being instead of selecting ShowPopup, the HidePopup
button is selected instead. This closes the popup.
Now the button works properly by clicking on the "Size" and "Close" button.
Fig 1.4 - Main Menu
Here is the main menu for the application. Down below is the steps documented
for creating this menu.
Firstly, I created a new scene and added a canvas from the UI menu under
Hierarchy. A panel is then added into the canvas and both are stretched to fit
the phone size of 1176x2400 resolution. A background image is then added into
the panel.
Secondly, I added 3 buttons: Enter, Instructions, & Quit to enter the main
feature of the app, showcase the app instructions, and close the app
respectively.
Fig 1.5 - Illustrator Assets
I made some assets using Adobe Illustrator which will be used later on as
Source Images for panels and buttons inside Unity for the main menu.
Fig 1.5 - Inputting Buttons
I inputted the buttons by using UI > Buttons and adjusted the scale of it
to fit the center. The buttons are then duplicated to meet the requirements of
3 buttons. The button designs are then attached as an Image on the buttons.
The images are made by designing it in Adobe Illustrator and exporting it as
an image.
The buttons are then resized to properly visualize the image elements without
it looking stretched or compressed.
Fig 1.6 - Change Page Script
This script is created for the Enter button as well as the back button to work
in Unity, so that users will have the expected experience of clicking in to
the app and returning back to the main menu. The scripts for the Main Menu and
main MVP of the app is set to 0 and 1 respectively, ensuring that the code
works with the proper setting.
Fig 1.7 - On Click Event setup
Similar to the previous On Click event for Popup menu, the script above is
attached to the Main Menu canvas and applied onto the Enter button. Select
MainMenu > PlayGame to enter the next scene.
With the same concept, the setting is applied in the next scene on the "Back
Arrow" button but with MainMenu > Return instead to go back to the Main
Menu screen.
Fig 1.8 - Instructions Button Configuration
As for the instructions button, this is the on click inputs made to ensure
that when clicked, the instructions menu with text pops up while the 3 buttons
are not shown to remove overlapping issues.
Since there is no "SetClose" function to close a specific set of buttons, I
used the "SetActive" function for the game object but untick its effects to
simulate the outcome of it not appearing when the Instructions button is
clicked. This ensures a seamless transition into the Instructions Menu page.
Fig 1.9 - Close Button Configuration
The reverse setting is applied to the Close button inside instructions menu to
close the panel. This is so that the interaction works as expected.
Fig 2.0 - Quit Button Configuration
The quit button works by adding the MainMenu > QuitGame with the script
applied on the Main Menu canvas into the object selector.
The app should be working as intended, down below is a video demonstration of
the app.
Video 1.1 - WallDeco App Video Demonstration
Download the files here:
Comments
Post a Comment