Experiential Design / Task 3

Posted by

18/5/2024 - 1/6/2025 (Week 8 - Week 11)
Shawn Wong Kai Hen / 0375372
Major Project 1 / Bachelor of Design (Hons) in Creative Media
Experiential Design - Task 3


  INTRUCTIONS  



  Week 8 - Task 3 Overview  

For Task 3, i working on the MVP features and the prototype for my project color catch, I starting to create the starting, game menu and AR scene. I also start to create and finding the 3D object matching with my card, The card has been chosen there have Square, Rhombus, Circle, Diamond, Heart and Triangle. Here i also list out the features implemented at below:


 🎯 Features Implemented in My Color Catch Project  

🧩 Core Gameplay Features

  • 🔍 AR Shape Recognition using Vuforia Image Targets

  • 🧸 6 unique shape cards with matching 3D models (e.g., star, heart, circle)

  • 👆 Tap-to-start interaction: tap 3D shape to launch the game

  • 🎮 Shape-matching mini game: tap the correct color for the selected shape

  • 📢 Voice prompt system: audio instruction guides user (“Tap the red triangle”)

⏱️ Game Logic

  • 🧠 Stores the selected shape using GameManager

  • ✅ Score system: +1 for correct tap

  • ⏳ Timer countdown: game ends when time runs out

  • ⚠️ Time penalty for incorrect taps

🎨 UI & User Flow

  • 🎬 Animated starting scene (auto-load to menu)

  • 🧭 Game menu screen with Play and How to Play

  • 🎮 Game UI: live timer, score counter, color prompt

  • 📱 Simple navigation for young users — tap only, no text input

🎧 Audio

  • 🎙️ Custom-recorded voice instructions

  • 🔊 Sound effects for correct and incorrect answers

📦 Assets

  • 🧱 3D models created in Blender and imported as GLB/FBX

  • 🎨 Background UI and shape cards designed using Illustrator/Canva

  • 🎥 Tested with Unity Remote and built for mobile (Android)


  Work Process  

  Card Selection - Chosen  

I have find and buy the shape card on online, so there have many different color shape card can be choose in the box, so at the first i have choose 6 different shape from the box which is Square, Circle, Heart, Star, Triangle, Diamond.

Fig 1.1 - Overall Card

Fig 1.2 - Chosen Card

  Vuforia Database  

After choosing the card, i started to taking picture for each shape card by using the wall, i stick the card on the wall and taking the picture using my own phone and after done transfer to my pc.

Fig 1.3 - Taking Card Picture

After done taking the card picture and transfer it to my pc, i started the create a new database in my Vuforia Engine and start to upload each shape card to the Vuforia. But i facing the problem, the rating for each card is too slow and not hitting the requirement that atleast need 4-5 star. I have spent half day to retake the picture and find as many way to fix it but still cant to make it all to 4-5 star. So i just continue first and try that can be scannable in unity or not.

Fig 1.4 - Vuforia Engine Upload Image

  Unity Work Process  

1. Starting Scene and Logo

Fig 2.1 - Starting Scene

Fig 2.2 - Next Scene Scripting

First in the unity, i stated to doing my project step by step, I start working on the starting scene. for previous my idea for starting is the logo appear with animation and the scene will stop here and loop the animation until the user Tap to Start. But after working i think is too complicated so i just create and script and make the logo appear with animation and loop, the scene will stay 5 sec and auto change to the next scene.

2. Game Menu Scene

Fig 3.1 - Background Design

All the background are designed by myself, i have find some reference on online and start to designed a new background. During design i always thinking how to make it suitable to kids and related to my game. So i come out with some shape and light color background and element.

Fig 3.2 - Import background to Unity

After i done the design, i try to import it to unity and test it the size is fit the screen or not. In the Adobe Illustrator i not putting the logo because the logo i putting in unity because i want to apply the animation for the logo. After that, for the UI i havent done yet so i just put a simple button there for me easy to demo and proceed to next scene.

Fig 3.3 - Logo Animation

Fig 3.4 - Logo Animation Scripting

