Experiential Design - AR Zoo Application (Prototype & Final)

07/04/2023 - 0/0/2023
Week 1-Week 14
Tan Pei Yun / 0345386
Experiential Design/Bachelor of Design in Creative Media
AR Zoo Application (Prototype & Final)

---

Progress 

Data Collection - Zoo Negara Malaysia

Data Collection - Zoo Info

why only ada QR Code Map :,)

I couldn't imagine that I able to visit again Zoo Negara after so many YEARS, but this time is with purpose that need to collect as many data as possible for the AR Zoo App. Just by after stepping inside the zoo I already met my first problem where I could not able to get a physical zoo negara map instead only able to scan the QR code for a digital one. Therefore plan B is to print out the map by myself. Plan C is to redesign the zoo map and print it out.

6 focused animals 

Zoo Negera Map & my own redesign version map

Update : Things might be hard to work with image target in unity where the original zoo negara map can be hard to detect due to that toooo many small elements of animals and others icons that might be effect the outcome of the AR Zoo, therefore I decided to design my own map with only using specific chosen animals and it works inside Unity.

"MORE Problems I faced :"

Sample 360 photos taken by me 

At first my imagination is maybe I can take the animal photo in perfectly but NO,  animals in there are often "sleepy" and hiding inside their habitat probably is problem weather is way to hot, therefore I can't take any nice details animals photo with 360 cam. Sample of 360 photos that I take, please don't laugh at me , I feel like I am taking scenery more than animals :,) maybe I can change the topic to AR Scenery App (Just kidding). 

Additionally, we as a visitor often have a "distance" in between animal and us, animal are inside the cage or fence, and 360 cam does not have a zoom features :( so luckily suddenly pop-up in my mine where I could use my iphone pano features, where able to zoom in too , below are the difference : 

Comparison or "Can you find the giraffe?"

Mr. Razif also had some great suggestions for adding extra features to the app's 360 view, which allowed me to delve into something new and expand my knowledge. Despite having a bit of bad luck on my zoo visit that day,  but overall, learning and using the 360 camera was a completely new and maybe a little exciting experience for me. Hoping I able to use them well when moving onto the prototype stage in Unity.

Aiguuu Panda is tooo cute

Things getting worse and make me less interested in doing this project, suddenly after I looked at panda, it felt different again, I could stand there at stare at them for whole day I think, is really healed my hearts and I happy with the 360 cam results that I taken about the panda

Super Extra** Short Vlog to Zoo 

Decided to cut them into short short vlog where able to help my to document it as a progress / data collection and also keep it as a memory.

Miro-board 

MiroBoard - Animal Info 

Final Chosen Animals
1.Panda
2.Camel
3.Flamingo
4.Giraffe
5.Tapir
6. Tiger

After I finalise from the 360 photos and checked which animals are more "potential" that can be included into the app, therefore I use Miroboard for pasting done all animals info that are more into their physical characteristic, habitat, diet and also include some fun facts that can be added inside the application. 

Inspiration

Inspiration AR app ideas

Trying Out Animal Safari App

Moreover, I been looking and download few different applications where I able to get some ideas about the AR app, some features gave me ideas where it could be added inside my own app too. I find it interesting where kids able to get interact with the AR Animals (that able to move around) and able to have the "sound" effect button to enhance the experience with the app. 

Vuforia - Image target

Vuforia - Image Target 

After done re-designing the zoo map, and I began to put the individual animals to set it as image target. Some animal get it a low rating by however , glad that is won't affect the result when scan and detect it

Vuforia - Zoo Map

Glad that the Zoo Map got it a good rating, therefore I able go to the Printing shop and reprint it the new design of Zoo Map. Funny things is that I wanted to print 2 A3 size and 2 A4 size, they listening it wrongly and print it to additional 2 A4 pcs for me and I was like"eh ! why so banyak?!"they probably thought it was a big project with Zoo Negara :,)

Final Outcome for Zoo Map

Although I couldn't get it the original Zoo Map from Zoo Negara , but still find it it was interesting to do Zoo Map by my own and from 0% to 100% print it out to able to see the outcome, and it turns out great , thankfully.

Sample of result when scan and detect the Map

Happiest thing is that, when able to detect and animal able to pop-up from the phone screen, everything is worth it now ;)

Figma 

Figma Design Progress

As you can see there are 2 different style , the upper side is the rough mock-up ideas to propose during the proposal slides, while below is the refine version that will be used in the Unity. I had to think again about my AR Zoo concept, making sure it's appealing to all kinds of users, especially kids. Choosing the right icons, animals, illustrations, and colors took some time as I wanted it to match everyone's taste. During the design stage, I sometimes got lost in deciding the app style, but I'm determined to achieve a look that suits all types of users.

Figma Design Progress

Theme Colour from AR Zoo Project Proposal

Animal See Details Card : Everything choices of colour in terms of the background , buttons and style was actually using the theme colour mentioned from the project proposal and it was inspired of the Zoo Negara Logos. I think that it turns out well and matches the theme of Zoo. Not too strong but calm colours 

Animal Background Illustration and Images: I focusing on 6 types of animals that are mainly wild animal and able to find it in Zoo Negara, the background is the same that illustrate from illustration and paste it into Figma , where Siew Weng teaches me that skills ( Ai Illustration able to paste it to Figma) 

