Jump to content
  • Advertisement
Sign in to follow this  

Creating a "Frozen Bubble" clone

This topic is 2305 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

[source lang="jscript"][/source]
I've got most of the logic worked out, actually all of it.. minus bubble collisions. You can see the illustrated problem, here: [media]

Ideally, it should stick to the bubble, probably taking the angle into account. I can see my approach is all wrong as it fails in many interesting ways. (Use BoudingSpheres instead of Rectangles is probably a good start)

The game in question be cloned can be found here: http://www.ventoline.com/frozenbubble/

I've got the following code started:

[source lang="jscript"]//Counstruct our bounding rectangle for use
var nX = currentBall.x + ballvX * gameTime;
var nY = currentBall.y - ballvY * gameTime;
var movingRect = new BoundingRectangle(nX, nY, 32, 32);
var able = false;

//Iterate over the cells and draw our bubbles
for (var x = 0; x < 8; x++) {
for (var y = 0; y < 12; y++) {
//Get the bubble at this layout
var bubble = bubbleLayout[x][y];
var rowHeight = 27;

//If this slot isn't empty, draw
if (bubble != null) {
var bx = 0, by = 0;

if (y % 2 == 0) {

bx = x * 32 + 270;
by = y * 32 + 45;

} else {
bx = x * 32 + 270 + 16;
by = y * 32 + 45;

var targetBox = new BoundingRectangle(bx, by, 32, 32);
if (targetBox.intersects(movingRect)) {
able = true;




cellY = Math.round((currentBall.y - 45) / 32);

if (cellY % 2 == 0)
cellX = Math.round((currentBall.x - 270) / 32);
cellX = Math.round((currentBall.x - 270 - 16) / 32);
//Check the bubble layout
if (cellY == 0 || able) {

//TODO: Finish game losing conditions
if (cellY == 9) {
// cellY++;

//Safety check
//if(cellX == rCellX && cellY == rCellY && cellY > 0)
// return;

//Assign the grid
bubbleLayout[cellX][cellY] = currentBall;
ballvX = 0;
ballvY = 0;[/source]

Could anyone point me in the right direction? Edited by Vaughands

Share this post

Link to post
Share on other sites
I'm working on a Frozen Bubble/Puzzle Bobble clone as well, and I already have the basic game logic down pat. Now I'm just in the phase of checking for more bugs, adding different game modes, etc. Did you happen to look at the source code of Frozen Bubble for clues? There are ports available that are open source, like the Android one on Google Code. Although I know of these, I chose not to port the code and instead start from scratch to challenge myself.

The next step I took after I was able to put the bubbles in a grid is to make the bubble to be fired an object separate from the grid/array of bubbles. It seems that your movingRect does this, or at least visually represents the fired bubble. The bug seems to be when you touch one of the same color, since only the non-matching bubbles are sticking.

On each update you need to do some screen picking of the moving bubble to any bubble space on the grid and find the closest space that "snaps" closest to it. This is what my picking function looks like (in C#)

[source lang="csharp"]
public void Pick()
// Get the radius of the hexagon surrounding the bubble
// bubbleSize is diameter
int offset = bubbleSize / 2;
int row = (int)((currentBubble.position.Y + offset - position.Y) / bubbleRowHeight);
int col = (int)(currentBubble.position.X - position.X + (1 - row % 2) * offset) / bubbleSize;

// clamp rows to limit number range
row = (int)MathHelper.Clamp(row, 0, MAX_ROWS - 1);
col = (int)MathHelper.Clamp(col, 0, MAX_COLS[row % 2] - 1);
picked = bubbles[row][col];

Note that my picking function is sort of crude- bubbles in such an arrangement follow a hexagon grid, and so for best accuracy, pick in a hex grid, but mine is an approximation and not true hexagon picking. It's still pretty accurate, so I chose to save some time coding here.

So first, you move the bubble, then you pick the closest spot on the grid. From the picked spot, inspect its neighboring spaces to see if there's at least one bubble there. If there is, save the picked spot for later use- we have a bubble to stick to. If you do the steps in this order, the picked spot is guaranteed to be empty because you cannot collide into a bubble before you "collide" with an empty space next to the bubble.

In order for the bubble sticking to look natural and not have it "jump" to the picked spot, keep moving the bubble until it actually collides with an exiting bubble. I use circle-circle collision testing, so it's necessary for the bubbles to information on their true location on the screen and not just information on its row and column. When a collision is found, then replace the empty picked space that we saved with the moving bubble (I just copy its color ID- in my code, 0 means empty). Reset the moving bubble and start again. Edited by CC Ricers

Share this post

Link to post
Share on other sites
Sign in to follow this  

  • Advertisement

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!