EXPERIENTIAL DESIGN: PROJECT 2
29/08/2022 - 11/12/2022 (Week 05 - Week 15)
ALICIA TENG YI LING / 0345159 / BDCM
EXPERIENTIAL DESIGN
PROJECT 02 / PROTOTYPE
PROJECT 2 PROTOTYPE
Todo:
- Create a working prototype of the proposal
Process
Continuing on from my project proposal (find it here), while playtesting the first draft of the initial prototype, I had a moment of realisation and thought that my idea didn't nearly have enough AR elements in it so I decided to scrap the mechanic of mimicking animation using 3D illustrations and instead make actual 3D sushi model objects that would be activated using image targets and tracking. So, I headed to my favourite software, Blender.
 |
Fig 1.1.1 Old 3D Sushi Illustrations |
Blender: Sushi Step by Step Models
Inspiration
 |
Fig 1.2.1 Sushi Model Inspiration |
For the new 3D models, I decided to go for a low poly aesthetic not only because I'm an amateur Blender user but also because I thought it looked cute and matched the previous sushi designs. I wanted simple, vibrant colours to seamlessly tie the design and the app UI together.
 |
Fig 1.3.1 Seaweed |
 |
Fig 1.3.2 Rice |
 |
Fig 1.3.3 Salmon |
 |
Fig 1.3.4 Wasabi |
 |
Fig 1.3.5 Roll |
 |
Fig 1.3.6 Sliced Makizushi |
 |
Fig 1.3.7 Rendered Sliced Makizushi |
 |
Fig 1.3.8 Rendered Step by Step 3D Sushi Models |
I'm quite proud of how all the final, rendered models came out actually. I only hope I can integrate them smoothly into the main gameplay functions.
Maguro Neko Model
Next up was actually building my 3D mascot model which I also created using Blender. I started by creating a more refined drawing from his first rough sketch. This time I defined his shape better and included his colours which I did my best to follow in his 3D model.
 |
Fig 1.4.1 Front View of Maguro Neko Drawing |
 |
Fig 1.4.2 Side View of Maguro Neko Drawing |
As can be seen below, I found it a bit difficult to replicate the salmon lines and seaweed strip on his body and was running steadily out of time so he became a tuna nigiri sushi instead, I still think he's cute though. I also gave him small semi-circular eyebrows for some form of self-expression.
 |
Fig 1.4.3 Angle I |
 |
Fig 1.4.4 Angle II |
 |
Fig 1.4.5 Angle III |
 |
Fig 1.4.6 Colour in Blender |
I decided to use FBX file format instead of OBJ due to colour export issues. My blender knowledge is very rusty so I had quite a few difficulties exporting the 3D model with all the materials I wanted assigned. My very kind friends from animation and entertainment design helped me out greatly.
Unity
Starting off with my image target, which is a picture of several sushi because the chosen recipe for the prototype is makizushi. Luckily for me, it had a 5/5 star rating on Vuforia's target manager so I almost had no issues with detecting it when I was testing the prototype.
 |
Fig 1.5.1 Image Target |
This first problem I encountered was with the 3D cat model disappearing when testing the prototype so I assume it was an issue with the angle of the camera, viewpoint and "Z" position. I managed to fix this AR camera viewing issue with viewing the Maguro Neko 3D model by changing the projection from perspective to orthographic
 |
Fig 1.5.2 Orthographic View of Scene |
 |
Fig 1.5.3 3D Model Test in Game View |
I made all the UI assets using Adobe Illustrator and Photoshop then exported them into PNGs. Following this, in Unity Engine, I converted them into 2D Sprites and used UI such as images and buttons (TextMeshPro) to implement them.
 |
Fig 1.5.4 Assets in the Main Interface of Project |
 |
Fig 1.5. 2D Assets in Folder |
To change scenes, I used a simple code to do so. After users interact with certain buttons, it would take the them to the previous or next scene smoothly.
 |
Fig 1.5.5 Scene Change in Visual Studio Code |
I simply had to insert the script into the button then add the on click action then type in the number of its open scene in build settings.
 |
Fig 1.5.6 On Click Interaction |
 | ||
Fig 1.5.7 Opening/Home Scene in Unity Editor
|
In the first scanning scene, the continue button to proceed to the next page only appears if the image target is constantly being scanned. If it is not detected or tracked consistently, the button disappears and the player will be able to proceed.
 |
Fig 1.5.9 Makizushi Facts Scene in Unity Editor |
 |
Fig 1.5.10 Main Game Scene in Unity Editor |
For the main interactions in the sushi making scene, to be able to change the 3D models when activating the buttons in the side menu, I separated each 3D model by scenes so that each button tap would move to the next scene and change the model that would be tracked on the image target to give the impression that the sushi is being made, step by step. This was the most straightforward method for me, although it was a bit tedious.
The player must follow the instructions from the previous scene and create the dish in the order of ingredients and actions that is specified. If they forget the steps, they may click on the "?" button in the top left which will take them back to the instructions scene. Similarly to the first scanning scene, the player must keep the image target constantly tracked for the 3D sushi models to appear and continue playing. Once they are finished, they should click the "done" button in the bottom right to take them to the end scene where they can choose to retry the game or continue reading facts about the makizushi.
Rundown:
In this interactive AR game prototype, the player will scan the sushi image to access the main interface. From there, they will read the cooking instructions to make makizushi. They can then begin constructing their sushi.
On the top, there is a button that leads to facts about the dish, culturally and culinarily. The objective of the player is to complete the dish according to instructions and learn something new about it!
Once I finished everything, I clicked build and made it into an APK. From there, I downloaded it onto my android (Xiaomi) phone and recorded the prototype testing you can find in figure 2.1 below.
Error Notes:
[02/11/2022] Too many errors because I updated every package in package manager because I'm an idiot that followed a YouTube tutorial because Vuforia wasn't installing for me.
[03/11/2022] Today I remade the entire prototype from scratch using 3D Core instead of AR Core and did not update the packages in hope of there being no errors due to obsolete packages.
Final Project 2 Prototype Submission
Fig 2.1 Video Walkthrough of Prototype: Cooking Friends
Google drive with all files (Including APK and Zipped Unity Project Files):
 |
Fig 2.2 Submission Files in Google Drive |
FEEDBACK
Week 10 [02/11/2022]
- Maguro Neko model isn't too bad. It's good that I tried to make my own 3D assets so my portfolio can be wholly mine.
REFLECTION
This project was my first time interacting with anything AR and I never thought I would be creating something related to it. Honestly, it was a pretty steep learning curve considering I have issues learning new software have never tried Unity or C# before but it was fun trying to test out different methods of creating the outcome I wanted but also incredibly difficult and challenging at times. It was frustrating almost when I thought I had done every step correctly but there was still some sort of error in the end however it was almost worth the satisfaction of finally completing it.
The key things I learnt was regarding how to use the software Unity. This was my first time working with this type of engine and there was much to learn, especially with the C# code for certain aspects. I feel that some of my methods for making the prototype work may be considered unorthodox or perhaps strange but it somehow worked out fine in the end after much struggle. Another software I brushed up on was Blender! I haven't touched it since my previous semester and I had never tried UV mapping or texture painting so it was definitely a lengthy process with many YouTube tutorials. Although I had some issues with the mesh, I'm quite happy with how my low poly sushi models turned out.
Overall, it was an extremely insightful and fun learning experience. I hope to utilise everything I have learnt from this project in more future works, of course after a lot more finesse and polishing especially with my C# skills.
IMAGE REFERENCES
Comments
Post a Comment