# 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.

## 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]
[/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;
}

//Check
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);
else
cellX = Math.round((currentBall.x - 270 - 16) / 32);
//Check the bubble layout
if (cellY == 0 || able) {

//TODO: Finish game losing conditions
if (cellY == 9) {
winGame();
// 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 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];
}
[/source]

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

1. 1
2. 2
Rutin
21
3. 3
4. 4
A4L
15
5. 5
khawk
14

• 13
• 26
• 10
• 11
• 9
• ### Forum Statistics

• Total Topics
633737
• Total Posts
3013613
×