Labels

ADVANCED INTERACTIVE DESIGN: TASK 01 INTERACTIVE AR APPLICATION

ALICIA TENG YI LING [0345159]

ADVANCED INTERATIVE DESIGN [TASK 01 INTERACTIVE AR APPLICATION] 


Research on TikTok AR/Interactive Filters

[ Filter 1 ] 

Name: AR Control Klee

Creator: abcd_effect 

Category: 3D AR

Description: User is able to control a 3D model in real time using a touchscreen joycon and jump button for movement. 

Pros: 
  • Requires active input from user
  • Is fun to play with, well-made model (smooth movement, no clipping or strange body glitches)
  • No distinctive lag

Issues:
  • 3D model disappears without a solid tracking point

Fig 1.1.1 AR Control Klee Filter on TikTok


Fig 1.1.2 Trying the Filter

[ Filter 2 ]

Name: Emoji Word Challenge 

Creator: lauragouillon 

Category: Randomiser 

Description: The user is challenged to act out the prompt given in the manner of the randomised emojis provided. 

Pros: 
  • Stimulating
  • Very user engaging
  • Has more than two million videos created based off of this filter effect

Issues: 
  •  None observed. 

Fig 1.1.3 Emoji Word Challenge on TikTok


Fig 1.1.4 Trying the filter

[ Filter 3 ] 

Name: Match Stix Snatch 

Creator: gracemchoi 

Category: Fashion & Beauty 

Description: A filter that tracks and overlays the user’s face, allowing them to determine which face shape they are and do their makeup contour as advised by the filter boundaries. 

Pros: 
  • UI is easy to understand
  • Responsive design

Issues: 
  •  Tracking is sometimes glitchy

Fig 1.1.5 Match Stix Snatch Filter on TikTok


Fig 1.1.6 Trying the filter

Ideas on TikTok AR/Interactive Filters 

[ Idea 1 ] 

 Name: Still in the running

Category: Fashion & Beauty 

Description: A beauty filter that tracks and interacts with the user’s face using 3D elements that have collision physics with the user (it will not clip through and instead work to move around the user’s face). It will also have a minimal beautifying effect on the user’s appearance. 



Limitations: Head and face tracking will be difficult to complete and optimise. How would I do the collision physics and render the 3D effect? 

References: 


Fig 1.2.1 Reference I
[ Idea 2 ]
 
Name: Flappy bird spinoff? 

Category: 2D Interactive AR Game 

Description: A filter that has a 2D game interface where the user has to either use their fingers, head movements or eye blinking to interact with the character in order to achieve the game objective. 

The character would have to jump onto platforms and around the area to keep running. The objective of the game would be to remain alive as long as possible and collect as many points as they can. 

Limitations: How would I track the head/body movements or eye blinking smoothly to ensure accurate gameplay? 


Fig 1.2.2 Reference II
[ Idea 3 ] 

Name: Fortune Teller Category: Randomiser 

Description: A filter that randomizes your future fortune using an interface with three tarot cards. It would include the categories: Luck, Love, and Life Path. 

Each category would have specific cards, about 10 each. 

Limitations: How would I make the randomiser algorithm? I have no such knowledge. 

References:


Fig 1.2.3 Reference III

Progression

I started by choosing which interactive AR filter idea I was going for and settled on a quiz. Initially, I wanted to go for a game type filter using my project from game development for the material and aesthetic however upon review, it was thought to be not attractive enough for the general public. I agreed with this and set out to brainstorm a new idea which turned out to be a Sanrio correct or wrong question quiz (Mainly about these three characters: Cinnamaroll, My Melody and Kuromi).  From my research, it had to be a popular enough subject that would entice the population of TikTok to play it and I believe Sanrio is quite beloved by a variety of groups including myself! 


Fig 2.1.1 Initial assets for falling game AR filter (unused)



Considering it is quite a new software, tutorials were scarce and detailed ones were even more rare so to combat this, I set off to learn by using the One Person Quiz filter under the advanced category. 

Purpose & Objectives

One of my primary intentions was to provide an enjoyable and engaging experience for players while simultaneously offering educational and enlightening content. I aimed to achieve this by incorporating additional facts about the beloved characters that the players are passionate about. 

By presenting these facts in a fun and interactive manner within the quiz, I wanted to enhance the players' understanding and appreciation of the characters. The intention was to provide a more comprehensive view of the characters they love, going beyond surface-level knowledge and delving into intriguing details.
The objective of the quiz is to respond to as many questions accurately within a set time frame, which I have set to 24.5 seconds. The goal is to accumulate as many points as possible by giving correct answers. 

Each correct answer carries a value of 20 points. As the player progresses and continues to answer correctly, the points awarded for each question remain consistent. However, there is a maximum achievable score of 500 points, which is only attainable if the player possesses extensive knowledge and enthusiasm as a hardcore Sanrio fan.

Interactivity Element

The primary interactive feature of this augmented reality (AR) filter involves head tilting. To answer the questions, players need to tilt their heads in the direction of the answer they believe is correct (left or right). 

Based on feedback from Mr. Razif, it was suggested to incorporate more interactive elements, including enhanced responses. For instance, when a player answers correctly, a confetti animation could be triggered or additional text could be displayed. I chose to implement a specific sound for correct answers and a different sound for incorrect answers. 

Additionally, when the player completes the game, a captivating confetti falling animation will descend from the sky. 

As I faced difficulties while attempting to implement these features independently, Mr. Razif was very kind and helped out with that. I linked his tutorial below. 


Fig 2.2.1 Mr. Razif's Tutorial for right and wrong answer sound play + endgame confetti animation

Assets & Information

