Experiential Design / Task 1 / Trending Experience

01.10.2023 - 09.11.2023 (Week 05 - Week 11)

Jacquline Lim Xin Ying / 0351304
Bachelor of Design (Honours) in Creative Media / Games Studies
Experiential Design / Task 1 / Trending Experience

---

INSTRUCTIONS

---

Task 1 / Trending Experience

Fig 1.1 - Create New Project

In class, we were tasked to create a new project of 3D in Unity Hub that I named Week 4.

Fig1.2 & Fig 1.3 - Build Settings & Switching to IOS

As I'm using Iphone, I need to switch the settings of device platform from Window, Mac, Linux to IOS. There, you may change to any platform that you preferred.

[ Vuforia Engine Set-Up ]

Fig 2.1 & Fig 2.2 - Vuforia Package & Importing to Unity Hub

First, setup the Vuforia engine by importing the Vuforia's package that I download before into Unity. 

Fig 2.3, Fig 2.4 & Fig 2.5 - License Manager, Target Manager & Inspector of Adding License Key and Database

A license key and database need to be added in Vuforia website in order to get vuforia engine sdk working. The database we create is to store the image target we need which is the penguin that I found online in this case. It's preferably that upload a image target that rated 5 stars. We then need to import them to the Unity under inspector.

[ Adding Image Target ]

Fig 3.1, Fig 3.2 & Fig 3.3 - Progress of Adding Image Target

As indicated by the figures above, I started from adding an object of Image Target by right clicking on the 'Hierarchy' panel (Fig 3.1). Then, click on the image target and select 'From Database' under the "Type' (Fig 3.2). It will then display it on the 'Scene' panel (Fig 3.3).

Fig 3.4 & Fig 3.5 - Adding Cube & Display

In order to successfully display the cube when image target found, the cube has to be added under 'Image Target'. You will get to see the cube display as shown in Fig 3.5 if you have added it correctly.

[ Adding Animation ]

Fig 4.1, Fig 4.2 & Fig 4.3 - Cube Animation

After adjusting the placement of the cube that preferred, I then started to with animation making. As you can see in Fig 4.1, the cube was initially on the image target. To make the cube with animation of jumping, I moved the cube upwards then back to its original position after pressing the recording button to start animating.

Fig 4.4 - Animator Window

Under 'Animator', there are 2 states of animation, which are cube idle and cube animation that need to be adjusted. By right clicking on the animator window, I'll be able to create a new empty state which represented cube idle and set it as layer default state. So when the cube appear on the image target, it will appear as the idle state that I have set.

*Right Click > Create State > Empty 

*Select 'New State' > Right Click > Set as Layer Default State

Fig 4.5 - Button Added

Fig 4.6 & Fig 4.7 - Assignment of Function for Button

As illustrated in Fig 4.5, I have added two buttons, play and stop button, under the panel and position them as I desire. To let the cube start the animation when pressing the Start button and stop it when pressing the Stop Button. Click on the Start button under 'Hierarchy' and find a On Click() section in inspector. Add a onClick function by dragging the game object which contain the animation into the first box, and choose the function which is the Animator -> Play(String). In 'Play' button, we need to play the "cube_anim" animation and "Cube_idle" for the Stop button. Now, the cube should move up and down or stop it using the button when you run it.

Add Button: Canvas > Panel > *Right Click > UI > Button





[ Create Menu Scene ]

Fig 5.1 & Fig 5.2 - UI Elements

After adding the UI Elements file to 'Asset' folder, select all the elements that you just imported and convert their 'Texture Type' from 'Image' to ' Sprite (2D and UI)'.

Fig 5.3 & Fig 5.4 - Assign UI Elements to Button

Add three button using the same method mentioned above, with the purpose of having the button of 'PLAY', 'OPTIONS' and 'EXIT'. I did the positioning and sizing as I wanted. I then drag the specific UI elements to 'Image Component' of the specific button.

Fig 5.5 - Buttons with UI Elements

Repeat the same actions until they look like Fig 5.5.




[ Hover ]

Fig 6.1, Fig 6.2 & Fig 6.3 - Hover Button

To modify the transition type of the button in the inspector, switch it to "Sprite Swap." Next, drag the hover sprite into the designated "Highlighted Sprite" field. Repeat this process for the remaining two buttons, ensuring that the same "Sprite Swap" transition type is applied and that the appropriate hover sprites are assigned to the "Highlighted Sprite" for each button.

[ Ground Plane ]

Fig 7.1 & Fig 7.2 - 

Begin by navigating to the 'hierarchy' window in Unity and right-clicking to access the Vuforia Engine menu, where you'll find the Ground Plane option; proceed to add both the "Plane Finder" and "Ground Plane Stage" components. The Plane Finder, a remarkable feature in augmented reality applications, employs advanced computer vision to discern and create lifelike virtual depictions of flat surfaces in the physical realm, ensuring precise alignment for anchoring virtual objects seamlessly into the user's environment. Complementarily, the Ground Plane Stage serves the purpose of detecting the ground, providing a foundation for accurately placing digital objects in relation to the real-world surface.

Fig 7.3 & Fig 7.4 - 

To initiate the augmented reality experience, begin by adding a cube under the Ground Plane Stage and positioning it appropriately on the ground plane. Afterward, execute the AR application by running it. This action prompts the application to scan the ground, causing a square box to appear. To finalize the placement of the cube on the floor, simply tap on the screen. This sequence of steps ensures the accurate integration of virtual elements with the physical environment, enhancing the overall user interaction within the augmented reality setting.

Fig 7.5 - 

Here, you may untick the 'Duplicate Stage' to prevent duplication of the cube.

Fig 7.1 & Fig 7.2 - Zoom and Pinch Script & Its Assignment

By assigning the script of zoom and pinch that generate by chatGPT, we can zoom the object when we placed on to the floor. We can adjust the min scale and max scale of the object when we zoom. 





[ Export ]

You may watch the video for the last and last section, where I walk you through the processes of exporting step-by-step.

---

REFLECTIONS

The experiential design project for an augmented reality (AR) app proved to be a multifaceted learning journey, encompassing technical intricacies and user experience considerations. The initial setup in Unity Hub involved configuring iOS build settings, showcasing the platform's adaptability. The integration of the Vuforia Engine was pivotal, requiring the importation of Vuforia's package, license key setup, and database creation for image targets. The selection of a high-quality image target, such as a 5-star-rated penguin, ensured accurate tracking and a seamless AR experience.

The task's core involved systematic steps, from adding image targets and implementing animations to integrating user-controlled buttons for play and stop functionalities. Designing a menu scene elevated the project's sophistication, incorporating UI elements and interactive buttons. Hover effects for buttons added a subtle yet engaging touch to the user interface, demonstrating attention to detail. The introduction of ground plane features in AR was transformative, enabling the detection of flat surfaces and seamless integration of virtual objects into the real world. The exportation of the project marked its completion, emphasizing the importance of accessibility and distribution for widespread AR experiences.

Last but not least, the project provided a comprehensive understanding of AR development using Unity and Vuforia Engine as well. It emphasized the iterative nature of design, showcasing the evolution from technical setup to refined user interfaces and interactive elements. These insights will undoubtedly shape future endeavors in experiential design and augmented reality, highlighting the symbiotic relationship between technical prowess and user-centric design principles.