From bottom 10 to top 10 in 6 years - Bubble Burst

From bottom 10 to top 10 in js13k games game jam

I've been part of the js13kgames game jam every year since 2019, along with other occasional game jams. You could call me a seasonal game jammer. js13kgames is a competition where you have to create a game under 13KB in 1 month. I started with a simple game in 2019. As an experienced front-end developer, I thought snagging a "free" t-shirt for the top 100 games would be a piece of cake.

After the game jam ended, my confidence took a serious hit. I was shocked to find myself in the bottom 10 among so many impressive games. This humbling experience was a wake-up call, showing me just how much I had to learn. No t-shirt for me that year.

Breaking into the Top 10

It was an eye opener, and I've kept improving my rank year after year since then. It took four years, but in 2022, I finally cracked the top 100 and earned that coveted t-shirt. This year, I achieved my best result yet. My game, Bubble Burst, secured 9th place overall and 6th in the mobile category. (You can play it here.)

What's in This Post

In this post, I'll share the strategies and lessons that got me from the bottom 10 to the top 10. I'll write about how I made Bubble Burst, and key learnings. Whether you're a fellow game jammer or just curious about the process, you'll find valuable insights here, including tips for success and common pitfalls to avoid.

If you're short on time and just want the quick tips, feel free to jump to the "How to get a good rank" section. Otherwise, let's dive into the full story of how persistence, learning, and creativity can lead to significant improvement in game development.

CoPilot, my friendly AI assistant

I won a year's subscription to GitHub's CoPilot from a previous game jam. Excited to test its capabilities, I decided to use it while developing Bubble Burst for the 13th annual js13kgames game jam.

CoPilot is an AI assistant that integrates directly into your IDE (I use Visual Studio Code). It offers autocomplete suggestions and can generate code based on prompts. It even has a chat function similar to ChatGPT, but with the added benefit of considering your existing code when offering suggestions. While I'm focusing on CoPilot here, it's worth noting that other AI assistants can likely provide similar benefits to your development process.

Time-Saving Prompts: Examples from Bubble Burst Development

I'm sure CoPilot saved me countless hours of development time. I could simply ask it to create functions, and when I knew what I needed, the process was remarkably smooth. Here are some of the prompts I used:

• Create a Spring class
  • General physics with points, the stiffness and length between them
• Connect a list of points together to create springs. Connect the first point with the last point of the last spring to form a complete circle
  • Create the bubble
• Create a function that checks if a point is inside another shape or polygon
  • Check for collisions
• Create a function the finds the closest point to one of the edges in a polygon
  • I used this to figure out where to move the point if there's a collision
• Use the Canvas context to draw a circular shape
  • CoPilot can help set up all the canvas context function calls. I don't need to look it up in the documentation

The Lego Analogy: Building Code with AI Assistance

Using CoPilot feels like building with Lego. You ask for a piece of code and build it into your project where it fits. For a part-time game developer like me, the time saved is invaluable. It allows me to avoid burnout and even find time to play games, rather than constantly writing and thinking about code.

CoPilot's Strengths and Limitations

However, it's crucial to understand that CoPilot doesn't write the entire game for you. You still need to know what you want and how to structure your game. Relying solely on CoPilot won't get you far. Also, the generated code isn't always perfect. Sometimes, writing code yourself is the better option.

Key Takeaways: Effective Use of AI in Game Development

CoPilot (or any AI assistant) is a powerful tool, but it's most effective when combined with your own skills and creativity. The key is to use it as a complement to your development process, not a replacement for your expertise.

About Bubble Burst and the inspiration behind it

Bubble Burst is inspired by the physics of Jelly Car.

I wanted to know more about how soft body physics work. The developer behind Jelly Car actually created a video about it. While he doesn't provide detailed implementation instructions, the video explains the general concept, which was enough for me to understand how I could create my own version. Here's his video:

Adapting to Constraints

I quickly realized it would be impossible to create a fully functional soft body physics engine under 13kB in one month, even with the help of AI. I therefore decided to focus solely on the balloon, which eventually evolved into a bubble.

