Message in a Bottle

Inspiration

The idea behind Message in a Bottle came from the romanticized concept of messages drifting across the ocean, connecting strangers in unexpected ways. We wanted to bring that mystery and serendipity into a digital space, creating a game where players can send and receive anonymous notes, forming fleeting yet meaningful connections.

What it does

This is a pixel-art web game where the player/user is set on a deserted island. Players can move around the island and interact with a their desk to write and send notes into the sea. You will also recieve random notes from other players, and it will drift into your island and land into your mailbox. Upon checking your mailbox, the message could be anything - thoughts, stories, riddles or even secrets - you get the choice to send the message back to another player or reply to the message. Creating an ever-evolving shared experience. You may even get your own note passed back to you with all the reply history!

How we built it

We built the pixel arts aesthetics and game using Phaser, a HTML5 game framework, allowing smooth 2D interactions and animations. All pixel art assets and UI was drawn by our team using Aseprite. Along with Phaser, the frontend was built with React and TypeScript, providing a responsive and maintainable UI. On the backend, we used Django to hangle message storage and retrieval, WebSockets were used for real-time message exchange. The entire system was containerised with Docker for easy deployment and scalability.

Challenges we ran into

First time using Aseprite & pixel art: Our main designer had no prior experience with pixel art or Aseprite, so creating these assets took practice and iteration
First time using WebSockets: Our backend programmers learned WebSockets for the frist time. Implementing real-time message exchange required learning WebSockets from scratch and troubleshooting unexpected behaviors.
First time using React & TypeScript: Our frontend programmer learned React and TypeScript for the first time
Dockerization issues: Setting up a properly containerized environment and ensuring smooth communication between services took multiple debugging sessions, took an entire day.
Backend challenges: We ran into issues getting Django and the API to work correctly with our frontend, especially when integrating WebSockets and managing message storage.

Accomplishments that we're proud of

Creating a functional and engaging multiplayer message-exchange system
Designing the web game and UI in an art style that complements the stranded island and 8-bit pixel game theme
Building a unique social experience that fosters connection between anonymous players

What we learned

First timing tools: WebSockets, Docker, React, TypeScript, Aseprite, CapCut
How to refine UI/UX for a pixel-art game
The importance of allocating tasks to team
Communicating in an efficient and effective manner

What's next for Message in a Bottle

We would love for Message in a Bottle to be an idle background experience for players to keep the game open in the background and occasionally receiving messages like real drifting bottles. We'd also like to introduce an idle fishing or survival mechanic to make waiting for messages more interactive. There is also potential to expand to more islands, easter eggs and secrets to encourage exploration, as well as seasonal events and visuals based on real-world holidays. Player customisation would also allow players to personalise their character or message style Players could also travel between different islands, each with its own vibe and community. Beyond text, we also want to introduce drawings, and other creative formats for messages.