Experiential Design - Task 01: Trending Experiences

Week 02 - Week 07

Ahmad Firas Bin Ahmad Fisal | 0345121

Experiential Design | Bachelor of Design (Hons) in Creative Media

Task 01: Trending Experiences [Exercises]

---

EXERCISES

Exercise 01: Week 03 - Journey Mapping

- We were instructed to make our own user journey in class as a group activity determined by the table you're sitting at. We had to decide what sort of an event we could replicate that would give us a robust user journey map at the end of the activity.

Chosen Journey: Sunway Lagoon Experience.

The image attached below will be the User Journey Mapping and a link to the MIRO board will be attached together:

User Journey Map Exercise - Sunway Lagoon

Exercise 02: Setting up Unity and Vuforia Engine

This exercise is when we were given the time to finish installing our Unity software on our laptops and a couple of students faced their laptops crashing it was scary to witness that because you never know how your own laptop would do the same or not. A couple of students I know purchased a new MacBook Pro 14-inch just to compensate themselves for this module. I chose the route where I purchased a new Android phone to pair it with my Windows laptop for future purposes.

Unity Build Settings is an important if not the most important step to complete before starting any new project. It is much easier to have your build settings changed before having any content in your project as it might take longer time and even might face problems in the future if we decided to change it midway through the work or after everything's completed. 

Build Settings and Player Settings

Always have your 'Platforms' set accordingly and Choose our phone size to view the template accordingly. But it was also noted by the lecturer if we have no size to choose in particular, it is always safe to choose the 16:9 Portrait for the display resolution settings.

Display Settings

Moving on to the Vuforia engine, we were required to register an account and choose the appropriate version to add the Vuforia engine to our unity project. This is an important step because the Vuforia engine allows us to do most of our tasks in this module as explained by our lecturer.

Adding in AR Camera after linking with Vuforia Engine

Steps to attach the AR camera to the game object

• Game - Game Object - Vuforia Engine - AR Camera

Steps to add the license key from the engine

• AR Camera - Open Vuforia Configuration - Add License Key - Paste Vuforia License Key - Play - (Our camera will be turned on)

Exercise 03: Adding Assets and Cube Animation

In Vuforia:

We were required to go to the Target Manager to add our database and follow the necessary steps. Upon reaching the ability to choose our type of image target, click Image choose our image and upload it in the target manager remember to follow the size and quality of the images so that we can get a rating of 4-5 stars which is the recommended rating so that it won't cause any issues in the Unity software in the future.

After, we download the database choose Unity and import it into the software. How to know if your assets (images) are now successfully in the software, the "Assets" and you could see your uploaded image to the target manager in the Vuforia Engine.

In Unity:

Now that we have our image imported into the software, we shall begin the steps to animate the cube. By following what is being taught in class, the major steps are as follows;

- Importing our image via target manager through the Vuforia Engine

- Add a cube to the canvas of the image where the image target is the main goal here

- Make the cube jump as the camera of your laptop now scans the image that you have uploaded in the engine and displays it through your phone. 

Before diving into the steps to show how the imported images will appear, I will show snippets of how the integration between Vuforia's License Manager works:

Vuforia Engine - License Manager

Unity - Adding the License Key

After this, we could begin the steps of importing our image to the Vuforia Engine under the Target Manager tab so that we could it could be imported and viewed successfully in Unity;

Vuforia Engine - Target Manager View

After reaching the necessary Image ratings and following the requirements of the photos, we will then click Download Database and choose Unity Editor. A file will appear in the downloads file and all I have to do is to import the package into Unity by dragging and dropping it in the workspace of Unity.

After we have added Image Target by right-clicking the Hierarchy at the top left side of the workspace, at the right side of the workspace where the Inspection panel is located, we activate the image by clicking Type - From Database and your imported package will be listed if it's done correctly.

Image Target - Scene View

After making the Cube I added earlier as the child of the Image Target [Parent], it will appear as shown above, the only way to test it now is to hit the button play and open the image from your personal device to see if the cube appears as well.

Image Target - Live View [Cube]

Moving on to attempt the cube animation where it will move up and down. Firstly, I will need to activate the animation from Window - Animation and click the necessary button to start animating. To specifically target the 3D Object - Cube, I clicked on the Add Property and proceeded to find Cube Animation - Transform - Position. After, I adjusted 3-way keyframes to ensure that there would be a peak point in the animation before reverting back to the original position and clicking the recording button while I was at it to ensure that it was working well. Finally, proceed to try it out by clicking the Play button.

Cube - Animating

Below is the live preview version of this section of the exercise:

Exercise 04: UI Buttons

For this exercise, we were tasked to add a panel and UI buttons so that eventually we could go to another scene by just clicking the button. Coding in C# script is required for this exercise. It is quite overwhelming because the code can be quite complicated to comprehend. The image attached below is the work in progress of the UI buttons exercise, it is at its raw stage.

UI Buttons [Raw Stage]

We were also reminded to change the Texture Types for our added UI Buttons (Sprite 2D & UI) - Sprite Mode (Single) - [Scroll down] Click Apply.

** Seeing that I continued this particular [UI Button] exercise straight into my Final Project as a continuation after the Prototype, the documented demonstration will be both in this blog as part of the exercise and also in Task 04: Final Project's blog.

This exercise continues straight into the overview of one of the scenes for my final project. Users will encounter this home page to click 'Scan Now!' before having to use the camera to scan the business card (Image Target).

HomePage - Overview [UI Button]

After watching one of the recorded lecturers from a couple of semesters ago, I followed his tutorial in making this home page to provide structure to my final project. The first image attached shows the workspace in Microsoft Visual Studio where all the coding happens and the second image is when we have to integrate the script directly from the canvas panelling so that it will function well.

*The button was tested (without documenting it here), and it functions well because it was able to move to the next intended scene.

C# Scripting - Visual Studio Code

Button On-Click - Scripting Integration

REFLECTION

To be completely honest, I have no idea what's going on because this software and field of study (AR) is completely new to me and I feel like there were no introductions on how to use the basics of Unity except for just an introduction on what is the function of the Experiential Design field in UI/UX. Although this may seem really simple to readers, I faced challenges just with these at the time of writing because of how complex this software is. I admit that this caused several mental breakdowns because a part of me was expecting at least a direction given to us via first-party or third-party videos to help us understand the fundamentals better. 

However, after trying out the cube exercise again, It was like seeing a light at the end of the tunnel, I am now trying to walk through the long and dark tunnel to see where will this module lead me. Hoping for the best from now on.