The One-Button Challenge

Beyond soft body physics, I wanted to create a game playable with just one button or touch. My initial vision was a "Flappy Bird"-like game with an inflatable/deflatable balloon.

From Prototype to Discovery

My first prototype connected springs to form a ball, with added gas for pressure. However, it kept moving and spinning uncontrollably - not quite what I had in mind. Even CoPilot couldn't help me fix it.

Here's a video from my fist prototype. I connected springs to form a ball, with added gas for pressure. However, it kept moving and spinning uncontrollably, not quite what I had in mind. Even AI couldn't help me fix it.

But this "bug" led to a beautiful feature. The balloon's spin caused it to crawl on floors, cling to walls, and even stick to ceilings. This happy accident became the core mechanic of my game, transforming the balloon into a bubble.

Embracing the Unexpected

I threw away the Flappy Bird idea, and thought of other ways to incorporate the sticky behavior to some interesting gameplay. I designed levels where the bubble had to navigate obstacle courses. I had to find a good balance of the player being in control, and the environment helping (or not helping) the player.

Rapid Prototyping and Community Feedback

Within a week, I had a playable prototype. The js13k community provided invaluable feedback. Players didn't understand how to control the bubble. How does the control work? How do I control the bubble?

The next three weeks were dedicated to improving controls and clarity. I redesigned levels to naturally teach mechanics and added short, instructive text within the levels themselves such as "Attach to floor to go ->", and "Hold to go Up."

Towards the end of the jam, I used Poki's Playtesting feature to observe 10 players. The results were eye-opening but initially disheartening. Most players quit within 30 seconds, and all avoided the ceiling - a crucial game mechanic.

The Power of Playtesting

Towards the end of the jam, I used Poki's Playtesting feature, where the game is exposed to 10 players giving me gameplay video recordings. I have to admit, the results from the playtest were useful, but also demotivating. I had one player playing the game for 2 minutes, but the rest gave up in 30 seconds or less. From the recordings, all players avoided the ceiling. I understood that the controls still weren't easy enough to understand.

Something that is seemingly obvious for the developer is not obvious for the player. I made a few more levels with easier difficulty to further help players understand that they could also attach to the ceiling.

The key takeaways are

• Ask for feedback early. Ask the community, friends, family, anyone.
• Make the game easy. Especially the first few minutes of gameplay
• Adapt, and don't aim for perfection

Decentralized Challenges

I've always been keen on seizing opportunities, especially when they involve potential earnings. The decentralized category in game jams often has fewer participants, making it an attractive option. While the rewards are nice, the real value lies in exploring web3 technologies.

The Decentralized challenge offered four categories

• Create a game that makes use of NPCs
• Interact with the Avalanche blockchain
• Implement Thirdweb TypeScript SDK
• Submit your entry to the Arcadia platform

Though I submitted my game to all four categories, my main focus was primarily on Avalanche and Thirdweb.

The Thirdweb SDK is enormous in the realms of 13KB games. We cannot include it in the build, but we are allowed to load the SDK at runtime as an optional feature for players to enjoy. Here's how you can import it at runtime.

I looked for existing contracts on Avalanche, to see if any were suitable for my game, but without any success. I decided to create my own NFT smart contract using the ERC721 standard. Here's the contract details.

Deploying the contract on the Avalanche mainnet was a learning experience.

• I had to invest in some AVAX to actually deploy the contract.
• It costs roughly 2.3USD (in gas fees) to deploy a contract.
• It ended up costing me 10USD to get the contract in a working state, because I had to deploy new contracts for each change I made. I couldn't just update the existing contract.

The contract has 3 NFTs, and only 3. Here's an example of one of them

NFTs as In-Game NPCs

I own all 3 NFTs, but since the contract follows the ERC721 standard, I can easily transfer them to anyone. While writing this blog post, I actually went in and created a listing on Open Sea. You can buy a unique NFT for a modest amount of 10 AWAX.

Each NFT in my contract serves as an NPC in the game, offering the bubble character a unique makeover:

• Purple power
• Yellow power
• Green power

