Experiential Design / Final Project

Week 11 - Week 15
Name: ALYSSA AISYAH BINTI 'ARIEF NASRAN (0364017)
Bachelor of Design (Hons) in Creative Media
Experiential Design (MMD60204) 

---

INSTRUCTIONS

 

---

TASK 3

Final Project

For the final Project of Experiential Design we are to continue building our app until completion and present a walkthrough of our app, showcasing its functionalities and features.

Process

All I had left to do was the tint/tone/shade feature, the rest of the multi-target image instances, and the quiz. 

First, I started on the rest of the multi-target image instances. As I had completed purple+yellow, and red+blue, all there was left to do for the complementary colour scan was: green+red, orange+blue, and for the colour mixer: blue+yellow, yellow+red. For this, I could copy the code I created before but edit the names and then simply link them together in the MenuManager like how I had done before. 

Fig 1.0 Remaining Colour Mixer Description

Fig 1.1 Remaining Complementary Colour Description

Fig 1.2 MenuManager of Multi Target Instances

In the "Detect Multi AR" script, similar to the logic I used for the purple and yellow combination to produce a brown sphere, I applied the same approach for the new pairs. For example, when the green and red descriptions are detected together, their respective 3D sphere and colour info descriptions will be displayed in AR.

The "Start()" sets the initial state of all resulting colour objects to inactive (SetActive(false)), which ensures that no mixed colors (the colour results of complementary colour/colour mixer function) are displayed when the scene starts, and  the "if-else" statements within "Update()" checks every frame whether specific pairs of colour objects are active, if they are, it triggers the activation of a resulting colour (e.g. red+yellow image targets=brown description + sphere) and displays its corresponding descriptive text. If the conditions are not met, the script deactivates both the resulting colour object and its description. In summary, it works on a conditional state= true(specific image targets detected)=AR display, false (specific image targets not detected/wrong/missing combinations)=no display.

Fig 1.3 Multi-Target Script 1

Fig 1.4 Multi-Target Script 2

Fig 1.5 Multi-Target Script 3

Fig 1.6 Multi-Target Script 4

The process of overlaying text on the imported assets was also applied here, ensuring that each specific instance displayed the correct, unique content and the same text settings. I carefully adjusted the text using the pre-written material from Figma, which was designed during the visual prototyping stage, to accurately reflect the appropriate information for each AR scan. 

Fig 1.7 Linking Asset to Multi-Targets

Fig 1.8 Adding Multi-Target Text Descriptions

Fig 1.9 Text Settings of Colour Descriptions

Once the all the multi-target and single-target instances were complete, I then moved on to the creation of the tint/tone/shade feature of my app. First, I created 2 more spheres- one darker, and one lighter of the original colour to sit on each side of each image target sphere to represent "tint" and "shade"- this will be the default mode of the tint and shade spheres when they first appear in AR upon scanning a single image target.

Fig 2.0 Creation of Tint & Shade Spheres

Then, I inserted the text background asset for the tint/tone/shade description and overlaid the description of each over the UI.

Fig 2.1 Linking Asset to Tint/Tone/Shade

Fig 2.2 Adding Tint/Tone/Shade Description + Text Settings

This is followed by the creation of 3 sliders representing tint/tone/shade for each colour image target.

Fig 2.3 Creation of Sliders

The slider operation is in MenuManagement, and on the right section there are many scripts I have inserted into each single target instance such as Adjuster Red/Blue/Orange and others. In this script, I set it up so that when the Tint slider is moved, the sphere's tint  an be changed to become lighter by adding white, and similarly for tone (adding grey) and shade (adding black).

Fig 2.4 MenuManagement Linking of Scripts to Spheres

Fig 2.5 Tint/Tone/Shade Slider Script

Fig 2.6 Tint/Tone/Shade Slider Script 2

I then duplicated this script and adjusted the names and colours to create all the other colour instances.

Lastly is the creation of the quiz. I first created the canvas of the quiz and started arranging my quiz assets into the canvas to complete the UI design which will be modified later through the script.

Fig 2.7 Designing Quiz UI

I have created 3 buttons which present 3 answer options to the player, each of them are clickable instances, but only one of them are correct and add a point to the score.

Fig 2.8 Adding Button Functionality to Answer Options

Additionally I have added a slider- which works as the visual "timer" in the quiz UI- showing players the time they have to answer a question. if the slider empties (aka the time runs out) it will automatically play the next question and mark the question as incorrect, or, when any button (answer option) is clicked, the next question will play too.

Fig 2.9 Creation of Visual "Timer"

I went on to create the result end screen as well, arranging the assets of the stars from before on the screen, along with the score text, time taken, and creating two buttons to either replay the quiz, or return to the home menu which will all be modified in the script.

Fig 3.0 Creation of End Result Screen

Then, under quiz management, I have linked the question text, answer options, result text, star assets, and visual timer (progress bar) to all be modified in the script.

Fig 3.1 QuizManagement Script Linking

For the script itself, I deposited the 5 questions I created here, keeping them relatively simple as it is an app mainly targeted towards children. The first part contains the collection of questions in string format, while the second part contains the answers to the previous questions, and the third part includes the correct answer choices, represented by several numbers consisting of 5 digits. I have interpreted them as:

• 0: answer A
• 1: answer B
• 2: answer C

The quiz script tracks the player's score by updating it after each answered question which is displayed through the "textScore" and I have created the logic for the star rating where:

• 1-2 correct answers: Earns 1 star.
• 3 correct answers: Earns 2 stars.
• 4-5 correct answers: Earns 3 stars.

This works through "ShowStarRating" which displays the rating at the end screen to represent the player's performance using stars.

Besides this, I have also set a timer of 20secs for each question, and made a separate script that tracks the time it takes for a player to answer each question which adds up to the end result to display the total time taken to finish the quiz through "timeRemaining " where it continously updates the UI end screen by decrementing it by "Time.deltaTime" to track the time spent on the current question. Once a player has finished the quiz, these numbers add up and are displayed at the end as minutes and seconds with "timerText".

As mentioned before as well, I have made a slider bar as a "visual timer" to the player. With the slider bar, if time runs out, I have made it so in this script it automatically calls "AnswerSelected(-1)" to handle a missed question (marking it as incorrect).

Fig 3.2 Quiz Script

Fig 3.3 Quiz Script

Fig 3.4 Quiz Timer Script

Final Project Showcase

Fig 3.5 Final Project Showcase

---

REFLECTION

The final project for Experiential Design was extremely arduous and taxing. I spent many many nights staying up figuring out why my code didn't work, researching, and learning about code in general- lots of debugging throughout the process. I ended up watching lots of tutorials and googling in order to build the scripts and find solutions to the various issues and errors I encountered in my code. At times, it was frustrating- even encountering some crashes where I had to restart all over again, but I think it ultimately contributed to my growth as a developer. Besides that, another takeaway of this project was the necessity of good project management and organization. As the project became more complex, managing the different scripts, assets, and UI elements became increasingly important so everything wasn't in a mess and I could locate and more importantly link them properly to each functionality instance I needed it for, so I realized more than ever the value of planning and structuring my work in a way that allowed for efficient development. The project taught me a lot, but especially in areas of coding, which I'd like to carry forward into the future as part of my skillset and for other projects. Overall, I was happy to produce the results I strived for in the end with the project, as it came together nicely how I had envisioned it, and I'm quite proud of the end result and what I managed to achieve.