• FEATURED

View more

View more

View more

### Image of the Day Submit

IOTD | Top Screenshots

### The latest, straight to your Inbox.

Subscribe to GameDev.net Direct to receive the latest updates and exclusive content.

# Creating a "Frozen Bubble" clone

Old topic!

Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.

1 reply to this topic

### #1Vaughands  Members

Posted 24 August 2012 - 12:46 PM

[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: http://www.youtube.com/watch?v=klNASKFTw8s&feature=youtu.be

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, 24 August 2012 - 12:54 PM.

### #2CC Ricers  Members

Posted 24 August 2012 - 02:22 PM

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, 24 August 2012 - 02:26 PM.

New game in progress: Project SeedWorld

My development blog: Electronic Meteor

Old topic!

Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.