08/07/2024 - 01/08/2024 / Week 11 - Week 14
Joey Lok Wai San / 0350857
Experiential Design / Bachelor of Design (Hons) in Creative
Media
Final Project: Completed Experience
TABLE OF CONTENTS
INSTRUCTIONS
https://drive.google.com/file/d/1VTud1K8MvUQGR3C0XpZ7vf3aqRaEh_eq/preview
FINAL PROJECT: Completed Experience
We need to synthesize the knowledge gained in tasks 1, 2, and 3 for application in this final project. We will integrate visual assets and refine the prototype into a complete, working, and functional product experience.
Requirements for the final submission:
- Your Unity Project files and folders (zip and upload)
- App build file (APK for Android, Build Folder for iOS)
- Video walkthrough and presentation of your App
- Updated proposal, especially if there's any changes from the previously submitted. Those without changes, just submit it again here.
- Direct Blog post link to the project posting
Design Process in Unity
Final Project: Completed Experience
Fig. 4.1 Van Gogh ARt Gallery - Final Walkthrough & Presentation, Week 15 (29/07/2024)
After the prototype version of our AR app was completed, we continued developing and refining our app to get the final version. Since most of the AR features were completed in Task 3: Project Prototype, I focused on refining the user interface design, enhancing a few functionalities of the app, and fixing some technical issues.
App Icon & Splash Screen
I wanted to add an introduction for the users when they first open the app. Rather than having just a plain black background with the unity logo, I changed the background to include Vincent van Gogh's self-portrait. This same image is also used on the onboarding page. I also added an app icon with his most famous artwork, Starry Night, since this was the painting I developed and expanded in the app.
Fig. 1.1 Unity Splash Screen YouTube Tutorial, Week 14 (27/07/2024)
.png)
Fig. 1.2 App Icon & Splash Screen Design, Week 14 (27/07/2024)
App Icon & Splash Screen
I wanted to add an introduction for the users when they first open the app. Rather than having just a plain black background with the unity logo, I changed the background to include Vincent van Gogh's self-portrait. This same image is also used on the onboarding page. I also added an app icon with his most famous artwork, Starry Night, since this was the painting I developed and expanded in the app.
Fig. 1.1 Unity Splash Screen YouTube Tutorial, Week 14 (27/07/2024)
.png)
Fig. 1.3 Player Settings, Week 14 (27/07/2024)
Home Page
The initial home page design looked very unappealing to me, and did not relate to Vincent van Gogh at all. I made a few home page design variations on Figma and picked the one I liked. I tried out different button styles, text alignment as well as background image.
.png)
Fig. 1.4 Prototype Home Page Design, Week 9 (03/07/2024)
Fig. 1.5 Home Page Variations, Week 14 (27/07/2024)
Fig. 1.6 Final Home Page Design, Week 14 (27/07/2024)
The initial home page design looked very unappealing to me, and did not relate to Vincent van Gogh at all. I made a few home page design variations on Figma and picked the one I liked. I tried out different button styles, text alignment as well as background image.
.png)
Fig. 1.4 Prototype Home Page Design, Week 9 (03/07/2024)
In the end, I used his famous 'Sunflower' painting as the background, as well as the buttons from the initial home page design. The colour palette matches the Starry Night and Sunflower painting.
Artist Page
Another redesign I did was the 'About the Artist' page because the prototype one looked so bad. Again, I did a few variations on Figma and played around with the layout. I used his self-portrait as the background overlayed with a black colour to make the text stand out better, then placed the content on top.
Fig. 1.7 Artist Page Variations, Week 14 (27/07/2024)
Fig. 1.8 Final Artist Page Design, Week 14 (27/07/2024)
Another redesign I did was the 'About the Artist' page because the prototype one looked so bad. Again, I did a few variations on Figma and played around with the layout. I used his self-portrait as the background overlayed with a black colour to make the text stand out better, then placed the content on top.
Fig. 1.7 Artist Page Variations, Week 14 (27/07/2024)
Fig. 1.8 Final Artist Page Design, Week 14 (27/07/2024)
Another thing I wanted to do was to make the 'Famous Paintings' section of the page interactable. I used a horizontal scroll feature, which I learned how to do by following this YouTube tutorial. It took a few tries to get it working but I manage to figure it out in the end.
Fig. 1.9 Scroll View YouTube Tutorial, Week 14 (27/07/2024)
Fig. 1.9 Scroll View YouTube Tutorial, Week 14 (27/07/2024)
3D Gallery Scene
For the 3D gallery scene, I added in a few of Vincent van Gogh's famous paintings. Following the comment from Mr. Razif, I only developed the features for one of the painting and displayed a pop-up saying ”coming soon" for the rest.
Fig. 2.1 Adding Paintings into the Gallery, Week 14 (27/07/2024)
For the 3D gallery scene, I added in a few of Vincent van Gogh's famous paintings. Following the comment from Mr. Razif, I only developed the features for one of the painting and displayed a pop-up saying ”coming soon" for the rest.
Artwork Information Page
For the information page, I added in the design for the 'Read More' button as well as adjusted the position of the other buttons so they are more visible on the page. This page has a few features attached to it, so I had to improve on some of them from the prototype as well.
Fig. 2.2 Improved Page Layout, Week 14 (27/07/2024)
One thing I had trouble doing in the prototype was making the image stay on top of the page. It worked fine in the game preview, but there was a weird gap on the top of the screen when it was built to the phone. To fix this, Mr. Razif helped me to anchor the image to the top of the page using Shift + Alt.
Audio Feature
In the prototype, I did not include the audio to the audio button. I first wrote a script of what I wanted the audio to be, then used ElevenLabs to generate the audio as recommended by Mr. Razif.
Fig. 2.4 Generating Audio in ElevenLabs, Week 14 (27/07/2024)
Once the audios were generated, I inserted them into Unity by following this tutorial. I wanted the audio to be played when the button is clicked and paused when clicked again. The tutorials on YouTube did not have the feature I wanted so for this, I followed a tutorial from ChatGPT and it worked! I used an audio controller script for this feature.
Fig. 2.5 Script from AI, Week 14 (27/07/2024)
Fig. 2.6 Adding Audio Function In, Week 14 (27/07/2024)
Zoom Feature
One of the main problems I faced was getting the zoom feature to work. I am not a computer science student so coding made no sense to me. I relied on tutorials and AI to help me generate a code that would make this feature somewhat useable. I tried so many variations and codes, as seen below. I have no idea what happened in the end, but I got it to somewhat work where the image is now able to be zoomed in and out.
Fig. 2.7 Zoom Feature - Trial and Error Scripts, Week 14 (27/07/2024)
Video Target Feature
For the video target feature, I changed the video since I did not really like the one I have in the prototype. It is a 3D animation view of the Starry Night that loops and plays when wake. The video is taken from this link.
I changed the image target design to make it more obvious for the user on what to scan. I added some text to the prototype target and it was more or less done. I would have used a different image but I could not upload anything else onto the Vuforia database which is strange.
.jpeg)
Fig. 2.9 Video Target Final Design, Week 14 (27/07/2024)
Fig. 2.10 Disable Tracking, Week 14 (27/07/2024)
More Information Page
When the 'Read More' button is clicked, it leads to another page with more context and details of the artwork. I did not develop this page in the prototype, so I worked on this from the start. There is a lot of text on this page so I decided to have a vertical scroll in order to make it easier to view the text. The page also has a text to speech function which can be played and paused anytime.
For the information page, I added in the design for the 'Read More' button as well as adjusted the position of the other buttons so they are more visible on the page. This page has a few features attached to it, so I had to improve on some of them from the prototype as well.
Fig. 2.2 Improved Page Layout, Week 14 (27/07/2024)
One thing I had trouble doing in the prototype was making the image stay on top of the page. It worked fine in the game preview, but there was a weird gap on the top of the screen when it was built to the phone. To fix this, Mr. Razif helped me to anchor the image to the top of the page using Shift + Alt.
Fig. 2.3 Before vs After Anchoring Image, Week 14 (27/07/2024)
Audio Feature
In the prototype, I did not include the audio to the audio button. I first wrote a script of what I wanted the audio to be, then used ElevenLabs to generate the audio as recommended by Mr. Razif.
Fig. 2.4 Generating Audio in ElevenLabs, Week 14 (27/07/2024)
Once the audios were generated, I inserted them into Unity by following this tutorial. I wanted the audio to be played when the button is clicked and paused when clicked again. The tutorials on YouTube did not have the feature I wanted so for this, I followed a tutorial from ChatGPT and it worked! I used an audio controller script for this feature.
Fig. 2.6 Adding Audio Function In, Week 14 (27/07/2024)
Zoom Feature
One of the main problems I faced was getting the zoom feature to work. I am not a computer science student so coding made no sense to me. I relied on tutorials and AI to help me generate a code that would make this feature somewhat useable. I tried so many variations and codes, as seen below. I have no idea what happened in the end, but I got it to somewhat work where the image is now able to be zoomed in and out.
Video Target Feature
For the video target feature, I changed the video since I did not really like the one I have in the prototype. It is a 3D animation view of the Starry Night that loops and plays when wake. The video is taken from this link.
Fig. 2.8 Starry Night Video Target, Week 14 (27/07/2024)
I changed the image target design to make it more obvious for the user on what to scan. I added some text to the prototype target and it was more or less done. I would have used a different image but I could not upload anything else onto the Vuforia database which is strange.
.jpeg)
A problem I noticed was that I could not unable Track Device in Unity, because clicking that would effect all the scenes and the gallery would not spawn. To fix this issue, I found a script that would disable tracking for this particular scene only and attached it to the scene.
Fig. 2.10 Disable Tracking, Week 14 (27/07/2024)
More Information Page
When the 'Read More' button is clicked, it leads to another page with more context and details of the artwork. I did not develop this page in the prototype, so I worked on this from the start. There is a lot of text on this page so I decided to have a vertical scroll in order to make it easier to view the text. The page also has a text to speech function which can be played and paused anytime.
Fig. 3.1 Vertical Scroll in Unity Tutorial, Week 14 (27/07/2024)
Fig. 3.2 Outcome of Vertical Scroll, Week 14 (27/07/2024)
Fig. 3.2 Outcome of Vertical Scroll, Week 14 (27/07/2024)
I found this page to be a bit boring and overwhelming with all the words, so I decided to add more images. I used an image slider by following this tutorial which allows the user to click next and previous to see the Starry Night painting in more detail. I followed this tutorial below and adjusted it to fit my design. I had to redo this twice because my work did not save :(
Fig. 3.3 Image Slider Tutorial, Week 14 (27/07/2024)
Fig. 3.4 Outcome of Image Slider, Week 14 (27/07/2024)
Final Project: Completed Experience
Fig. 4.1 Van Gogh ARt Gallery - Final Walkthrough & Presentation, Week 15 (29/07/2024)
FEEDBACK
WEEK 12
Looking good so far. You can have 2 or 3 paintings in the gallery but only need to do 1 painting that has all the features you have planned. Other paintings you can maybe display a pop-up saying ”coming soon". Good job so far 👍
WEEK 14
- Looking good so far.
- To fix the gap on the top of the page, anchor the image to the top and center using Shift + Alt.
- Use ElevenLabs to generate text to speech audio.
REFLECTION
I feel very relief that I managed to complete this project. I'm quite proud of the outcome, seeing that I struggled quite a bit but still managed to make a decent AR app by myself. I had no idea how I would be able to do this since I could barely make the prototype in the beginning. The thing I struggled with the most was the coding aspects since I am a design student and cannot understand code for the life of me. I spent quite a lot of time watching YouTube tutorials, understanding the code from AI, having multiple trials and errors - all this helped me to build the app in the end and it was time worth spent. I appreciate Mr. Razif being there to give advice and feedback to anyone who needed it as well as solving any issues we had. Overall, this has been journey of learning with a few ups and more downs. I'm happy that I managed to complete and get the AR features to work, and that I tried my best.
Comments
Post a Comment