Week 08 - Week 11
Ahmad Firas Bin Ahmad Fisal | 0345121
Experiential Design | Bachelor of Design (Hons) in Creative Media
Task 03: Creative Experience Design Project Prototype
*Recognising the difficulties I've been facing with the usage of Unity and also the ability to grasp this module against the time constraints, we were allowed to change our project idea to be suitable to our understanding of Unity. Changes to my idea are documented back in Task 02: Proposal stage as well. [Necessary changes will be updated in Task 02 and a link to go to Task 02 will be added here soon.]
I've also experienced hiccups along the way trying to reserve the selected rooms for the AR scanning due to the studio being booked by other lecturers for their classes or special rooms that require a lecturer to be physically there with us. Due to these contributing factors that made me scrap my initial idea, time constraints were another major factor that supported this idea cancellation.
After self-learning with limited YouTube tutorials that are easy enough to understand, I resonated with doing the Business Card Augmented Reality (AR) project to showcase my brief introduction.
INSTRUCTION
In Task 03: Prototype, we must do a short video presentation and walkthrough of our AR project prototype to explain our AR app and elaborate on what has been done and has yet to be completed. We are advised to include our progression by stages. The output may not necessarily be a finished visually designed project.
PLANNING & DESIGNING STAGE
Software: Adobe Illustrator (AI)
Before moving to the Unity software for further prototyping, I planned out the direction of my desired business card and its content in AI beforehand.
Design Outcome Goals:
- Basic Information (Name, Role, etc.)
- LinkedIn button
- Blogspot (Current Portfolio) button
- Contacts
- Images of highlighted design projects.
- 3D Avatar (Ready Player Me)
![]() |
| Concept |
Typeface Design: Titilium Web
After figuring out the concept of how I envision the final project is going to be, I begin the prototyping stage.
PROTOTYPING
As with almost every Unity project, we are required to ensure our Build Settings, and Player Settings, and import the Vuforia Engine into the project before we start designing to avoid problems in the future, as taught by our lecturer.
I've also created the License Key in the Vuforia website so it allows me to use it in the Unity project. Unity SDK for Ready Player Me were also installed with the help of the GIT application. After getting the Pre-Designing phase out of the way, I began exporting the images that I would like to use as the base or UI buttons. I've also utilised the Target Manager to create my database to allow recognition of the image from my phone to activate the AR version of the business card later on as the outcome.
![]() |
| Build and Player Settings |
![]() |
| Unity SDK - Ready Player Me |
Main Scene - -
![]() |
| Panel and CanvasA |
After hours of figuring out how to navigate through Unity, I've reached this stage where the image target was able to be imported in through the database that was already put in through Target Manager @ Vuforia Engine Developer Portal. I began learning on how to adjust the look of the business card through the Inspector and to ensure that it is integrated with the Material feature that I've labelled CardMat.
As for the avatar, I followed the instructions provided by Ready Player Me on their website to integrate my avatar into Unity.
Below is the link to the instructions:
| Avatar and C# Script |
I've also followed through countless videos and articles online on how to make my character rotate slowly. The image attached above is the C# script and the Unity workspace together to highlight a part of the process.
| Avatar Testing on Mobile |
This is the view when I click the button play, and the image there is from my mobile phone the purpose of this is for me to look at how the avatar would play or look like through the phone. There was a minor change made to the speed of the rotation that I managed to change through the transform section under the inspector panel, and I also rechecked the animation panel to ensure that the default walking tagging was removed because I only intend for the avatar to rotate instead of to mimic a static walking.
This is the current stage of my prototype, it may seem a little but to get here feels like a lifetime with the amount of self-exploration being made and countless mental breakdowns and frustrations over not being able to understand the software.
Progress-to-date (future):
- UI buttons and their animations to appear from the business card and out
- Images of selected design projects
- Name and Real photo
- Clickable buttons to its directed content (LinkedIn, Blogspot, etc.)
- Ensure that my C# Script process goes smoothly as it is the most challenging part for me
![]() |
| (Recap) Concept |
Walkthrough Presentation on Current Prototype - -
AR Business Card
Youtube Link - Click Here!
Google Drive Link - Click Here!





Comments
Post a Comment