Ink Smash

Inspiration

A LinkedIn post reminded our team of our childhood and one lesson that is all too easy to forget... imagination is boundless! Yet, traditional games often limit how we can truly express our imagination. We wanted to break that mold. Inspired by the childhood joy of drawing our own characters and creating endless imaginary adventures, we wanted to capture that freedom and turn it into a dynamic, competitive experience. One of our team members, reminiscing about their childhood sketches and imaginary battles, inspired us to create a space where drawings come to life, evolving based on the player’s creativity.

Emotional Impact: Creativity often fades as we grow up, but we wanted to reignite that spark of uninhibited imagination. Desire for Interaction: In today’s fast-paced world, finding a way to reconnect through creativity felt essential. Challenge of Expression: Instead of static gameplay, we imagined a world where you could visually express your ideas in real-time and battle them out with friends.

Thus, Ink Smash was born, a game where every drawing has the potential to be anything you can imagine, with strategies as unique as the players themselves.

What it does

Ink Smash lets players bring their imaginations to life in a real-time, drawing-based game that transforms hand-drawn characters and powers into a thrilling battle experience:

1. Room Creation & Battle Setup: Players join a room to battle with a friend.
2. Character Creation: Each player draws a unique character on a digital canvas.
3. Ability Design: Players create abilities to counteract their opponent, drawing new powers at every turn.
4. Turn-Based Combat: With each turn, players deploy their drawn abilities to attack, defend, and strategize.
5. Strategic Choices: Players can only equip two abilities at a time, adding a layer of strategy in managing offense and defense. Additionally, players should keep in mind the opponent's abilities! They may change the effectiveness of an attack...
6. Last Standing Wins: The game continues in turns until only one player remains victorious!

How we built it

To bring Ink Smash to life, we combined various technologies to create a seamless, interactive experience:

• Canvas Drawing: We utilized p5.js for a dynamic canvas where players draw their characters and abilities.
• Backend Development: The backend server was powered by Next.js, handling room creation, player synchronization, and game state.
• Frontend Framework: React was used for the user interface, providing an intuitive, responsive game experience.
• AI-Generated Descriptions: With OpenAI's GPT-4o-mini, we dynamically generate unique character descriptions and adapt abilities based on player drawings.
• Testing and Exploration: We experimented with models like Meta's Animated Drawings to explore potential animations, though we eventually moved away from it due to reliability issues.

Challenges we ran into

Building Ink Smash brought its own set of challenges:

• Client-Server Syncing: Ensuring smooth, real-time communication between clients requires a robust backend and efficient data handling.
• Session Management: Balancing seamless gameplay with session stability was challenging and required continuous testing and optimization.
• AI Model Selection: Experimenting with different open-source AI models was insightful but highlighted limitations in existing technology for our specific needs. So, we decided to stick with GPT-4o-mini as the cheapest and most powerful alternative.

Accomplishments that we're proud of

We were able to create a custom client-server setup, tackling complex issues like syncing and data handling. Additionally, we were able to create integrated drawing-based gameplay with real-time strategy and character evolution, which felt like a rewarding gameplay loop we actually would play ourselves! Finally, we learned a lot more about the world and the power of open-source models. Drawing inspiration from various projects allowed us to push the boundaries of our concept and realize what it could become.

What we learned

This project gave us invaluable insights into both technical and creative realms:

• Full-Stack Development: From setting up a server to managing real-time interactions, we developed a well-rounded understanding of web and game development.
• AI Exploration: Trying out multiple AI models expanded our awareness of the potential and current limitations of animation and generation models.
• Balancing Features with UX: We learned the importance of simplicity and user experience, ensuring that gameplay flowed smoothly while retaining complexity in strategy. This was a tricky balance to find, but we were able to find a good middle ground while keeping it mobile-friendly!

What's next for Ink Smash

Our vision for Ink Smash is to create an immersive, boundless world of creativity:

• Advanced Customization: Expanding the ability to create more intricate powers, add layers of adaptability, and enhance character traits.
• Enhanced Animations: Custom animations developed to make characters more expressive and combat more visually engaging.
• Latency Reduction: Further optimizing the game’s performance for smoother, faster interactions.
• More Game Modes: Introducing new modes and interactive elements to encourage creative play and discovery. Ink Smash is just the beginning of bringing imagination to life in gaming. We look forward to making it a go-to experience for everyone who wants to recapture the joy of creating and playing in a world uniquely their own!

Built With

• gpt-4o-mini
• nextjs
• openai
• p5.js
• typescript