next »

[Team Flow]

tldr; Bubbits is a Puzzle Bubble Royale planned to release on Steam and later on mobile, scroll to bottom for screenshot.

Introduction

Hi there. Thank you for taking the time to have a look at this Dev Log, I appreciate you. Around 5 years ago, I had an idea for a videogame. I am not a creative person so I rarely have any ideas to be honest.

The first time that I had an idea for a videogame was 12 years ago after having played a lot of Canabalt. I thought of a more in depth Endless Runner with a changing skillset which enables different types of obstacles. Fast forward 2 years and I released my first game called Run or Die on Steam, a few years later on mobile. It's not perfect by any means, but to this day a handful people around the world choose to spend money on this game and play it instead of playing one of the hundreds of thousands of free games out there. I appreciate that a lot and feel blessed.

5 years ago, I played a lot of Tetris - The Grandmaster 3. Lovely game! At my day job I was in Web Development building web apps for big corporations. Idea: Why not have a Battle Royale kind of multiplayer Tetris, that should work right? I found jstris. worked great, but lacked a little pizzaz in my eyes. Built a prototype, kinda worked. Then came the reveal Trailer for Tetris 99 for Nintendo Switch. Well, shit. That one had pizzaz and made my attempt absolutely obsolete overnight. I had a think. Can I do something different? Back in the 90s I played a lot of Bust a Move/Puzzle bobble on the SNES and then PSX with my family and my now late mum, it was one of her favorite games. Those childhood memories were more than enough to get me started rebuilding the gameplay from Tetris to Puzzle Bobble, and enough to keep me motivated throughout the past 5 years working on this project.

After conducting a search if any games like that exist today, I did find a bunch of Bubble Shooter like games, also official Bust a Move titles and a discontinued multiplayer version that existed some time ago but only in Korea. To be completely honest with you, after playing the latest official Bust a Move games on mobile, I felt like they did not put the same care into creating these games like they did for the PSX titles. As a fan of the franchise, that made me sad. And even more motivated to create something that me and my family back then would love to play.

A portion of development time has been part time after work, part time while struggling with health related issues, and full time. Like Run or Die, this is also a project with a small scope, but creating a multiplayer game as a team of one is a bold adventure to say the least.  

Tech

Bubbits is built using typescript web technology for the Client and the server and is planned to release on Steam first, later on mobile.

Client:

• Phaser 3 (Game Engine)
• Colyseus (Netcode Framework)
• Vite (Packaging)
• Capacitor + Electron (Packaging as native apps for Desktop and Mobile)

Server:

• Node
• Colyseus
• Express
• Redis
• Mongo DB

Bubbits

All major design decisions are driven by gameplay, not by monetization. That might be stupid, but it's the only way I can operate. No shade to games that work differently. The core gameplay is a tightly tuned Puzzle Bobble with a few special Bubbles but few distractions. The main game mode is a 2 Stage 25 Player Bubble Royale, all players playing at the same time against each other. When there are only 3 players left, the game shifts gears from the Group Stage into a separate Final Stage where the top 3 battle it out for the win. When i thought about how Tetris works and compared it to my vision for Bubbits, I wanted it to feel less like a straight up e-sport, and more like a fun time competing with other people for the win like Mario Kart. It's a bubble shooter, it's not formula 1.

I thought about ways to get there. However, I did not want to dilute the core Puzzle Bubble gameplay, but if possible add to the experience in interesting ways that fit into 2023 and beyond. The first and obvious way was having powerups to either enhance ones own game or hinder an opponent. No brainer. Done deal. Thinking of other things than that was more difficult. In the end, I came up with a second pillar of Group Stage gameplay, which is an event system. The Server can decide to start an event, which every player participates in. Some purely beneficial, others introducing additional challenges. It could be a simple rule change like the shot clock being a lot lower, or more elaborate changes like a game of Red Light, Green Light. In playtests, those events added variety to the core gameplay and made every round play a little different.

Monetization

Trying to be a multiplayer game from an unknown developer, being free to play is the only choice I see. I do not want to give advantages to players who spend money on the game. I might be deluded, but as of now my hope is to be able to make this work by selling cosmetics. I don't know if the game is good enough for that to work, but I am willing to try.

Aesthetics

