Game with physics like Box2d possible?

[lesne.st...@gmail.com]

Hello!

I'm about to create my first HTML5 game and wonder if MelonJS is the right game engine to use for it.

Basically I want to make a game like Orbit Breaker (http://www.notdoppler.com/orbitbreaker.php) where some objects are rotating and the main player either rotates with them or bounces off them when he hits them.

I already did the tutorial to get more familiar with it and went through some of the featured games in the gallery. I really like it so far! :) However, I couldn't find any game with mechanics similar to what I want to do.

Is it possible to do this with only MelonJS or do I have to /can combine it with another library (chipmelon?)? Or would you advice me to use another game engine for this type of game?

Thank you for any advice in advance. Really appreciate it!

- Lisa

[Jay Oster]

Hi Lisa,

For my first melonJS game, I used Chipmunk-js for 2D physics. It worked really well. I can't comment to Box2D, but I know it is also a popular 2D physics engine available for JavaScript.

If you are interested in checking out the work I did with Chipmunk-js, here's the latest "chipmelon" source: https://github.com/blipjoy/alienauts/blob/master/public/lib/cm.js (Last tested with melonJS 0.9.7) And you can get a copy of Chipmunk-js from their github project: https://github.com/josephg/Chipmunk-js

Finally, I have two games that use the above code, both with source code available:

• Neverwell Moor, a 16-bit-style RPG: Play online and source on Bitbucket.
  
• Alienauts, a 2D physics puzzle game: Play online and source on Github.

Your question about the game mechanics is more of a question that could be answered on the Chipmunk or Box2D forum, since the answer will relate to how you use the physics engine, and not with how the engine itself integrates with melonJS. We can help you out with the integration part. But I would have to defer physics-related questions to the appropriate forum.

Either physics engine can work with melonJS, but integration is not as easy as it could be. Chipmelon helps out quite a bit if you're using Chipmunk-js, though.

[lesne.st...@gmail.com]

Hi Jay!

Thank you a lot for your answer! You're right, it's a question about what the physics engine can do and not MelonJS.

So HOW can I integrate the phyiscs engine?
In your source files you have the original chipmunk file (cp.js) and your modified chipmelon file (cm.js). I'd like to have all functions of the physics engine, so how do I integrate them properly? The chipmelon file seems not to include all the functions of chipmunk. What do I need it for?

I'm sorry but I'm really lost here and your advice is very much appreciated.

Would the integration of Box2d be the same? I'm more familiar with it and would prefer to use that one to be honest.

[Jay Oster]

Hi Lisa,

I don't actually have any experience with Box2D, but there are probably similarities with Chipmunk. I'll try to explain what chipmelon is for, since that might be useful if you plan to integrate Box2D with melonJS.

The purpose of chipmelon (cm.js) is to synchronize the physics objects provided by Chipmunk-js with the game entities provided by melonJS. The melonJS engine cannot use the physics objects directly, so I wrote a thin synchronization layer, and some helper functions to get/creates shapes and bodies.

The synchronization works like this:

• A normal melonJS entity is created and added to the entity manager: https://github.com/blipjoy/alienauts/blob/master/public/lib/cm.js#L286-L299
• melonJS's game loop will call the update() method on the stepper entity, which in turn calls the cm `step` function to advance the physics simulation: https://github.com/blipjoy/alienauts/blob/master/public/lib/cm.js#L41-L55
• Now that we have the physics simulation updating every frame, we can create melonJS entities that will instantiate their own Chipmunk body and shapes as usual: https://github.com/blipjoy/alienauts/blob/master/public/js/entities/circle.js#L2-L49
• In the melonJS entity update() method, we synchronize its position with the Chipmunk body position: https://github.com/blipjoy/alienauts/blob/master/public/js/entities/circle.js#L51-L64
• And do the drawing as normal.

Chipmelon also has some other handy features, like creating static shapes for world geometry when a TMX map has been loaded: https://github.com/blipjoy/alienauts/blob/master/public/lib/cm.js#L310-L383 And a debug entity that will draw vector lines for all of the physics shapes: https://github.com/blipjoy/alienauts/blob/master/public/lib/cm.js#L173-L269

There are some funny things to keep in mind when synchronizing, like Chipmunk's Y-axis is inverted, so I've taken care to convert Y-axes and heights between the two engines.

That covers the most important concepts of chipmelon, anyway. You will probably want something similar for Box2D, especially the part that advances the physics space every frame.