Table of Contents
  1. Service Introduction
    1. 1. Create and invite a game
    2. 2. Role selection
    3. 3. Keyword drawing
    4. 4. Touble Painter Vote
    5. 5. Keyword Guessing
    6. 6. Game Results
  2. Play video
  3. Finish

Introducing the service “Trouble Painter - Drawing Mafia Game”.
👉 한국어 버전


✔︎ Part 1. Trouble Painter - Drawing Mafia Game
Part 2. Create a real-time drawing game with Flutter


Service Introduction

Trouble Painter is a drawing mafia game where you find trouble painter hiding among good painters.
👉 Android & iOS : download link


1. Create and invite a game

If you want to play with friends, create a room and press the Invite button.
Show the generated QR code or Share the invitation code You can invite your friends. A minimum of 3 or more users must gather to play, and up to 10 people can play together :)


Colors are randomly assignedColors are randomly assigned
Share QR code or invitation codeShare QR code or invitation code

We have prepared three methods so that you can easily join a room created by a friend.

  • Enter the game via QR code: Enter Invitation CodeScan QR code
  • Enter through URL Scheme: Click the invitation link shared by a friend
  • Invitation Enter by directly entering the code: Enter Invitation CodeEnter Invitation Code

Scan QR code to enter
Enter with URL Scheme
Enter the invitation code directly

2. Role selection

When the game starts, one trouble painter will be randomly selected, and all other players will play the role of good painter.

Trouble Painter

  • You start painting by drawing without knowing the keyword.
  • You must not be discovered by good painters.
  • Even if your identity is discovered, you can win by matching the drawing keyword.

Good Painter

  • Knows the keyword to draw in the picture.
  • You shouldn’t let the trouble painter know your keywords.
  • Look at the picture and find out who the trouble painter is.
If a cute hamster appears<br> you are a trouble painter!If a cute hamster appears
you are a trouble painter!
If a cozy bear appears<br> you are a good painter!If a cozy bear appears
you are a good painter!

3. Keyword drawing

The game is played over two rounds, with each player taking turns drawing. When it is your turn, the background color changes, and since you can only draw one stroke per turn, a drawing animation will appear as a guide, saying Draw only one stroke.

At first, you draw one stroke. This condition may feel frustrating, but if you play a few games with friends, you will experience that the less and abstractly you draw, the more fun the game becomes 😋

Trouble painter screenTrouble painter screen
Good painter screenGood painter screen

The picture can be drawn with a randomly selected color when entering the room. It takes 15 seconds per turn, and if you want to edit the picture, you can press the Clear button at the bottom right. You can also enjoy a faster game by using the Pass Turn button.

Also, six reactions have been implemented so that you can communicate with other users even when it is not your turn. 🙌


Drawing video
Reaction video

4. Touble Painter Vote

It’s time to find Trouble Painter through real-time voting. Please vote for the player who seems to have drawn without knowing the keyword since the background color of the profile and the drawing line color are the same! 🗳️

The player with the most votes will be named the <span style=color:#FF774C>Trouble Painter</span>.The player with the most votes will be named the Trouble Painter.

5. Keyword Guessing

If you find Trouble Painter in the vote, the keyword guessing time will begin. Good Painters can see the keyword that Trouble Painter enters in real time.

Trouble painter keyword input screenTrouble painter keyword input screen
Good painters can see the keywords entered by trouble painter in real timeGood painters can see the keywords entered by trouble painter in real time

For the Trouble Painter, who fights alone without any teammates, we’ve implemented an AI Hint feature using the Gemini API. This feature allows Gemini to look at the drawings made by players and give hints to the Trouble Painter.

Gemini provides hints for the keyword Motocycle

This is how Gemini expressed the keyword motorcycle after looking at the picture.
It’s a small, swift machine that can slip through narrow alleys with ease. Quick and agile, it cuts through the wind, roaming freely wherever it goes.

6. Game Results

The victory conditions for each role are as follows, and you will be moved to the waiting room 15 seconds after the game ends.

Good Painter Victory

  • The Trouble Painter was found through voting, and the keyword was not exposed.

Trouble Painter Victory

  • The identity was not revealed.
  • The identity was revealed, but the keyword was guessed correctly.

Good Painter’s victoryGood Painter’s victory
Trouble Painter’s victory<br>for guessing the keywordTrouble Painter’s victory
for guessing the keyword
Trouble Painter’s victory<br>for not being revealedTrouble Painter’s victory
for not being revealed

Play video

Finish

This project was created with 7 team members from the 24th group of IT club YAPP.

YAPP 24TH DEMO DAY Winner ✌️YAPP 24TH DEMO DAY Winner ✌️

✔︎ Part 1. Trouble Painter - Drawing Mafia Game
Part 2. Create a real-time drawing game with Flutter

This project was open sourced and can be found at the Github link below.
👉 Flutter : Link
👉 Backend : Link

If you want to play Trouble Painter, please download it from the link below 🫶
👉 Android & iOS : Download Link

If you like our service, please vote for us at the link below 🫶
👉 Go cheer for the Gemini API Contest : Link

In the next article, I will share the development of Trouble Painter :)