Experiential Design // Task 2

 08.10.2023 - 09.11.2023// Week 6 - week 10

Lim Yi Xvan 0354552

Bachelor of Design in Creative Media 

---

Instructions

---

Tasks 2: Creative Experience Design Project Prototype

We will begin work on the project prototype as soon as our proposal is accepted. The prototype will help us identify certain constraints that we may not have known about previously, and to make our suggested ideas work, we will need to come up with innovative solutions. This task aims to test out the essential features of our project for us. The outcome might not always be a visually appealing work. Our prototype's functioning and our capacity for original thought about workarounds to reach the intended result will be used to evaluate us.

Progression

I first started off by drafting which pages should I do for this task's prototype as we were asked to only create the essential features of our project. We have previously designed some mockups for our App which I've done on my Figma. Hence, I've planned to create a few pages only which are the onboarding page, styling page, and the AR Camera.

The reasons for creating these pages are as below:

1. Onboarding to Styling Page: The ability to create my desired layout & to test if the buttons work to load to the next scene

2. AR Camera: To see if the 3D Barbie model work in the AR Cam

fig 1.1 - project's prototype plan

I've drafted in my notes which pages should I create and which pages I'll skip first as I will only be focusing on the features that I am unsure of and wanted to see if my AR features work or not.

#1 Onboarding Page:

First of all, I started off by downloading my assets and UI elements from Figma which I designed earlier, and then saved all of them into a folder that will be carried into Unity later on. The assets were saved in a folder named "UI elements" as told by Mr. Razif earlier in our tutorial classes.

fig 1.2 - UI elements saved in a folder

Then, I created a layout for my onboarding page and I wanted the Barbie icon at the center of the page to be clickable as a button that will be directed to the next scene. Although we were taught earlier for this tutorial I somehow forgot some bits of it haha. However, luckily I have chatgpt beb for rescue. 

Firstly, the UI elements that I wanted to be as a button should be created as a button on the panel and only I choose to fill it with the image I wanted to. And then, some scripts were amended to trigger the button to do its event.

fig 1.3 - button's info in the inspector panel

fig 1.4 - onboarding page's icon scripts

Things to be taken note of while creating the script is that the name in the script should be the exact same as it's in the scene, or else it wouldn't be loaded to the scene we wanted.

#2 Choosing Barbie & Style Page:

For these pages, I was thinking of only including one Barbie first and testing if it works while importing the 2D figure in it. While it was just like placing images in it. So it is no big deal. But just I'll need to make sure I have located the scripts for each button correctly so they will be directed to the scene they should be.

#3 Scanning Barbie:

Mr. Razif asked me to use Polycam for scanning the Barbie model. However, it was harder than I thought because it took me so long time to scan it and check if the details were correct. While guess what. I am not sure if was it my phone problem that I couldn't scan it clearly or was the method I used to scan it (i am just following the tutorial given in the apps) but ya. Let me show you ugly nightmare Barbie scanned lol ;,)

So I decided to find a free downloadable 3D model from Sketchfab to apply in Unity first and try to see how it works, instead of wasting days turning around with Barbies to scan them lol. Time is precious like gold and sis is running out of time😀

fig 1.5 - free copyright 3D Barbie from Sketchfab

While could see that, it was terrible too but it was better than mine lah~ so ya... 

#4 Importing & applying 3D model into Unity's scenes:

Importing them is just like dragging the folder into Unity but locating them in my scenes, took me quite a while. The 3D model at first didn't appear in my scene while playing it in the game panel. So I went to check what was wrong. Turns out that it was the position of my camera. So I repositioned it to make it align with the 3D model. 

fig 1.6 - repositioning camera direction

#5 Scripting to move Barbie:

Oh my lord, this is the worst part of the whole prototype thingy. Okay, so my first intention was to rotate the Barbie 360 degrees like how the samples given by Mr. Razif were done by the Design School.

And I tried to search online on Youtube even asked ChatGpt for help, but I couldn't make the desired effects that I wanted. But it's just my Barbie moving. 

Have used three different scripts to make the Barbie initially rotate 360 degrees but it just disappoints me lol. Life hasn't been good to me recently. I am doing this while having quarantine at my house (yes I am Ms. Covided) 

However, I got my basic overview of how will my AR apps look like being structured via Unity. Here's the video presentation walkthrough of my prototype.

Submission link for video presentation & walkthrough of prototype:

https://drive.google.com/file/d/1JVH2k64Uc7FRMtNWCI9b4kV4lNDIZTpg/view?usp=sharing

Things have been done and yet to be done: