Bubble game, day 2: Matching and picking

Another day has gone, and I have made much progress with my game. I have implemented some very accurate (but not completely perfect) bubble picking, as well as the ability to match like-colored bubbles and clear them from the board. Also, I’ve made some nice bubble sprites as a head start to give the graphics a more professional appearance. Even though some important features are still missing, the game is already looking very playable. To add some more flair, I made the bubble grid move which tested the new features really well.

Bubble Picking

First, I wanted to figure out how to pick the bubbles individually. I did this so that I get to testing the color matching algorithm sooner than later. This way I can just move my cursor to any point on the screen and place a bubble in the closest empty area near it. Also, this would be a good foundation for a “puzzle editor” that I will no doubt work on later to easily make new levels.

Picking items in a square grid is very straightforward to figure out, but these bubbles are laid out with rows overlapping slightly and alternating positions on even and odd rows. The best way to look at them is that they are closely packed in a hexagonal grid. Imagine a hexagon tightly enclosing each bubble, and the hexagons are all next to each other in a repeating pattern.

Figuring out the picking system for hexagons actually stumped me for a while. I decided to cheat a little and take a shortcut. The picking system isn’t 100% accurate but its inaccuracy is almost unnoticeable and still feels intuitive. Due to the tighter packing, the ends of the bubbles overlap a bit in rows. Since the bubbles are next to each other at 60 degree angles we can conclude that the vertical distance between each row is diameter * sqrt(3). Then just take the Y location of the mouse cursor to determine what row it’s on, and then clamp the values if you go off the edge. The column is determined whether it’s an odd or even row, offsetting the position by the radius where necessary.

Matching the Colors

There are many coding tutorials to make puzzle games that use the “match 3” mechanic, but I chose not to use them and code it from scratch. Yeah, I know this is a 7-day challenge, but was pretty confident in knocking this one out quickly. I had already figured out that I would be using a recursive function, and just returning the total number of matches in the function seemed to be the most logical way.

At this point, using an array of numbers to represent bubbles wasn’t enough anymore, so I made a smallish Bubble class to store row and column position, bubble type (color) and a general purpose bool flag. This flag would be useful for doing all sorts of checks in the game loop, whether to clear matching bubbles or do something else like prep them during changing gameplay states. When a new bubble is added, it checks its neighboring spaces (up to 6) to see if any bubbles with the same color exist. Any matches are flagged and added to a local list, and after all neighbors are checked, it start the process again with the found matches, moving on to another bubble.

When the last color matching step is done, the game needs to “clean up” the bubble area. This means, if at least three matches are found, it removes all the flagged (matching) bubbles. In reality, no Bubble objects are removed, they are simply reset to a “neutral” type of 0 (no bubble) and the flag is reset to false. It took a while to get the results I wanted, since I also optimized the code a bit after adding the Bubble class.

New Sprites and Movement

After being satisfied with the various short tests I did, I made some new bubble sprites. Although I’m not a great artist, I’m pretty familiar with most of the Photoshop tools and was able to make some shiny new bubbles just with some reference images. I don’t want to end up borrowing/remixing a ton of free game art, as I want to make the game truly “mine” and avoid dealing with the rules of how to use the art. The new sprites already make the game a lot easier to look at and play.

I feel that’s good enough progress for one day, but then I thought “does my stuff hold up with moving bubbles?” The functions to draw and pick bubbles use an offset location in calculating where the bubbles are. I made the offset’s vertical position change each frame with a basic sine function so the whole board smoothly moves up and down. The cursor responds accordingly- it knows where the bubbles are at any frame and picks the right spot, and the newly added bubbles move along with it.

That concludes day 2 of my game development. Now it’s time to make it more action-y, by adding a launcher and physics for moving objects!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s