I am a 90s kid. To this day I find SNES graphics to be special. I like how Nintendo games manage to have special appeal similar to works of Disney. Of course those are big names and I cannot manage to create something at that level of quality. But I can try, and that's what I do. The star of the show are the Bubbles. The amount of time I have spent working together with an awesome artist to create these designs and bring them to life has been. Well. A huge amount. Looking at them now makes me really happy. I hope they bring joy to you too. Overall I would like the art to be approachable, vibrant, colorful and fun but not in a condescending/stupid (it is a bit of a harsh word. i don't mean it in a harsh way, it's just my feelings speaking on that one) way like in some mobile games.

Customization

There all a variety of customizations players are able to to, from playfield backgrounds and outlines to special effects when sending bubbles to other players or KO'ing them and the soundtrack that plays in the final stage. All of these customizations are visible to other players while competing in the Royale mode which I find really cool!

Dev Log

Up to now, I have only talked about this game on the Phaser Discord and I am really happy to share this with all of you from this day on in here. If you have any questions or topics you would like to hear more about, feel free to reply and I will be happy to give more insights! Apart from that, I will use this Dev Log to talk about topics that I find interesting or special to this project.

E.g. how i rebuild the core gameplay 3 times to be purely math/geometry based so it can be run and validated on the server without having to spend a lot of processing power (nobody likes cheaters). How building a party queue system similar to League of Legends so you can easily play with friends is hard. How some special bubbles intruded core gameplay mechanics in more ways than I imagined. How finding a freelance artist that is willing to create and animate Bubbles took me a year. How a whale captured the hearts of my friends and I. How using Web Technology helped iterating very quickly, but also caused unimaginable issues in other places. How using Spine for animations is awesome and heartbreaking.

..and a lot more, stay tuned! If you really read through all of these ramblings, you are a legend anyway. Thank you so much. Now a quick peek into how it all started and how its going. Thanks again, have a nice day you beautiful humans.

Where we started


Where we're going


A few links:
Team Flow on Twitter: https://twitter.com/TeamFlowOfcl
Run or Die on Steam: https://store.steampowered.com/app/325150/Run_or_Die/
Run or Die on Android: https://play.google.com/store/apps/details?id=com.teamflow.runordie

[Team Flow]

Happy New Year guys!

Why not kick the new year of with some geometry in motion. At the end is a side by side video of the math behind the game next to the visuals. Basically, the whole game logic is now run completely separate from the visuals shown to the player and the visuals are just that, a representation of the actual data.

The first iterations of game logic code were pretty basic and close to what happens on the screen.

Classic anatomy of a shot

• The cannon is set to a certain rotation
• Calculate the angle of the shot according to the cannon rotation
• Create a Circle Bubble Object moving at a certain speed
• Move that Bubble every frame until it hits a wall or another bubble (classic 2d object movement)
• If it hits a wall, reverse x speed vector and keep moving
• If it hits a Bubble, calculate nearest free spot on the playfield
• Add the bubble to playfield and process the results

Issues:

• Non deterministic
• Frame rate and minor differences in timing of hitting and getting reflected off a wall can change the outcome of a shot
• Simulating a flight path like that frame by frame is expensive

To be solution:

• Fully Deterministic
• "1 Frame Simulation"
• Portable (needs to be replayed consistently on other clients)

I did not know if that is possible, so I just put my best foot forward and gave it a try. ~5 Iterations later and we have what you can see in the video below. Instead of simulating the flight frame by frame, we now do more math upfront. Mostly Line intersections and circle intersections.

There were a few interesting caveats with that approach. First of all, a line does not represent a flying circle. The line could pass through spaces where the circle could not. Solution: 3 lines. Next up: wall reflections. if the line hits the wall, the circle would already be 50% over the wall. Solution: More walls, moved to the inside by the circle radius. Last but not least: one of the 3 lines hits a circle already on the playfield, the flight ends. If all 3 lines hit (common), calculations need to be done to make sure that the anchor position really is nearest to where the actual last position of the flying circle would be.

Calculcating the result of a shot if the anchor position is known is a whole other topic. The basics are simple, but with different special bubbles and power up bubbles in play, that also got quite interesting!

It's not rocket science, but the hidden complexity of calculating the flight path like that was higher than I thought! Was a really interesting topic to get into. Now the flight path logic is completely deterministic, can be validated on the server in an inexpensive way (the shot result is known to the server before the actual bubble has landed in the playfield) and be reproduced on other clients without having to worry about frame times or desyncs. Hope some of you found that little talk interesting in any way!