Audrey Gracia Djohari / 0348120
Experiential Design
Bachelor of Design (Hons) in Creative Media / Taylor’s University
Final Project: Creative Experience Design Project Prototype
I already had my UI Design in Figma since week 5. So the vision oh how the AR app looked was quite clear already. The next thing to do is how I made it real in Unity. To be honest when I'm writing this, I still had no idea.
Laptop: Macbook
The app launched in my phone smoothly. The only problem I encountered was trusting the device when I plug my laptop in my iPhone. But all I had to do was go to Settings < General < VPN < Trust.
Final Outcome
Experiential Design
Bachelor of Design (Hons) in Creative Media / Taylor’s University
Final Project: Creative Experience Design Project Prototype
INSTRUCTION
Instruction
Once their proposal is approved, the students will then work on the
prototype of their project. The prototype will enable the students to
discover certain limitations that they might have not learnt about before
and they’ll have to creatively think on how to overcome the limitation to
materialize their proposed ideas. The objective of this task is for the
students to test out the key functionality of their project. The output may
not necessarily be a finished visually designed project. The students
will be gauge on their prototype functionality and their ability to
creatively think on alternatives to achieve the desired outcome
FINAL PROJECT: CREATIVE EXPERIENCE DESIGN PROJECT PROTOTYPE
WEEK 8:
UI Design
Fig 1.0: UI Design in Figma
WEEK 9:
Setting Up The File
Phone: iPhone 11
I know that Mr. Razif already taught us how to do it and I initially wanted to use the same file that I use in tutorial class because we already set it up. However, whenever I tried playing my AR, the camera was zoomed in so it was impossible to use that file and nobody can fix the camera including my friends and Mr. Razif. So, I decided to create a new file based on the Youtube vidoes I attached here. Surprisingly it went okay and I could proceed to the next step.
Mr. Razif also have taught us how to import the package but I kinda forget so I watched this youtube video on how to do it.
Each tattoo color has a different Page. There are 6 tattoos, with 3 colors each. So in total I made 18 Pages. Every single tattoo page will present different 3D design. In every pages, user can use the slider to adjust the size and curve of the 3D tattoo on their skin. I used ScaleSlider.cs and CurveSlider.cs to make the sliders.
These are all the script that i used to create my AR App:
Fig 2.0-2.1 Building For IOS Tutorial
WEEK 10:
Vuforia Image Target
I took quite a long time searching and creating the right image that would be uploaded to Vuforia. It was hard to have an image that will get 5 star in Vuforia as an image target. I actually planning to use simple lines for image target so it won't look too obvious when it sticks to the skin. However, every time I tried using simple shapes, it would only get 2 stars. So I decided to use a complicated logo as the image target.
Fig 3.0: Importing Vuforia Package
Fig 3.1: Final Image Target
3D Design in Blender
For this AR App, I realized I could not download existing 3D Assets because I have my own tattoo design. So I had no choice to download and learn Blender (a 3D design software) because Google said I needed .fbx file format for my tattoos to be uploaded in Unity as 3D object.
Can I say that I'm quite proud because I managed to learn Blender in 3 hours after downloading it? Also, Huge thanks to my friend Metta from Entertainment design that helped me figure out some problem in Blender! Really appreciate itt!
Fig 4.0: Tattoo 3D Design in Blender
These were the tutorials I watched:
Fig 4.1: Add Image As Planes Fig 4.2: How to Bend a Simple Plane
Uploading 3D Design from Blender to Unity
So, this was the chaotic part that had me frustrated because it wasn't as easy as it sounds. So appearantly, I could upload the 3D plane in fbx format but Unity cannot read the image/texture on it. So I had to create a material file inside Unity and link it manually to the PNG image of the tattoo. Then, I have to turn on some toggles and then link the material file to the plane file.
After the 3D design is complete and can be read by unity, only then I put it as a child of the Image Target. Also, I have to change some of the x,y,z settings so that the 3D object is in the right position.
Fig 5.0-5.4: Uploading 3D design to Unity
Making The Pages - Splash Screen Page
In Project settings, I put the Splash Screen Page on top because this is the first page that shows up when user opens the app. To make sure after the video finishes it directs user to Home Screen automatically, I use this script LoadPageAfterTime.cs. So after 6 seconds, the user will go to the Home Screen.
Making The Pages - Home Page
In the Home Page, there are 6 tattoo selection that user can choose. Each tattoo button will lead to different pages that has will summon the tattoo when the camera scans the image target.
To make the buttons, I used UI Canvas and uploaded my Figma design. Then, I linked the Canvas to a script which is the PageManager.cs. So I can link the tattoo buttons to different AR pages.
Making The Pages - Tattoo Page
There's also color selection button to direct them to different tattoo pages that present different color. They can hop on to different color fast and easily because every page has it. I also used PageManager.cs script to make this.
To go back to the Home Page, there's a back button at the upper left corner of each page.
For the Customization Page, the idea is to provide user with 4 small tattoo design and allow them to arrange it themself. They should be able to adjust the size and change the position of each small tattoo. To make the screen be able to detect touch and finger drag I used these scripts: LeanTouch.cs and LeanFinger.cs.
Making The Pages - Customize Page
I also allow the customer to turn on and off each tattoo element by pushing the buttons. I use ToggleObject.cs.
Scripts
These are all the script that i used to create my AR App:
Fig 7.0: Scripts
Helpful Tutorial Videos
These are all the Youtube videos that made it possible for me to cerate my AR Prototype. Shoutout to these people for being so generous about their knowledge.
Fig 8.0: Scale 3D Object Using Slider Fig 8.1: Scale & Drag Single 3D Objects
Fig 8.2: Scale & Drag Multiple Objects Fig 8.3: How to Play Video in UI
Fig 8.4: Unity WaitForSeconds Script Fig 8.5: Changing Scenes Using Button In Unity
Week 11 Prototype Submission
WEEK 11:
Fig 9.0: Week 11 Asset Building
Fig 9.1: Week 11 Prototype Progress Presentation
Fig 9.2: Week 11 Prototype Walkthrough
Project Build & IOS App
Fig 10.0: Building in IPhone
Fig 10.1: App in my iPhone 11
Final Outcome
What the app can do:
1) Home Page: selection of tattoo AR (can adjust the size & curve, also colors)
2) Customize: Customize your own tattoo by adjusting the scale & place of 4 tattoo elements
WEEK 14:
Fig 11.0: Final Presentation Video
Fig 11.1: Short Walkthrough Video
FEEDBACK
WEEK 11:
Specific Feedback
(Image target) Mr. Razif said he wanted to see how it looks on the skin, using sticker.
WEEK 13:
Specific Feedback
(Final Prototype) I sent Mr. Razif the files of my final prototype and here's what he said, "All good, you can put aside this for the time being and can focus on the game after this. I'll suggest some improvements but it's up to you wether you want to do it or not. The best would be to allow user drag 1 element (Customization Page)."
REFLECTION
ExperienceThis final project has been a roller coaster ride because for the first time I didn't know how to create a design project. Because I've been searching everywhere for a step-by-step tutorial how to make Tattoo AR but I couldn't find any. Not in Youtube and not in GitHub, nobody in the world took time to make the complete tutorial. So I had to figure out everything myself. Everything was alien for me when I first started but with the help of youtube videos, Mr. Razif, and chatGPT I surprisingly found a way to make this Tattoo AR app works. The process of figuring things out on my own was challenging, but it also brought about a sense of satisfaction and surprise when I managed to find a way forward. While I didn't fully understand the intricacies of how everything came together, I attribute some of my success to a stroke of luck in finding the right tutorial videos and being able to combine various pieces of information.
Observation
I spent a lot of time researching and experimenting to understand how Unity and Vuforia worked. Although I faced setbacks along the way, like having mental breakdown over 3D design, applying the wrong scripts and not knowing how things work in general, but I tried to be persistent and make the most out of the resources that I have. Another tough part was adding interactive features to the app. I wanted users to be able to customize their virtual tattoos by changing colors, sizes, and curves. This required a lot of scripting and programming knowledge, as well as understanding Unity's user interface. With perseverance and lots of coding, I created an easy-to-use interface that allowed for smooth customization.
Findings
In the end, all the hard work paid off. I successfully created a Tattoo AR App that went beyond my expectations. Users could easily place virtual tattoos on their skin, customize them, and have an interactive experience. Seeing the app come to life and getting positive feedback from testers made me feel proud of the effort I put into this project. This experience taught me the importance of not giving up and being adaptable when facing tough challenges. It showed me that with dedication, resourcefulness, and a willingness to explore new things, even the most difficult tasks can be overcome. Overall, I'm really happy with what I achieved with the Tattoo AR App, and it has been a valuable learning experience for me as a developer. And now I'm starting to think of making a Youtube video tutorial on how to make a TattooAR App. Because nobody has done it yettt!!
Comments
Post a Comment