Create a Flash prototype of The Moops – Combos of Joy

Did you play The Moops – Combos of Joy?

It’s a cute physics game we can build a prototype in a few minutes (don’t worry, Plants Vs Zombies fans, as next step is about to come).

Let’s see game’s features:

* It’s a physics game so we are using Box2D to create it.

* The player fires a ball with the mouse. The direction can be decided according to mouse position, but power can’t. Player fires balls with the same, predefined speed.

* A series of shapes “fall” down from the top of the stage. Actually they don’t fall because there is no gravity in the game. Let’s say they move from top to bottom at a constant speed.

* When the ball hits a square, the square reacts according to physics, changing its direction and speed, but the ball does not exactly follow physics rules as its speed never changes.

Obviously there are more features in the original game but at the moment we’ll see these ones. Since it’s a long time we don’t deal with Box2D, I am using a line by line approach to explain the code.

This is the script:

Let’s see how does it work:

Imports the required Flash libraries. We are using the mouse to fire the ball and a timer to add new shapes.

Imports the required Box2D libraries.

word will contain the physics environment itself. The first argument of the b2World constructor represents the gravity, which in this game is disabled, as you can see from the (0,0) vector.

worldScale is the amount of pixels used to represent a meter. Refer to Understanding pixels and meters with Box2D for more information.

This is the main function. We start the timer (refer to Understanding AS3 timer class for more information), we setup all listeners and we call debugDraw function.

This is the function:

Basically we are using the Box2D built in API to represent the world on the stage. Refer to Understanding Box2D debug draw for more information.

This is the function triggered by the timer event. It simply calls addBox function. Its arguments represent the x and y origin of the box, and the size, in pixels.

addBox function adds a box to the world. Its basics are explained at Box2D tutorial for the absolute beginners, but I want you to focus on the last line.

SetLinearVelocity method gives the box a linear velocity according to its vector argument.

When the player clicks, we have to determine the angle of the mouse pointer relative to the bottom-left corner of the stage, to fire the ball.

From the angle, we can calculate the horizontal and vertical velocity of the ball.

Then we call addball function, which works in a similar way as addBox.

Again, look how I set the linear velocity of the ball.

update function is the core of the script as it handles the physics simulation at every frame.

Nothing new here, just refer to the Box2D tutorial for the absolute beginners for general concepts and to the basic Filler engine to keep the ball moving at a constant speed.

The rule is: at every frame, check ball’s velocity with GetLinearVelocity method and if the length of the vector representing the velocity is different than 20, then adjust it.

And this is the result:

Click with the mouse on the stage to fire the ball.

Download the source code.

Next time, the same collision management you see in the original game.

  • I´ve tried to download the resources to test it, but not happens. There´s a lot of problems about Box2D packages and syntax.

    Can anyone help?

    See you

  • Box2D v 2.1 right? Are you using BorisTheBraves version?

  • Emanuele Feronato

    you have to use Boris the Brave’s version, that’s included in the source code

  • Everton Denis

    I need help. How to create a slingshot with Box2D?(yes, like a angry birds…)
    I’m looking for tutorials on his blog, forums, but can not find anything.
    I used this tutorial (http://www.emanueleferonato.com/2009/09/24/pumpkin-story-prototype/) to study but without much progress.

    thanks!

  • This looks interesting – but tbh i cant wait for the next part of Plants Vs Zombies :D

  • MC

    Plants Vs Zombies ftw!

  • Hi.
    I’m the programmer of Moops and I’m very glad to see you wanted to dissect the game we made :D

    Just to clarify: The game does have gravity, but the falling pieces have a very high linear damping, and the ball does change speed if it hits several faces, it has zero restitution and a very low mass value.

    Cheers!

  • Hi Emanuele, it’s great that you are cloning The Moops! Would you consider mentioning who made the game?

    Kudos!