Liquidfun JavaScript - LFJS - [behavior], devlog, ideas, suggestions

  • Liquidfun JavaScript (LFJS) is a physics behavior based on Box2D v2.3.0 with added particle effects by Google (original sourced from github).

    This is a webassembly plugin that is getting a bit of colludium flavor in the ACEs: it'll have more features than the standard physics plugin and will also give you more control over particles than the standard LFJS files on github. Learning to use Emscripten with box2d was fun, sort of...!

    Here's an example of where I'm at so far (i5 laptop & intel HD4000).


    I'll update this list as more features are completed:

    - Variable or fixed timestep. Select the world step rate to be not in sync with the monitor. Thus high refresh rate monitors don't cause massive cpu use. I recommend using 50 Hz (like Unity) but there are other choices available. Solid objects move the same at all fixed timestep rates, but particle systems behave differently at the different update speeds (just for info).

    - World Step Trigger. All forces and impulses should be applied under a World-Step trigger condition because they accumulate. This happens in normal Physics but is more likely here. For example, if you select a world steprate of 30 Hz and have a 60 Hz monitor, then each event sheet will try to apply impulses twice before the world steps.

    - AABB particle selection, or selection using the UID of the particle display sprite.

    - For particles: apply force or apply impulse.

    - Collisions. No particle-particle or particle-fixture collisions for now. More testing required: the perf overhead might not be worth it (you can do AABB or particle sprite overlap checks).

    - The usual physics ACEs.

    - Create particles in a polygon, box or circle shape. Also create them using the collision polygon of any sprite, at the sprite's position.

    - Create multiple instances of shapes as part of the same particle group.

    - Might not fully support game-save. Saving a particle system may be impossible (but I have one idea to try before it's definitely off the list).

    - More to follow.


  • Looking forward to this, also it’s great to have you working on C3 projects!

  • Looking good.

    How big do you expect the Emscripten part to be export wise?

  • Thanks Mikal & newt,

    The liquifun.js file (which includes a webassembly element) is 475kb. So far the whole plugin weights at just under 700 kb.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Not bad.

    This would solve a lot of things regular particles are missing, collisions etc, for a nice trade off.

  • Emscripten + swearing = the plugin can now create a particle group by taking the shape of a sprite's collision polygon. In truth, making the polygon for this demo was almost harder than doing the coding...

  • Very cool!

  • Thanks WackyToaster!

    Update: added 'Assimilate' joints. Weld joints are flexible and if you attach more than a couple of objects together then visible flexing takes place; this is a feature of box2d. So, LFJS now lets other objects become assimilated as fixtures within a parent object.

    All of the small boxes in this example are fixtures to one box in the group that is the parent object.

  • Looking forward to its release!

  • Thanks chadorireborn!

    Minor update: Build has been updated to allow webassembly memory growth.

    Mind. Blown. Performance is now similar to that of the standard C3 Physics plugin (which is far better than the old asm.js performance from my old box2d+ behavior). Today's been a day for code tidying and general housekeeping - so my sleeves are rolled up and it's time to do some more Liquidfun project editing/building.

  • So, I've managed to make the particle creation events play nicely with particle group creation. Initially I thought that each shape would be a separate particle group (ie quite limiting). But now, thanks to some good information hidden away on the interweb, the plugin can create different particle shapes with different display sprites all in the same group.... and you can make the group rigid!

  • Ahhh this looks too fun to fool around with. Release when? :)

  • This looks really cool Colludium, looking forward to trying it out.

    Is it compatible with this method for creating a "blobby" water effect?:

  • WackyToaster - thanks - it'll be a little while yet as I trawl through the normal physics actions etc. I'm currently creating all of the joint methods and some of the LFJS library is lacking, so my cpp skills are now above zero...!

    mekonbekon - Thanks! That video is a good demo of how to get a water effect with a normal physics library. With LFJS, 1,000s of particles easily support 60 fps, so smaller circle sizes are easily possible. And, of course, the same Alpha Clamp effect can be used if you want. With LFJS you can also change the particle type: for example: water, spring, viscous, elastic, powder, etc. Each of those have unique characteristics within the engine.

    Here's an example of the LFJS icon demo but using Tensile particles (mimics surface tension):

  • Colludium Good to know, cheers!

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)