Here is the animation for the logo, went the user at the game menu scene, the logo will keep looping. The animation i using the LeanTween from Unity Assets Store, and i using scripting apply to the logo and the animation will running on the logo, is more easier and fast.

3. 3D Object Import & Texture Materials

Fig 4.1 - Import Vuforia Database

At AR Scene, first i need to add the image target on the hierarchy, after that at the inspector, need to select from database and the database that created and choose the image that uploaded. Before the this, we need to insert our vuforia license key in our AR camera first and delate the main camera.

Fig 4.2 - Import 3D Object

After done setting up the image target, i started to find the 3D object for each shape card and import to unity. But after i import to unity, i facing a problem is the texture for the 3D object is missing, but after that i try to find out and i start to apply the texture back to the 3D Object.

Fig 4.3 - Create New Material Texture

Here how i apply again the texture to new materials and apply to the 3D object. Drag the texture PNG or JPEG to the inspector correct Surface Input and Details Input.

Fig 4.4 - Overview for all card

For each card that i decided to put some 3D object that related in our real life, so each shape card represent a 3D Object.
  • Rhombus ➜ Kites
  • Square ➜ Rubik Cube
  • Triangle ➜ Pyramid
  • Diamond ➜ Diamond
  • Circle ➜ Soccer Ball 
  • Heart ➜ Love

4. AR Scanning 

Fig 5.1 - Add 3D Object into Image Target

Here i drag the 3D object that already done into the image target in hierarchy, so went press the play button open the AR camera and scan the card, will appear the 3D object on the card.

Fig 5.2 - Star Card Problem

Before changing to Rhombus shape i was using star, but because of the star cant detect by the AR Camera and i have try for many times, so i just decided to change using another shape card.

Fig 5.3 - AR Camera Testing 1

Fig 5.4 - AR Camera Testing 2

Here are some example result that scan successful by AR camera. For more details can refer to my presentation video.

5. Tap 3D object to Game Scene

Fig 6.1 - Tap 3D to Game Scene

How user that proceed to the game scene? Here are the ways, after user scan the card the appear the 3D object, user can tap the 3D object on their phone and it will process to the game scene (Watch on my presentation video). And how do i do that? First we need to apply the box collider by add component for each 3D object. And i have create 2 new script call ShapeTapConfirm and GameManager. ShapeTapConfirm is the script that tap the 3D object and also what shape will appear in game scene and the game manager is for control the game scene.


  Presentation Process  



  REFLECTION  

Experience
The development of Color Catch AR focused on creating an engaging augmented reality experience that promotes active play and learning for young users. Through an iterative design process, I prioritized intuitive interactions, reliable AR tracking, and rewarding feedback systems to ensure accessibility and replayability. Key technical challenges included optimizing Vuforia marker detection, refining touch responses, and maintaining visual consistency across different devices—each addressed through prototyping and user testing. This hands-on approach not only improved the app's performance but also deepened my understanding of child-centered AR design principles. The final product balances educational value with playful mechanics, delivering a seamless experience that encourages color recognition and quick decision-making in a dynamic AR environment.

Findings
Developing Color Catch AR revealed critical insights about creating interactive experiences for young children. I quickly learned how easily features can conflict in an AR environment—model taps interfering with UI buttons, or sounds playing without context—requiring careful system design to isolate interactions. Through testing, I observed that toddlers need an exceptionally streamlined experience: oversized buttons, minimal on-screen elements, and unambiguous visual cues became essential. This led me to redesign core interactions, such as replacing screen taps with dedicated UI buttons for model swapping to prevent accidental inputs.

Observations
Creating Color Catch AR taught me valuable lessons about building effective AR experiences for children. I found that organizing code into modular systems—like separate managers for game logic, AR models, and audio—made the project easier to maintain and expand. Clear visual and sound feedback proved essential, with simple animations and sound effects significantly boosting engagement for young users. Even small details, like button color changes or bouncing objects, helped communicate success and keep kids motivated. Through trial and error, I learned the importance of patient debugging, methodically checking each component to solve issues like missing textures or audio problems. These insights now guide my approach to child-friendly AR design: keep systems organized, feedback immediate and clear, and always test thoroughly.




Comments

Post a Comment