Experiential Design - Task 3: Project MVP Prototype

19.11.2024 - 3.12.2024 / Week 08 - Week 10
Tan Zhao Yi / 0363285
Experiential Design / Bachelor of Design (Hons) in Creative Media
Task 3: Project MVP Prototype


LIST


Task 3: Project MVP Prototype



INSTRUCTION



LECTURE

Lecture 8: Mixamo
We learned about using the Mixamo, a animatimg website then import into Unity by using FPX file type.
Mixamo
Lecture 9: Model Switcher
In this lecture, we learned about switching the model while clicking on it. It can be changed by shape or colour, and this will be very useful for furniture AR experience like IKEA app.
Back to top


Task 3: Project MVP Prototype

In this task, we are to work on the prototype of our project. This will allow us to learn about the limitations of technology, skills, or knowledge that we might not recognised before. Then, we will need to think out solutions creatively to overcome the problems we encountered. The major objective of this task is to test out the key functionalities of our own project.

Before starting up, I revised the visualisation in Figma, particularly the home page button as it looks very abrupt. 
Fig 1.1. Home Screen Button - Before and After

Following the Figma, I've selected some screens that include major interactions and the MVP screen included in the prototype will be:
1. P4: Drag and drop
2. P6: Stir the pot
3. P18: Clean the shelf
4. P19: Eat the chocolate

A.  P4: Drag and Drop
The plan is users are allowed to scan the image target and a pot will pops out, surrounding with some sweets like chocolate, ice cream, candy etc. Then, they can drag the sweets and drop it into the pot, aligning with the storyline.
The pot and the sweets are downloaded from Unity Asset Store.
I started with placing all the models on the intended location. The pot is placed slightly above of the image target, and the sweets are randomly placed around the pot on the ground.
Fig 2.1. Placing Objects
Also while adding the collider component, I edit the collider to be slightly bigger so that children can easily drag the object.
Fig 2.2. Expanding Collider
Then, I continued with coding in Visual Studio Code. For the dragging function, I seeked for some help from AI, and I learned to use ScreenToWorldPoint to convert the touchpoint 2D (screen) position to 3D (world) position. The object transformed position is equals to the mouse's world position + offset, which "offset" means the difference between where user clicked and the object's center. Adding "offset" allows the object to maintain its relative position (so it doesn’t "jump" to the center of user's finger).
Fig 2.3. Script - Drag and Drop
Click to enlarge
Outcome
Fig 2.4. Outcome Video - Drag and Drop
B. P6: Stir the pot
Initially, on page 6-7, the user was intended to drag the large spoon placed in the pot to stir the liquid. After stirring the pot three times, the liquid would spill out. However, after spending a considerable amount of time trying to implement this feature, I realized that achieving the spilling effect was not possible. The issue arose because the downloaded pot asset did not have an animation, and I was unable to edit it or create the animation myself. As a result, I had to reconsider how to approach this interaction, at this point, I will focus on page 6 first.

The animals will be downloaded online:
The frog is not confirmed yet because I couldn't find a suitable one at this moment. It will be confirmed in the final project. First, I work on the stiring function. I placed the spoon to the position I want, and added an invisible box collider to define the liquid area to constrain the movement area of the spoon. 
Fig 3.1. Box Collider to Define Liquid Area
In this case, I reused the knowledge gained in A. P4: Drag and Drop, which is the Screen to World Point.
Fig 3.2. Script - Stir the Pot
Click to enlarge

Outcome
Fig 3.3. Outcome Video - Stir the Pot
C. P18: Clean the shelf
In this section, users can clean the shelf by dragging a feather broomstick across it. As the broomstick is swiped over areas with dirt multiple times, the debris will gradually disappear, providing a sense of interactive satisfaction. To create this effect, I plan to download a clean wooden shelf asset and overlay it with spiderweb elements. These spiderwebs will be manually added to the shelf to simulate a dirty or neglected appearance. The goal is to create an engaging, hands-on experience where users feel a sense of accomplishment as they clean the shelf, reinforcing the interactive and playful nature of the AR storybook.
The cobweb is a 2D sprite since I couldn't find a 3D version, but it works perfectly fine in this context. The shelf's default color is a greenish-brown, but I discovered that adding the hex color #542E00 created a more suitable visual effect for a dirty shelf. This adjustment introduced subtle grey undertones, enhancing the worn and unclean appearance, which better aligns with the intended aesthetic for the scene.
Fig 4.1. Shelf - Default and Material
I placed the broom in the air to indicate that the user can interact with it. When the user swipes on the cobweb, it disappears after a single swipe, using the Destroy() method. I chose to use Destroy() instead of SetActive(false) because I didn't want the cobweb to respawn after it’s been cleaned. Since there is no restart function for each AR scene, the user won't be able to replay unless they rescan the image target, making Destroy() the more appropriate choice to ensure the cobweb is permanently removed once cleaned.

To track the number of swipes, I attached box colliders to both the duster and the cobwebs. Each time the duster triggers the cobweb, it counts as one swipe. Additionally, I measure the distance moved by the duster, incrementing the swipe count if the duster travels a sufficient distance. To control the frequency of swiping, I set an integer variable called Required Swipe, which determines the number of swipes needed to clean the cobweb. This approach ensures that the swiping action is both responsive and meets the desired interaction criteria.
Fig 4.2. Script - Clean the Shelf
Click to enlarge

Outcome
Fig 4.3. Outcome Video - Clean the Shelf
D. P19: Eat the Chocolate
Originally I wanted the chocolate to display an actual "bite" shape when the user clicked on it. However, due to time constraints and technical limitations, I had to find an alternative approach. I decided to simulate the biting effect by gradually decreasing the length of the chocolate, as its rectangular shape made this method more feasible.

Initially I am trying to adjust the scale of the chocolate to achieve the effect. However it came out squeezing itself instead of "cropping".
Fig 5.1. Chocolate Squeezing
Therefore, I tried to use a masking technique. I created an invisible cube beneath the chocolate. When the user clicks on the chocolate, the chocolate moves downward, creating the appearance that it is being bitten from the top. For the invisible cube, I attach a shader (material) to it.
Fig 5.2. Shader
In my file, the z-axis is controlling the chocolate moving up / down, so I will be modifying the z position in the script. 
Fig 5.3. Script - Eat the Chocolate
Click to enlarge

Outcome
Fig 5.4. Outcome Video - Eat the Chocolate

Final Task 3: Project MVP Prototype

What's done:
  • Drag and drop
  • Stirring in one limited area
  • Cleaning effect
  • Click and position down
What's yet to be done:
  • Potion spills out the pot effect
  • Animals animation: Running around
  • UI (Buttons, Screens etc.)
  • Frog asset
Fig 6.1. Final Task 3: Project MVP Prototype - Slides

Fig 6.2. Final Task 3: Project MVP Prototype - Presentation Video


REFLECTION

For me, Unity is quite a challenging app for me because of its complex functionalities, and also coding. As I don't have any background with Java, I can only change my mindset or logic to achieve the visual effect I want, and sometimes it's not even workable with the knowledge I have at this moment. It is still a long road to go.

Throughout this process, I observed that development is not as simple as just "drag and drop." Every feature needs logic and problem-solving. For example, I thought that dragging the spoon would be easy, but I discovered that I had to set specific boundaries for it. Without these boundaries, the spoon moved outside the pot, and the interaction did not feel realistic.

Additionally, I noticed how important it is to test often. Each time I made a small change, I had to test it to make sure everything still worked. Small mistakes like forgetting to set the correct collider or not adjusting the axis could cause big problems. Testing regularly helped me catch these issues early.

Comments

Post a Comment