Experiential Design - Final Project : Completed Experience
INSTRUCTION
We, as the students will synthesise the knowledge gained in task 1, 2 and 3 for application in task 4. We are required to create integrate visual asset and refine the prototype into a complete working and functional product experience.
Submission Requirement :
- Project File and Folder
- Application Installation Files (APK for android, iOS Build Folder for IOS/iPhones)
- Video Walkthrough / Presentation
- Online Posts in E-portfolio as reflective studies
EXPLORATION
After the prototype exploration in Task 3 : Creative Experience Design Project Prototype, I continued my exploration and did some final touch up for the final project in order to create a full set completed experience for my proposed application.
The List that mentioned in previous prototype :
➜ Modify the real text [educational contents about planets & Quiz]
➜ Scroll bar issue, not function-able
➜ Animation in Blender / Unity
➜ Zoom in & Out features
➜ Fix the position [current is not freedom to drag & control]
➜ Add on Quiz Review
➜ Add on BGM for Audio Player
➜ The AR scene direct to AR
As mentioned in the previous video presentation that there are a bug on the onboarding scenes, having 1 seconds of showing the Unity working scene, I had figured that was my issue of changed the option in a different scene.
Fig 1.1 Solution on Skybox issue (Week 15/ 14.07.2023)
#Solution :
Change Clear Flags under the main camera, from "Skybox" to "Solid Color".
Then, when I navigate and check through the Quiz Panel, I felt that the "close button" was a bit awkward and I reposition it to a "better position".
Fig 1.2 Before Vs. After (Week 15/ 14.07.2023)
As I having the issue on the AR scene would not direct to the AR automatically, I re-think about the concepts that I had built for the 3D scene, and figured that actually "IT'S THE SAME CONCEPT". By adding an extra "component", the issue was fixed. And, as I having the intention to make a "Quiz Review", I used the previous script for Q1-Q5 and the result as the base, with the help of Ai generator and youTube, I able to did it.
Fig 1.3 Quiz Review, Script #Review1 (Week 15/ 15.07.2023)
Fig 1.4 Outcome, Quiz Screen,
AR + 3D + Result + Review (Week 15/ 15.07.2023)
Continued then, as I having intention of adding BGMs for the right and wrong answer to enhance the engagement, I took the YouTube video from The Game Dev Show as reference and ended up my own outcome :
Fig 1.5 How to Add SFX + Outcome (Week 15/ 15.07.2023)
//This is a video clip with sound, I had explained briefly on how I add the SFX.//
For the animation on marker card, it seemed to be not "looped" [will be stop a second and continue rotate which I think is not so engaging]. I explored some of the functions based on the YouTube video and ended up the following outcome :
Fig 1.6 Before Vs. After (Week 15/ 15.07.2023)
Fig 1.7 Development of "Animation looped" (Week 15/ 15.07.2023)
#Solution :
Change the Animation "Curves" to Linear [Under Animation > Curves > Right Click the key point > Both Tangents > Linear.
And continued, the issue was to make the 3D screen planets to be able to rotate and pinch zoom by "hand control", and IF able, I wish to make the background to be able to move within (to showcase the idea, you are really in the solar system).
As I having the intention to create a AR space but I had no idea how to do so and I figured the solution when I "simply" searching tutorial video in YouTube. The skybox ideation by had made my imagination came true.
Fig 1.7 Outcome, Space Skybox (Week 15/ 15.07.2023)
#Solution :
Import the image and create materials > change the shader from "standard" to "skybox" > under the camera, window > rendering > light setting > environment > drag the material into the skybox.
And to make the camera to able to rotate, not from the perspective of "planet" but the "camera". A tutorial from Emma helps. As, this required a "redo scene" so I grab the opportunities to make some changes within the alignment.
Fig 1.9 Script to Rotate the Camera (Week 15/ 15.07.2023)
Fig 1.8 Outcome, "Rotate in space" (Week 15/ 15.07.2023)
Then, as I also had the intention to create the pinch zoom function in the application, I tried the tutorial script that Mr.Razif had shared but feeling there's something not goes smooth and I decided to find alternative method to make the imagination to reality. A script by Triple Quotes, given a better engagement on the pinch zoom function :
Fig 1.9 Pinch Zoom Function, Before Vs. After (Week 15/ 16.07.2023)
While the pinch zoom function had achieved, I had figured that when I zoomed the planet, the appearance/ resolution was low, which might make the overall interaction become not engage at all. So, I tried an alternative texture map from the website, Solar System Scope instead of the initial website, Planet Texture Map.
Fig 1.10 Planet Texture Map Vs. Solar System Scope (Week 15/ 16.07.2023)
It can saw through the Fig 1.10 that the "After Version" is more reality and more clear. So, I depart to change all the texture of the planets to Solar System Scope's version.
Fig 1.11 Outcome, Planets Texture Amendment (Week 15/ 16.07.2023)
Aside from the issue of Scrollbar that I still not able to fix it in current status, the 3D screen had done! //OMG! The prototype vs. The current outcome 😭//
Fig 1.12 Prototype Vs. Current Outcome (Week 15/ 16.07.2023)
After half completed the 3D scene, I departed to AR screen's exploration. As i had totally change the structure of how I did the 3D in prototype and current outcome, so I believed I also needed some time to make it come true. As I took a long time exploring how can I make the object to rotate also in AR screen, but I felt that the user can self explore by walking around or a better engagement is to having the real rotation speed (Animation), So I will be more engaged compared to the user rotate by themselves which is same concept in 3D screen.
Fig 1.13 AR Scene, Self-Rotate (Week 15/ 16.07.2023)
And, as I was not able to explore the Pinch Zoom in AR at the meanwhile, I had the intention to change my idea from Pinch Zoom to a more interactive or engage way, "capture the moment". So, my new idea is to create a camera button in order to let the user to record the moment with CelestAR. The "imagination" was so hard in terms of the limitations of time, but thanks for SpeedTutor's tutorial, I was managed to create this after a 4 hours exploration :
Fig 1.14 Development & Script (Week 15/ 16.07.2023)
Fig 1.15 Outcome, Capture the Moment (Week 15/ 16.07.2023)
Before I duplicated the 3D to different place expect Earth or Mercury, I explored again for the scrollbar. In fact, this time, it's workable! The issue was only the Pivot position.Y. To make the scrollbar function, the Pivot Y should be 1, if 0.5, the scrollview will start at the middle content, if 0 will start at the bottom.
Fig 1.16 Scroll Bar, Outcome (Week 15/ 16.07.2023)
#Solution :
Change the Pivot.Y to 0.5
Then, I start to search for the facts and contents that I wished to put into the application. Below are the contents compilation :
Fig 1.17 Contents Compilation, PDF (Week 15/ 16.07.2023)
Continued back to AR. After having "Capture the Moment", I think of if there are any possible that the user can "save the moment"? Then, I continued my journey.
Fig 1.18 Development, "Save the moment" (Week 16/ 17.07.2023)
Fig 1.19 Outcome, Proof on able to save on device [computer]
(Week 16/ 17.07.2023)
//Fig 1.19 *unity screen got some error on the button and it's video after this stage basically, so just assume as a demo/ proof on it really will save under my desktop.//
In order to make the outcome more variable, I tend to create different background for each planets :
Fig 1.20 Development, LoMo Frame [Trial and Error]
(Week 16/ 17.07.2023)
//But in the end, it came up only with Saturn and Uranus got variety, others is sharing the frame of Milky Way as I felt the frame (their appearance) that used for them are too sharp and not consistency within the application//
Next, the issue was when we go through the Quiz AR Screen, it will be directed to a black screen before arrived to the next scene (transition). So, I create a Fade in & Out animation to make the transition to be more smoother.
Fig 1.20 Development, Fade In & Out (Week 16/ 17.07.2023)
Fig 1.21 Before Vs. After (Week 16/ 17.07.2023)
Also, as mentioned in prototype presentation video that I will use blender for animation and 3D object but I continued my development in Unity //as after several days of exploration, some of the features become more easier and convenient to navigate//. So I tend to build the 3D model of Saturn Ring in Nomad :
Fig 1.22 Development in Nomad (Week 16/ 17.07.2023)
However, when I imported the 3D object into Unity, I was not able to add textures into it. Then, I proceed to download in Sketchfab. And, below are the outcome of before and after Saturn having "ring".
Fig 1.23 3D Object Saturn,
w/ and without Ring (Week 16/ 17.07.2023)
After all the stuff had finalised, I build and run the application to go through and check if anything need for enhancement. And, I felt that the original onboarding page was boring, in fact, I did an animation for the onboarding page to make it more engaged :
Fig 1.24 Development and Outcome (Week 16/ 17.07.2023)
After, since I felt the AR screen was quite engaged in my current thought, but the 3D screen look so boring and dull. So, I thought of anything that can make it more interesting. Then, I came up to an ideation to add BGM with animation on it. Originally, I think of let the user to rotate by their own, but I figured that is that possible a planet did not rotate if having intention to make people imagine they are in the space? To make the application to be user-friendly, I also created a audio control panel where users can choose to "mute" or "unmute" the BGM :
Fig 1.25 Outcome, 3D Screen (Week 16/ 17.07.2023)
Last but not least, I was aware that the alignment of the application was not organised (not in the middle of my screen) during the progress. I did a minor arrangement and make sure all the icon, position are in the same "position" and "direction". And, one thing different from the computer view and phone view for AR was I still not able to access the user's photo album so instead to having a "save" icon, I think a "full screen" icon would be more approachable for them to screenshot by themselves.
Fig 1.26 Button Development in AI (Week 16/ 18.07.2023)
Fig 1.27 Before Vs. After (Week 16/ 18.07.2023)
And after some minor details adjustment, it can be stated that "Congrats! I had deal with my first AR application" ✌️😭 //OMG... Finally, it's "almost" a wrap!//
Fig 1.28 Completed Experience, Video Presentation (Week 16/ 18.07.2023)
Fig 1.29 Video Walkthrough, iPhone 11 ProMax (Week 16/ 18.07.2023)
As my video walkthrough did not recorded the full compilation of the 8 planets and 1 quiz card. I "invited" my friend, Bear Bear to help me with this! 🐻😋
Fig 1.30 CelestAR Compilation, No description (Week 16/ 18.07.2023)
Fig 1.31 CelestAR Marker Card Compilation (Week 16/ 18.07.2023)
Fig 1.32 C# Script Compilation (Week 16/ 18.07.2023)
Fig 1.33 CelestAR Frame Design Compilation (Week 16/ 18.07.2023)
REFLECTION
Finally, I've reached the end of this assignment, and I must say, the outcome has far exceeded my expectations, leaving me incredibly satisfied! Throughout the semester, I faced numerous obstacles that prevented me from fully grasping the tutorials provided by Mr. Razif, such as poor internet connections, login errors, and other unexpected issues that created a sense of panic within me. Typically, we are given a month to explore and solve the final project, but I found myself with only four days to transition from a mere prototype to a complete experience.
From my perspective and thoughts, the prototype was really not something that I really expected, but I had the "heart" to give it up as I had limitations on using Unity and needed to explore and settle all the stuff within a very short period of time. But, now, especially when I successfully saved the moment" in my application, The feeling was OMG! This is something that has "Jacqueline's style". In fact, I am a person who loves to create "extra" for people to save memories; I love memories, and this ideation actually came through from the proposal, but I thought, "It's too complicated for me to do, no, NO for this time", but in the end, I also didn't know what motivations pushed me to do so.
Overall, I am filled with a deep sense of satisfaction. I admitted that this journey was very painful, as I needed to savour my sleep every day to complete this "procrastinating project". But, at the very least, I can confidently say that I am content with the outcome as compared to the prototype (which, at the moment, I think my application will look like this in the end?.. emmm ok la but.. No choice!) For now, I am very satisfied! I am grateful for my spirit and energy to go through these challenges, and yeah, it's a wrap! ✌️❤️😮💨
Comments
Post a Comment