Drawing Gameplay

This project integrates the popular drawing gameplay into TikTok Live to increase interactivity and viewer engagement. The main features are Gift-to-Draw interaction and Sketch Image coloring.

Comment

Inspiration

Inspired by famous multiplayer drawing games like 'skirbbl.io' and 'Gartic Phone', this TikTok live gameplay brings interactivity through drawing.

What it does

  • By adding a visual simulation (interactive artboard) to the stream, when users pass by the live screen, they will have an additional reason to pause scrolling and have a look at the live content. If users don’t like the creator camera, they might like the drawing content.
  • Allowing users to draw to the artboard after sending gifts creates a new communication method. Users can now contribute to the live content directly, and visually significantly through a purchased service (gift), which can be great for monetization.
  • This gameplay allows artists to create base sketches to draw on or allows them to demonstrate creative abilities to create awesome canvases live! This benefits both sides since artists can advertise their talents, while TikTok generates more user interactivity. This could open a new market for artists.

How I built it

I first learned to create a Live streaming service, then I tried to integrate it with Drawing Canvas!

Challenges we ran into and incomplete parts

  • WebRTC protocol: This is my first time interacting with this protocol. Along the way, I realized how it works and its limitations, which chaotically altered my coding decision. I tried many ways to stream the canvas, but it only worked out in the last hours.
  • The application currently isn't supporting new users joining an ongoing Live, as the existing canvas isn't loaded to their device.

Accomplishments that we're proud of

  • Nice and clean UI!
  • Functional Application!

What I learned

This project is such a valuable opportunity for me to learn new skills: Next.js framework, live streaming integration, authorization, canvas manipulation, and deployment. I appreciate the problem-solving time I spent to bring this idea to implementation, although the project is not perfect, I'm proud of it.

What's next for Drawing Gameplay

  • I'm using LiveKit as a WebRTC server. LiveKit brings a lot of limitations, which I cannot tune into a good solution for my project. I want to try using something more flexible.
  • I want to improve the canvas's artistic aspect. Paintbrush patterns and new gifts are in the queue!!!
  • I want to implement the sketches store, which will allow artists to advertise or sell their works there. I also want to create an optimal solution for artists who want to stream their high-quality works.

Built With

Share this project:

Updates