Sketchy Studios

Inspiration

During the COVID-19 pandemic, we all found that we were playing more online games - whether this be with friends over voice chat, or even using them as ‘icebreaker’ activities to get to know new people we work with. Although we liked games like Gartic Phone and skribbl.io, we wanted to create a more fast-paced game that fostered more interaction, while also maintaining the creative aspect of the games we loved. This resulted in the creation of Sketchy Studios

What it does

Sketchy Studios is a live, interactive web game where you can create a private lobby for your friends to join. You can customize your avatar, give yourself a nickname, and then start the game! Once started, everyone enters the drawing period where you can draw anything you want - it can be complex, abstract, or simple — depending on how hard you want the game to be! Then, the "describer", a randomly assigned player, will receive one of the drawings. They will describe the drawing for the other players, and the other players must try to recreate it on their own canvas. When the 2 minutes is over, the describer chooses the drawing that most closely resembles the original drawing as the winner.

How we built it

We built our project with React and the React-bootstrap library to create a clean, user-friendly interface that is intuitive to use and pleasing to look at. We also created our own custom canvas component and integrated it with React for easy-to-learn drawing gameplay.

As for our backend, we used Socket.IO for low-latency, real-time communication between the server and client to help friends connect and have fun no matter where they are. We used this in conjunction with Node.js and Express for our server.

Challenges we ran into:

We initially started the project using p5.js (a powerful canvas library) for our drawing component, but it was challenging since it could not be directly implemented with React. After running into game-breaking issues with the library, we made the hard decision to completely scrap our work with p5.js, instead building our own canvas component from scratch, which ended up working very well.

Handling the backend and other game state mechanics was difficult as well. Ensuring that every client was seeing the right information depending on what their role was (i.e. describer or drawer) and transitioning between multiple game states for every client was a major hurdle in the development process. It took a lot of debugging and trial-and-error, but we resolved all of these issues in time to have a functional game.

Accomplishments that we're proud of

Overall, we’re proud of the final look! We’re happy with the product and having completed a fun, interactive game that started as a basic idea when we first started. We’re especially proud of our pretty user interface, and the real-time aspect of the game where friends can connect with each other, anytime, anywhere!

What's next for Sketchy Studios

Although the basic game is finished, there's still a lot of work to be done on Sketchy Studios. Our priority right now is to add more drawing options for our canvas component (e.g. flood fill, undo, shape and line tools, etc) for more avenues of artistic expression. Later on, we want to use dedicated servers to host our game online, and we want to create a public lobby list and an in-game chat system to allow strangers to play our game with each other as well.