Animal Icons :I choose animal icon that are not too strong looking but instead a soft cartoonish icon that able to suit the target audience in between kids and teenagers  

 

Application overall flow : 

On-boarding > AR Scanner Map - Scan the physical map > 3D location pointer and animals icons will be detect which animals > discover animals and click button to see for info > Animal info page > 3 main features (AR Scan , Sound Effect > 360 view)

The on-boarding process leads to the AR Scanner Map, where you can scan the physical map. The app will detect 3D location pointers and animal icons to identify the animals. Click on them to discover more information. You'll then reach the Animal info page, where three main features await: AR Scan, Sound Effects, and 360 views.

Prototype

AR Scan (AR Animals) 
-image target > icon 

Plug In Sketchfab

Unity always suprise me ALOT , there's so many unknown and possibilities like where able to plug in sketchfab ? wowzers , the purpose of adding this sketchfab plug is where it allows to import a Gltf file, where I needed to add a animation animals into unity.

Credit to nylonelycompany

It was hard to search and download 3D animated animals for free honestly , it took for awhile to search animated 3D animal that I wanted. Well luckily I found one !  

Animated 3D animal credit to : https://nyilonelycompany.neocities.org/

Mini 3D location on the map

Added Location and 3D Animals

Location / Pointer in 3D and Animal Icon was added to scene and set it as image target. It was suggested that it could be enhance to do animation for the pointer and animal icon to make me "attractive" ? Unity was quite interesting where it allows to do a simple animation, I do up and down , while animal icon is to rotate around.

Ground Plane

Tutorials for ground plane detection

Ground plan testing and result

Animator and Animation in Unity

At first I was using the image target where it allows to detect the animals and to the 3D animals, however the plan is to do AR scan that allows to "pop" up when clicking the AR Scan button , therefore the plan has changed to ground plan , after familiar with doing image target , I find is easier to understand the concept of ground plan and is easier to do just like the concept of image target

360 view

360 View & Materials 

360 View Script

360 view requires to add a script where able to scroll and view the images, starting by need to add the 360 photos and changed it cube shape. Moving on need to make it as materials and add a 3D sphere into the scene.

Link :https://github.com/safeee/VRtour/blob/master/VRCamera.cs

Cube & Materials 

I learn and followed from this tutorial and it works perfectly, however some minor flaws is that it won't turn out really HD and clear for the 360 photos, but at least is working.

Sound Effect

I try my best find some suitable and free resource music where allows me to download in MP3 , this steps was quite okay to do and need to apply a script inside the sound effect button. Everything was quite "smoothly" so far no problem (yayy) 

Scripting 

Super Useful Switching Scene Tutorial

This is the only tutorials that I find it able to understand , simple and straightforward, where using button and switching the scenes. I want to keep it inside my blog just incase I need it again. :,)

Scripting and I'm DONE ! 

Last but not least is where joining every scene and button, where I can started to feel Unity file is getting larger and slower, started to get worried will it able to work or not, but is already 4am time to sleep , anyways I had finished all the scene , YAY !

Prototype

Prototype and Video Walkthrough 

This is where I submitted for the prototype and video walkthrough about the AR Zoo current progress, and go through about the asset building , what I have done and not done.

Build & Run - IOS

Error Banyak Banyak

Multiples time of "Build" File

Life is tough when you so excited to build and test for app but show ERROR in X-code and have to fix it before sleep during 4 a.m. Luckily there's my friend who willing to help and fix the error with me. Lastly, it was the problem about bitcode... but still is a yayy at least we fixed it. 

We check out at the youtube for searching the relevant tutorials and look at Github for finding solution on how we can solve it. I'm going to put the tutorials video in here (just in case i need it)

After everything was done and solve, yay able to open the app and guess what ? no access camera ?? ALAMAK how ?! and I was very lost and feel like is never going to stop and thank god , I ask Siew Weng in the early "morning" for helping me out and it was the problem where I did not put the "AR Camera" in the player setting and also did not put licence key omg, careless mistake :< 

AR Camera in Player Settings

Anyways is solve now and is time to record the video walk through and presentation !!

Final AR Zoo Application

Final Unity AR Zoo - made by Pei Yun :,) 

Final Unity AR Zoo - Video Presentation

Final Unity AR Zoo - Zoo Element (Zoo Map)

Final Unity AR Zoo - Zoo Element (Zoo Animal Shadow)

---

Reflection

Before even started this project, it makes really stress and worried where I tend to want to "escape" myself and feel like not wanted to do this unity task, question in my mind, will I able to make it with my own old 2018 128GB macbook pro ? well the answer is NO :,) Therefore in using this "Please god, I need to do well in unity , I need to DONE my AR ZOO !" so ya I bought a new macbook 1tb hehe , anyways at least I am no worried and less panic in doing Unity project ,  I do not blame anyone but myself , Honestly, I don't know I feel that taking this module in this semester make me feel "unsure" or "unsecure" , it feels like I did not really pay attention and focus onto this module, therefore that's why snowball is chasing me like hell. I do regret a little that taking this module in this semester , which was really hard and feel like quitting anytime soon. Life as a design student is to keep solving problem , whatever we met in this project all we gotta do is to solve it and solve. I guess thats also where we able to train ourself more  Life is just so tough in this sem :,) But I glad that manage to do it all by myself and with the help of my friends and course mates, time to rest !