Experiential Design / Final Task

on

6/7/2025 - 27/7/2025 (Week 12 - Week 15)
Wee Jun Jie / 0375271
Experiential Design / Bachelor of Design (Hons) in Creative Media
Final Task: BOOKA' AR App

All class notes have been stored here: My Notes

 INSTRUCTIONS 

<iframe src="https://drive.google.com/file/d/146wFmRPQznny8T_HCXWHRGU81WBFRA8B/preview" width="640" height="480" allow="autoplay"></iframe>


 Week 13 - Task 4 Overview 

🟢 Switched from 3D Model Answers to Image Sprites
Problem:
  • Models appeared with inconsistent scales, rotations, and positions.
  • Difficult to align all models nicely inside UI buttons.
Attempted Solutions:
  • Created ModelRoot wrappers for each model to normalize transform values.
  • Adjusted model scale in script.
Final Decision: 
  • Switched to 2D sprites inside buttons for consistency and polish.

🟢 UI Scaling & Resolution
Problem:
  • App didn’t fit all screens properly (extra space on top/bottom).
  • Some UI elements distorted or misaligned on devices.
Attempted Solutions:
  • Tweaked Match Width/Height to 0.5, then fine-tuned.

🟢 Audio and Interaction Feedback
Problem:
  • Icons or text appeared out of sync, or not prominent.
Attempted Solutions:
  • Used TextBounce.cs script on both text and icon.
  • Controlled when animation should start or stop.

🟢 End of Quiz Panel
Problem:
  • Panel didn't appear at first.
  • Animation looped infinitely.
Attempted Solutions:
  • Enabled FinishPanel.SetActive(true) inside EndQuiz().
  • Added a scale-up animation once (not looped).

🟢 Scene Navigation & Button Issues
Problem:
  • BGM toggle or other buttons failed to show when navigating between scenes (e.g., Game → Home).
Attempted Solutions:
  • Used DontDestroyOnLoad with scene check and GameObject reactivation.

🟢 UI Design

Fig 1.1 UI Panel and Elements Design - ADOBE ILLUSTRATOR #15July25


App Presentation Slide & Video Showcase



BOOKA.apk < Click & Download


 REFLECTION 
Experience
Developing the interactive game scene was a highly iterative and problem-solving driven process. Initially, I intended to use 3D models as answer choices for the quiz, but this approach revealed several complications. Models varied in scale, orientation, and hierarchy structure, which made visual consistency across the UI extremely difficult to maintain. Despite multiple strategies like prefab wrapping (ModelRoot) and scripted scale adjustments, the models still appeared distorted or misaligned across devices. Eventually, I decided to switch to using image sprites for the answer buttons. This significantly simplified the layout and provided more polished, consistent visual results especially important for screen space–based UI design. Throughout the task, I also fine-tuned other components such as animated instructional prompts, feedback text colors, and end of quiz panels. The overall experience demanded careful debugging, creativity, and flexibility in decision-making.

Observations 
  • Unity's handling of 3D models within UI (Screen Space - Camera) is difficult without standardising all imported assets beforehand.
  • Prefabs instantiated inside buttons do not always respect the same transform settings, especially across different source models.
  • UI elements such as feedback texts and instruction prompt benefit from subtle animation to guide user focus.
  • When publishing to Android, Unity may encounter platform-specific issues e.g., (INSTALL_FAILED_USER_RESTRICTED) if device settings are not properly configured.
  • The Input System conflict can break interactions unless the correct handling mode is selected (Input Manager) for legacy setups.
Findings
  • Image sprites are significantly more reliable than models when used for multiple choice interactions in a 2D UI context.
  • Developing for Android requires careful attention to build settings, screen resolution, input handling, and orientation constraints.
  • Transition animations (e.g., bounce or scale effects) add important polish and improve user feedback.
  • Separating logic (like sound effects, quiz logic, and UI response) into modular scripts improves debugging and future scalability.
  • Testing on device early is important some issues like screen fit or touch input problems don’t appear in Unity Editor.