Experiential Design - Final Project

26.08.19 - 05.12.19 (Week 1 - Week 14)
Tamara Audrey Saputra (0335846)
Experiential Design
Final Project

---

Instruction

---

Proposal

Week 6 | 30.09.19

This week we were told to come up with two different AR ideas for the final project. The first one is to create an AR for children's biology books and the second one is to create an indoor navigator for cinema. Mr. Razif approved the latter one because it hasn't been done before and also because the first one was already taken by the other classmates.

---

Process

To start off, I decided to look up for tutorials on the internet regarding the topic that I've chosen. However, the good tutorial that I've found uses Placenote that is only available for Mac OS and I'm using Windows. Here is the tutorial:

I then consulted Mr. Razif about the problem and he told me to look up Mapbox. I then start to search for tutorials for indoor mapping that uses Mapbox as it supports both the operating systems. Here is the link to one of the prominent tutorial that I've found:  https://blog.mapbox.com/indoor-navigation-in-ar-with-unity-6078afe9d958

I've attempted to use Mapbox that would keep the coordinates of the place, for test purposes I used the classrooms in Taylor's as the location points.

Fig 1: Mapbox Process

Fig 2: Mapbox Process

Fig 3: Mapbox Process

I've also made the screens in unity for the logo, main menu, and the scanning camera.

Fig 4: Unity Process of Main Menu

However, I faced a problem technical problem with it as it requires a GPS system to determine the location which is supposed to be supported by Mapbox as well as ARCore. Moreover, the Mapbox Unity tutorial (https://blog.mapbox.com/indoor-navigation-in-ar-with-unity-6078afe9d958) is too outdated and is not relevant to the current version which brings additional technical issues. Therefore, I've decided to change the idea as the deadline is approaching and the initial idea is hitting a dead end.

The new idea still revolves around cinemas but this time instead of showing navigation arrows that leads the user to its seat by detecting the user's current location, I've made it more achievable by scanning the QR code in the ticket and the user can flip the back of the ticket to call the 3D model of the theatre that also highlights the particular seat the user booked.

Fig 5: Ticket 1

Fig 6: Ticket 2

Fig 7: Ticket 3

Fig 8: Ticket Back

The reason why the QR code is needed to be scanned first is because the QR code contains the data of the seat (e.g Theathre:5, Seat: D05). From there, using scripts, the camera will collect the data and selects the particular seat to be highlighted red. For that reason as well the image target is only one, which is the ticket's back design.

Fig 9: Seat Script

In order for the script to work, I've previously named the seat and rows one by one in the prefab. Two different theatre layout were also made in the prefab to prove its flexibility if another type of theatre is inserted.

Fig 9: Row Script

Fig 10: Theathre Script

Since the use of the app is currently for seeing the user's seat, I've changed the main menu that only caters to scanning the ticket.

Fig 11: Revised Main Menu

I've also made an animation for the main screen to make it more interesting.

Fig 12: Main Menu Animation

Moreover, since cinema tends to be dark, a flashlight option is added to the camera screen to allow the camera to scan correctly even in the dark.

Fig 13: Flashlight Script

Fig 14: Scan Camera Scene with Flashlight Toggle (Top right corner)

The camera also provides instruction text that would help users to know what they have to do. In this case, it says "SCAN QR CODE" first and then when the QR code is detected it says "SCAN THE BACK OF THE TICKET" to inform users to flip the ticket.

Fig 15: Scan QR Code

Fig 16: Scan QR Code

Feedback

Mr. Raziff told me that it was too simple so he suggested to add animation to the selected seat and make the plane plays the trailer that the theater is currently running. For example, if theatre 3 plays Frozen than it would play Frozen and when it's clicked it would lead the user to the Youtube link.

Alterations

I then made the alterations to make the seat jumps up and down if the seat is selected by the script.

Fig 16: Seat Animation Script

I've also added the code so that it would play Frozen or Deadpool Trailer when the back of the ticket is scanned.

Fig 17: Inserting video to the panel

Fig 18: Trigger Youtube URL when Touched

Fig 19: Trigger Youtube

Mr. Raziff also told me to change the design of the back of the ticket as the symbols in the corners looks like "plus" and "minus" sign that made users want to click on it. Also, the theater's name at the back is also disturbing according to him.

Fig 19: Initial Ticket Design

I tried to makes changes to the design of the ticket, however, the first attempt is not favored by Vuforia due to lack of corners and distinct elements to detect. It receives 0 stars and does not work when I run it.

Fig 20: First Alteration Attempt

Fig 21: Vuforia 0 stars

In the second design, I placed the name at the top right corner so that it won't disturb the seats and the labels. The second design works but it only receives 3 starts in the Vuforia development and when I tested it is not as stable as the initial design. After observing it, it seems that Vuforia detects the "Cinemaaxx" text as the main anchor and when it's gone from the screen the projected object disappears and this happens often as it is located in the right top corner.

Fig 22: Second Alteration Attempt

For that reason, I decided to keep the "Cinemaxx" text in the center but made the line spacing and size smaller. I've also made all the corners the same to avoid having it look like a "plus" "minus" sign.

Fig 23: Final Ticket Design

---

Final Outcome

Here is the final outcome of the project. The files can be accessed through Google drive and the Demo of it can be watched in the Youtube video below.

Google Drive: https://drive.google.com/open?id=1zuqtE_zljGxz5DOGxmSZc8joiAuOPfza