When it came to the assets required for the AR filter, I primarily relied on Adobe Illustrator to create the majority of them.

To maintain consistency with the adorable and charming nature of the Sanrio characters, I decided to adopt a cute pink theme throughout the filter. This choice was intentional, as it aligned with the overall aesthetic and vibe associated with these beloved characters, creating a cohesive and visually appealing experience for the players.

Here is a list of the assets I created or sourced for the filter:

UI Textures

Fig 2.3.1 Question Background

Fig 2.3.2 Left Answer Background


Fig 2.3.3 Right Answer Background


Fig 2.3.4 Scoreboard Texture




Questions

I curated a total of ten questions. To ensure variety and maintain a balanced representation of the Sanrio universe, I carefully divided the topics among the three chosen characters with roughly equal emphasis given to their unique attributes and storylines.

While determining the number of questions, I took into consideration the typical attention span of TikTok users, who are often accustomed to short and concise content. Ten questions struck a balance between providing a substantial quiz experience and fitting within the timeframe that TikTok users generally allocate for such interactive content without feeling overwhelmed or losing interest due to an excessively long duration.


Fig 2.4.1 All questions textures


Answers

There are twenty answers to match the ten questions, meaning there are ten correct ones and ten wrong answers. 


Fig 2.5.1 All answers (correct & wrong) textures

Scores


Fig 2.6.1 All scores textures

Sounds

Decorative Elements

I incorporated the three Sanrio Characters: My Melody, Kuromi and Cinnamoroll to reinforce the quiz's theme and create a cohesive visual narrative throughout the gameplay. Basically to establish a strong thematic connection and because they look cute and invoke joy in most fans. 

Fig 2.7.1 My Melody Decoration


Fig 2.7.2 Kuromi Decoration




Fig 2.7.3 Cinnamoroll Decoration

The confetti animation sequence was taken as a free asset from the Effect House library. It matches well with the overall appearance of the filter.


Fig 2.7.4  Confetti Animation

The information for the questions was gathered from a number of online sources which I will list below:
In Effect House

Here is an overview of what the main graph for the visual scripting of this quiz filter looks like. To see what I did in more depth, please keep reading.


Fig 3.1 Entire Main Graph


Fig 3.2 Close up of the hierarchy

I started by inserting the textures for the 2D screen images of the questions and answers. I randomly mixed up and placed the correct and wrong ones into both the left and right side answers. I used make array: Texture 2D for this. I connected them to the variables: Questions, QuestionCount, LeftAnswers, and RightAnswers.


Fig 3.3 Inserting questions and answers into the logic

Following that I entered the values for the correct answers for the tilting head logic (-1.00 left, 1.00 right). The head tilt events occur, it is goes through the CheckAnswers subgraphs to confirm if it is correct or not and then generate new questions + fade out/fade in transition.  


Fig 3.4 Determining correct or wrong answers by head tilt logic

Within the update and transition subgraph, I input the textures for the scores starting from 0 to 500. I also set the textures for the questions and answers here. 


Fig 3.5 Scoreboard tallying & textures

For the new interactive elements for the sounds, I added them into an audio player and tested around with the volume levels so as to not blast player ears with each answer. 


Fig 3.6 Audio Player Files

For the endgame logic and new interactive element, I added on a set visibility node to the sequence and set it to switch on for the confetti animation so that it starts playing once the game is over and the enlarged scoreboard pops up. 


Fig 3.7 Endgame logic for final score and confetti animation

Lastly, here is what the finished filter looks like on the default idle face.


Fig 3.8 AR Filter Appearance in Effect House

Summary of interactable features:
  • The game incorporates head tilt tracking to provide responses to questions. Users can tilt their heads left or right to indicate their answer choices, and the game system will detect and respond accordingly. 
  • Correct and wrong answers are accompanied by distinct sound effects, enhancing the user experience and providing auditory feedback. 
  • To celebrate the conclusion of the game, a confetti animation is displayed, creating a visually engaging and celebratory ending.

This is the thumbnail I chose when uploading the filter to TikTok:


Fig 4.1.1 Filter Thumbnail

Update!

After submitting to TikTok, people have been using my filter! :'D I'm a little touched right now. Sanrio fans come together <3 


Fig 4.2.1 Screenshot of the people that have tried my filter

Final Submission


Demo Video


Fig 5.1 Sanrio Quiz Filter Demonstration


Reflection

Reflecting on this project, it was my first time working with Effect House and visual scripting, which presented certain challenges, particularly due to the limited availability of tutorials. However, despite the difficulties, I found the process of learning and creating this interactive filter to be enjoyable and rewarding. 

Two of the aspects that I particularly appreciate about the project are the topics and the art direction. The decision to adopt a cute pink theme and incorporate the Sanrio characters as background elements successfully created a visually appealing and cohesive aesthetic. This art direction added charm and delight to the overall experience, aligning well with the theme of the quiz and capturing the essence of the Sanrio universe. Especially considering this is the first time I've decided to do something quite cutesy looking, it's definitely out of my design comfort zone but it was a refreshing experience and I'm glad I did it.

Considering areas for improvement, one aspect I could focus on is seeking additional resources to overcome the challenges encountered during the implementation of Effect House and visual scripting. This would enhance my understanding and proficiency in these tools, potentially making future projects in similar domains smoother and more efficient. 

In conclusion, despite the initial difficulties faced with Effect House and visual scripting, I thoroughly enjoyed the process of learning and creating this interactive filter. The art direction added a visually appealing touch to the project, aligning well with the quiz's theme. Moving forward, I will seek to improve by exploring additional resources, refining the user experience based on feedback, and further developing my skills in AR filter creation or just AR in general.
Labels:

Comments

Post a Comment

Popular Posts