I wanted to add something more exciting that changed gameplay with additional abilities. However, my energy was running out and I didn't have that much space left to add these features.

Lessons Learned

Creating smart contracts turned out to be simpler than I expected. There are templates available, which takes away all the tedious work, and I can focus on the main functionality of the contract. This experience made me think of new ideas and opportunities as a game developer.

I can use the same tech on my web page and games. For example, the player can create levels in BubbleBurst, mint levels as NFTs, and share them with others. I can also create my own economy on top of existing chains, and let the player buy in-game items or similar with different types of crypto currencies. There are many ideas to explore.

Competition Results

My efforts paid off.

• 1st place in the Thirdweb challenge (500 USDC)
• 2nd place in the Avalanche challenge (300 USDC)

Using Thirdweb was a breeze, providing an excellent interface for integrating blockchain technology. I will try to incorporate this technology into my future projects, and my existing home page.

How to get a good rank

From bottom 10 to top 10. What should be considered? What should be avoided? I'll compose a list of what I have learned over the years.

Understanding the Rating System

The rating system consists of 6 main categories:

• Theme
• Gameplay
• Audio
• Innovation
• Graphics
• Controls

Participants can give up to 5 points in each category. It's important to note that voting can be subjective: Sometimes, a game that "feels" good often scores higher across all categories. For example, Ghosted (3rd place in 2024), scored 3.28 in audio despite having only (good) sound effects and no music.

We therefore need to create a cohesive game where all elements work well together, regardless of the individual categories.

Do's:

• Plan Wisely: Sketch out your game concept and core mechanics before coding.
• Start Early: Begin development as soon as the theme is announced. This allows time for early feedback.
• Focus on Core Gameplay: Prioritize making your main game loop fun and engaging.
• Polish Your Game: Spend time on visuals and sound to make your game stand out. I usually focus on this towards the end of the game jam.
• Learn from Others: Study successful entries from previous years.
• Make the game easy: Players should grasp how to play within 1 minute (the sooner, the better). Most players don't read descriptions.

Don'ts:

• Don't Overcomplicate: Avoid feature creep; stick to your core concept.
• Don't Ignore the Theme: Ensure your game aligns well with the jam's theme. (Excellent games can still rank high, but the theme can shift the rank considerably. For example, Dr1v3n Wild ranked 8th overall, but got a low score, 1.9, on Theme.)
• Don't make the game difficult: You've played your game for hours, but other players are just starting. What's easy for you might be challenging for others.

Creating a successful game for js13kgames is about balancing various elements. Focus on making a cohesive, engaging game. Polish is important, but core gameplay should always be your priority. And remember, what seems obvious to you as the developer might not be clear to players, so always prioritize user experience.

How Bubble Burst did in each category

Bubble Burst got 40 votes, and here are the detailed statistics for each category:

• Theme 3.10 (rank 40)
• Innovation 4.47 (rank 1)
• Gameplay 3.88 (rank 15)
• Graphics 3.27 (rank 70)
• Audio 3.70 (rank 16)
• Controls 3.55 (rank 23)

My total score is 21.98, ranking me 9th overall

Final Thoughts:

Improvement takes time. Each jam is an opportunity to learn and grow as a developer. Stay persistent, be open to feedback.

Here are some motivational results from my past 6 game jams. It started with bottom 10, and now I'm in the top 10. I won't stop before I take gold. I look forward to be competing and making games together.

• js13kgames2024 - Bubble Burst (ranked 9/188)

• js13kgames2023 - Samurai Sam (ranked 41/163)

• js13kgames2022 - Hang by a Thread (ranked 31/200)

• js13kgames2021 - Kurve Space (ranked 136/204)

• js13kgames2020 - Black Jack 404 (ranked 157/200)

• js13kgames2019 - Circle Back (ranked 194/200)

Don't hesitate to reach out via my contact form, or 𝕏@ReitGames. I'm here to assist you on your game development journey. You can also leave comments directly on this blog post via the discussion thread below.

Consider sharing this post and following me on 𝕏@ReitGames. Subscribe to my newsletter to get notified about new posts about game development.

Happy coding!