Teoh Gim Khoon (0361563)
Bachelor of Design (Hons) in Creative Media
Final Project (AR Premock)
INSTRUCTIONS
Final Project
Progression
Sketch / App Amendment
Fig.1: Refinement Idea & Rough Sketch
After creating the first version, I checked for ways to make the AR Premock app better before adding all the features in Unity. I made a list of what features each page should have, considered new features to add, and sketched rough designs to see how the pages would look. Additionally, I drew some sketches and created a preview for the signboard design details on the image target page to show how the animation will look.
Figma / Adobe Illustrator
Fig.2: App Interface Design
I used a design software called Figma to create the user interface (UI) of the AR Premock app. In Figma, I designed various elements such as buttons, store images, signboard details, and more. Using Figma allows me to preview how the app will appear before importing it into Unity and adding the augmented reality (AR) features.
Fig.3: Signboard Design Details
I also crafted the design details that will be displayed on the AR Image Target Preview page for the signboard design. This includes elements like an icon button and information about the brand, such as its purpose, typography, and the color palette used in the design.
Fig.4: Signboard size and mockup button
To make the signboard design fit each store, I utilized Adobe Illustrator to create designs based on the actual size of each store's signboard. Once created, I exported the designs and placed them under the area target in Unity for implementation.
In App features (Unity progress)
Main Features
1. AR Mockup (Area Target)
Fig.5: Vuforia Captured Area
I used an iPad app called Vuforia Creator to scan the store's signboard. This scan helps me create a special target area in Unity. Then, I can easily replace the old signboard design with the new one in Unity, making sure it fits perfectly on each store's signboard.
%20(1).gif)
2. AR Preview (Image Target)
Fig.7: Signboard Design Image Target
Before putting the information on the image target in Unity, I designed the image target itself. I added this design as a target on the Vuforia Target Manager website to ensure it's suitable for use. After that, I imported the image target into Unity and organized the objects that will show up on it.
.gif)
3. AR Place (Mid Air Stage)
Fig.9: Understanding Mid Air Vuforia Engine
I learned how to add the Mid Air Stage feature to my AR Premock application by watching a YouTube video. The tutorial focused on using the Vuforia engine in Unity to create the functionality for placing signboard designs mid-air.
Fig.10: Mid Air Stage Vuforia Engine
In Unity, to make the mid-air features, I included the 'Mid Air Positioner' and 'Mid Air Stage' from the Vuforia Engine. I made the object a child of the Mid Air Stage, ensuring it stays in the middle of the mid-air positioner for the desired mid-air features to work.
4. Object Animation
Fig.12: Animation & Animator Unity
To create an animation in Unity, I start by adding keyframes to the object. I do this by recording the anchored position of the object at different points in time. Additionally, I create a new clip that includes the static state of the object and set the animator default to this static state.
Other Features
5. Pinch To Zoom
Fig.14: Pinch To Zoom C# Script
To enable the pinch-to-zoom feature for both the information preview and mid-air section, I utilized an online AI code generator to generate the necessary C# code. After generating the code, I simply copied and pasted it into Visual Studio Code for implementation.
.gif)
6. Switch Button
Fig.16: Switch Button C# Script
To make the switch button for the instruction details on the launching page, I obtained a C# script from a friend that was generated using online AI tools. This script enabled me to incorporate images under the switch elements, allowing seamless navigation through each image one at a time.
7. Pop up Overlay
Fig.18: Pop up screen tutorial video
To achieving a specific pop-up effect for the design of my AR Premock app, I discovered a valuable tutorial video on YouTube. This instructional video served as my guide, providing step-by-step insights into implementing the desired pop-up effect within my application. Through this learning process, I gained a clearer understanding of the techniques and methods required to bring this visual enhancement to fruition in my AR Premock app design.
8. Swipe Menu
Fig.20: Swipe Menu tutorial video
I acquired the knowledge of implementing the swipe menu button for the mockup button and pick store button in my AR Premock app by watching a tutorial on YouTube. The tutorial demonstrated how to create the swipe effect, allowing users to easily choose the design or store they wish to mockup. The tutorial specifically covered the use of the scroll view and scroll rect in Unity to achieve this interactive and visually appealing effect.
9. Button Onclick Image
Fig.22: Button Link Img tutorial video
To enhance the mockup features and create an Instagram-like scrolling and selection logo design for signboard designs, I referred to a tutorial video on YouTube. This video guided me through the process of understanding and implementing the necessary C# script in Unity. By studying the content of the video, I gained insights into the specific scripting techniques required to achieve the desired scrolling and selection functionality for the signboard designs within my AR Premock app.
AR Premock Application Presentation Slide
AR Premock Application Video Walkthrough
REFLECTION
I would like to express my sincere appreciation for the invaluable assistance provided to me by my module lecturer, Mr. Razif, as well as my classmates, who collaborated with me and supported each other throughout the project. This project has allowed me to enhance my understanding and knowledge of utilizing Unity with C# scripting, which was my first time using both. In addition, I was able to experiment with the Vuforia engine, which enabled me to create impressive features such as image targets, mid-air stages, area targets, and location navigation in AR view, which was not available in my AR premock app that I try out from my other classmate project. Their guidance, feedback, and encouragement helped me overcome many of the challenges that arose during the project. Their support helped me to stay motivated and focused, especially during times when I felt overwhelmed. I am grateful for their willingness to share their expertise, and for the spirit of collaboration that they brought to the project. Thanks to their contributions, I feel confident in my ability to use Unity and C# scripting to create innovative AR experiences in the future.
Comments
Post a Comment