Motion Graphic | Supisara T.

Voice-Controlled Game:
Shout in Thai!

This project is one of my thesis named "Shout in Thai!", which is an individual project. I've created the voice- controlled game for foreign tourists who want to learn basic Thai phrases pronunciation correctly. The game will show the differences of five Thai tones. Players need to speak out the given words. I created this game by using Unity, Procreate, Adobe Illustrator, Adobe After Effect, and Capcut.

Cutscene

The cutscene is about a foreigner traveling in Thailand who wants to order food in Thai. However, he mispronounces the Thai words, leading to misunderstandings. In the end, Thai tone platforms appear to help him pronounce Thai correctly.

The story is created to showcase the inspiration behind the development of this game, which is based on the real-life experiences of foreign tourists ordering Thai food. These experiences were shared on TikTok. Then I adapted it into a short frame-by-frame animation on Procreate to help players understand the purpose of this game.

First draft of storyboard of cutscene. At first, the story is about one character is travelling in Bangkok. Then it's time for him to go to the airport, but due to traffic in Bangkok, he probably not going to get there on time. So, Thai tone platforms are the solution to help him be on time.

However, this story didn't relate well to the game, the phrase lessons, or the situations in the game, and it didn't highlight the problem of mispronunciation. Therefore, I decided to change the story. In the new version, all three characters are involved, and I planned to depict each situation by selecting words that are spelled similarly in the Karaoke version (English) but pronounced differently in Thai, affecting their meaning. However, this version was too long for a cutscene.

For the final version, I chose only one situation featuring the Cap character. This scenario is the most relatable to daily life since most people need to go to a restaurant and order food, whether in English or Thai.

Game Screens

Each page of a game represents Bangkok environment. The blue sign is inspired by street name sign found in Bangkok, while the UI button pattern is inspired by Thai bus tickets, which are also iconic to Bangkok.

Working process: Sketching and first draft. I drew characters on Procreate, and then finished everything in Adobe Illustrator.

Background Design

Background design of each situation. These are popular places among foreign tourist.

Working process: Sketching and first draft, then finishing everything in Adobe Illustrator. At first, I chose to use flat design for buildings, using only solid colors. However, when I integrated them with characters, they lacked dimension. Therefore, I added some light and shadow to the buildings using gradient colors

5 Thai tone platforms

The design of each Thai tone platforms are inspired by the 12 giants at the Phra Kaew Temple, iconic to Bangkok. The patterns are derived from footpath signs in various colors, indicating the paths for the characters to walk on. Each shape corresponds to the tone that should be pronounced: low, mid, high, falling, or rising tone.

Damage Platforms

Working process: At first, I designed platforms in shape of their original Thai tones appearance. Then I found out that if I designed the tone marks in their original traditional Thai form, players wouldn't understand whether each word should be pronounced with a high or low tone, because the shape alone doesn’t indicate how to pronounce them. So, I decided to create platforms that guide the player to pronounce the words with the correct high or low tones. The shape of these platforms was designed based on the actual pronunciation of each Thai tone.

Characters Design

Characters design: I got inspiration from items commonly used by tourists when traveling in Bangkok, such as backpacks, caps, and luggage. All of three characters are wearing elephant pants because they're iconic thing that tourist like to buy and wear them.

Working process: Sketching and first draft. The cap character used to be orange, but when it stood beside the red backpack character, both looked similar because of their colors. So, I changed the cap's color to purple because it's a complementary color to red and creates a nice contrast between the characters. I drew all characters on Procreate.

Logo

The logo design aims to reflect the essence of Bangkok, making it instantly recognizable as

a game set in this vibrant city. Key elements include the Giant Swing, a stupa, and the Chao Phraya River, which add movement and dynamism to the logo. The color palette features red, green, and yellow to contrast with the blue and cyan tones used in the game's background.

Showing some process of designing the logo. The first draft was entirely red, with wavy letter shapes to resemble sound frequencies. However, the visual outcome appeared more scary than friendly and didn't relate to Bangkok. So, I created a new design, which is the final one, using round shapes and vibrant colors to make it look more joyful

Game button icon

Icons, such as pause, sound, and exit, draw inspiration from Thai bus tickets, which are classic and iconic to Bangkok. The word "กลับ" (return) is removed from the icon to signify that this route is one-way and cannot be reversed. Yellow-orange color is chosen to make it noticeable, resembling window panels. Circular shape is selected for immediate understanding that it's clickable.

Final and first draft

For buttons with text, inspiration is drawn from street signs in Bangkok, utilizing a blue color similar to real signs. Players will immediately recognize it as a street sign in Bangkok.

Final and first draft

Items & Text Box

Items for score boosts are represented by coconut water and tuk-tuks, as they are two things that foreign tourists are highly interested in. They are also emblematic of Thailand and Bangkok.

Text Box will pop up when characters contact with check point. I designed it to be like a dialogue box combining with foot path. To relate it with the theme of this game.

Sketch and first draft

Final Overall visual design of game

Game Development

Creating the game using Unity and Visual Studio Code. Personally, this is my first time creating a game. I watched YouTube tutorials and got some help from a professional for the voice detection in the game. I wrote C# scripts, mostly by watching YouTube and using ChatGPT to help me solve some errors.

These are the first drafts of the game design. I want the character to walk by using the player's voice to control the movement. For example, if the player uses a high tone, the character will go high. I got the reference for game design from "Scream Go Hero." However, that game detects the loudness of the voice while my game detects the pitch of the voice. Even if the player makes a loud voice, if it is not high enough, then the character won't jump high.