The objective of task 3 is to test out the key functionality of our project. The output may
not necessarily be a finished visually designed project. We will be gauge on our prototype functionality and our ability to
creatively think on alternatives to achieve the desired outcome.
Prototyping
I designed my app, Guess That Animal AR, on adobe illustrator first. Including all the UI design, buttons, and assets. Then, I imported my designs in adobe Xd to create a mock-up prototype to help visualize the flow of the app.
Fig.1.0: App UI Design on Illustrator
Fig.1.1: App Prototype on Adobe Xd
Below is the prototype of the app made in adobe Xd, which only covers the main features of the app that will be covered in this task, since we are only instructed to test each feature once to ensure its functionality. The main features of my app consist of:
1. Animal Image Recognition and AR Models corresponding to the scanned image.
2. 3D Model Interaction by rotating and zoom in/out on the animal model, and tapping on it to make the animal sound.
3. Information panels become accessible when the animal is scanned, includes text information and a play/pause button for text-to-speech.
4. Background music that persists across scenes, toggle buttons for enabling/disabling it , and interactive sliders for controlling the volume.
5. User guide and settings panels that are mutually exclusive (only one can be open at a time) to avoid overlapping.
6. A quiz where the user listens to an animal sound and selects the correct animal from four options. The user receives feedback if the right or wrong animal is selected.
After creating the mock prototype, I started the project on Unity to begin testing the functionality of my app's planned features. I first installed Vuforia package in the new file and import all the assets from illustrator to Unity, including all the UI elements, buttons and their different toggled states (on/off, open/closed, correct/incorrect), and the animal 3d models which I got from free-to-use 3d models website.
Fig.1.3: 3D Animal Models imported to Unity
Fig.1.2: App Assets imported to Unity
After getting all the assets imported, I started setting up the main scenes of the app which we will be navigating to, and they consist 4 scenes: Landing Page, Home Page, AR Mode Page, and Quiz Mode Page.
Fig.1.5: Setting Up AR Mode Page
Fig.1.4: Setting Up Landing Page
Using the AR features from Vuforia's package, I set up the image targets which are illustrations of the animal sounds book. Below, is a screenshot of me testing the if AR functionality works.
Fig.1.6: AR Image Target Testing
Using the OnClick() events, clicking on buttons can now change different scenes and open panels. But I encountered a problem in my home page where I have both the settings and user guide buttons opening a panel. When I click on both buttons, they overlap each other. However, I only wanted it to be one panel open at a time, so that when one panel is open, it closes/cancels out the other one. To the left is a video of when the panels overlapped, and the right is when I fixed this issue and the panels became mutually exclusive.
I fixed the overlapping panel issue by creating a script that deactivates all other panels once one panel is open and attached it to the settings and user guide buttons.
Fig.1.8: Script to Deactivate All Panels Except the Specified One
Fig.1.7: Settings Button with Script Attached via OnClick()
Another problem I had was adding the background music and making it persist across all scenes smoothly on top of volume controls; it was quite a challenge. I wanted it so that the background music plays only once at the start and continues throughout all the scenes whilst being capable of turning it on/off and controlling the volume with a volume slider. But the problem was, the volume settings was accessible in two separate scenes, so what would happen is that there would be duplicates of the background music and it would keep overlaying each other because the volume controls were controlling separate audio files. The video below shows how the bg music was overlapping
Fig.1.9: Adding Background Music
With the help of the lecturer, he found out the way to make the background music persist in all scenes without having to duplicate the audio source, which was by adding "Don'tDestroyonload" to the script. This way, the background music from the homepage can persist in other scenes without being destroyed. But I still had a problem; everytime I return to the homepage it would replay and duplicate the audio source. Only after a lot of trial and error did I discover that the cause of this issue is because I had the background music play on awake, so everytime the homepage would open it would play the background music. Therefore, the solution was to ensure it only plays once in awake using the MusicManager script.
Fig.1.10: Music Manager Solution Script
Moving on to the 3d model interaction features. I added scripts to allow the 3d model to be rotated, zoomed in/out, and to play the animal's sound effect when tapped. To achieve this, I had to add a box collider and the respective scripts.
Fig.1.11: Adding 3D Model Interaction
I wanted to add sound controls to the sound effect the 3d model makes when it is tapped, so that if the user does not want to constantly hear the sound effect when they are interacting with the model, they can turn the sound off. However, this was very complicated for me to achieve and I could not find a solution even after consulting with the lecturer. Because before adding the sound controls, the play sound on tap script worked, however, after I added the sound controls, it just disabled the sound effects completely instead of controlling it on/off. Below, are screenshots of attempts are trying to make the sound effect toggle button work.
Fig.1.13: Attempts at Toggling Sound Effects 2
Fig.1.12: Attempts at Toggling Sound Effects 1
Fig.1.14: Attempts at Toggling Sound Effects 3
Fig.1.15: Attempt at Toggling Sound Effects Script
Then I added the animal information panels, so that when the 3d model is scanned, the respective animal panel is active. To achieve this, I made an animal panel list with the script and attached each 3d model with its panel so it can work logically. And I imported an external text-to-speech audio that can be played when the play button is clicked.
Fig.1.14: Adding Animal Information Panel
Fig.1.14: Adding TTS Audio and Pause/Play Buttons
And lastly, the quiz mode scene. I added questions that asks the user to choose the animal that makes the sound in question. The different animal sounds for each question can be played via the sound button. When an animal is selected, feedback will be shown; it will be outlined in red if incorrect, and green if correct. And all the options will be disabled once one animal has been selected. The continue to next question button which will appear only once the question has been answered. And the back button at the top that leads you back to the home page.
I showed the lecturer my progress and asked for consultation because I was having difficulty with the sound control my app. I had 2 problems, one of which was solved by the lecturer; the problem was, because I have sound controls in 2 different scenes, whenever i turn on the background music in one scene, it overlaps with the other scene. So The lecturer helped me found a solution to only make one background music fixed and playing throughout all the scenes.
The second problem was the sound effect toggle. When the 3d model is tapped, it plays a sound effect, and I wanted to do sound controls for the sound effect, however, when I add the sound control it disables the play sound on tap feature. So after trying to find a solution for this, sir just said to remove the sound effect toggle all together because it was too confusing.
3. Reflections
Working on this task was especially challenging for me because, up till now, most of our tasks were research and designing. However, in this task, we had to figure out how to make our prototypes functional. And because each of us has specific features, they have not been necessarily covered in the tutorial sessions. Therefore, a lot of the time working on this task was a compilation of trial and error and a lot of frustration.
Despite the frustration, the feeling of accomplishment after struggling to find the solution and actually making the function work makes the struggle worth it. I learned a lot from working on this individually and hopefully I can expand further and improve this task in the final project with more time.
Comments
Post a Comment