Jump to content

melonJS 8.0.0


Recommended Posts

Hi all,

It took waaaay too long to reach a proper stable release, but melonJS 8.0 is finally available ! 

Full list of changes is here, but to sum it up, the initial goal of this release was to improve the physic implementation and move forward with ES6 support (at least for class definition), but we actually ended up revamping the WebGL renderer and improving other part of the engine following numerous and very helpful feedback from some users, like @PLAYERKILLERS, @alcor and @siauderman to name a few

WebGL & Canvas Renderer :

  • WebGL renderer and embedded shaders have now been fully rewritten and should offer better compatibility (especially on mobile and linux platform) and definitely better performance.
  • WebGL2 support, WebGL2 brings performances improvements and most of all allow to use now-power-of-two texture, which will decrease memory consumption and therefore also performances. It’s currently off by default (there is a ‘preferWebGL1’ flag to set to false to enable it)probably it will be enabled for the next release) as it has not been used yet for any games deployment, so I definitely recommends to test it on your side as well (will fallback automatically to WebGL1 if not supported)
  • Proper tint support for both WebGL and Canvas renderer (just specify a tint color using me.Sprite.tint, and the sprite color will be changed accordingly) -> this is great as well to optimise the amount of assets as they can simply be coloured programmatically, by extension BitmapText can now also be tinted, using tint, or by specifying a fillStyle in the constructor parameters (so just one white bitmap text is enough now and can be coloured any way we need)

Physic Improvements :

  • me.game.world is now a specific container that manage physic related properties and updates and hold instances like the quadtree used for Broad phase 
  • gravity for physic bodies is now defined globally under me.game.world.gravity, and can be scaled individually using me.Body.gravityScale
  • any shapes or physic body can now be fully rotated around either their center or a specific given point
  • renderable can now be fully rotated around either their Anchor Point or a specific given point

Other improvements :

  • melonJS now create a default Stage by default, which means you can just add any child to the game world right after initialising your game (great for prototyping or small games)
  • massive improvements on the canvas scaling/positioning and related input detection when embedded into a complex CSS layout
  • lots of Tiled related fixes, including for staggered map rendering, anti-diagonal rotation, tile animation, etc...
  • add support for free-texture-packer (http://free-tex-packer.com), a free Texture Packer alternative
  • some new Color utility function (lerp, random)
  • melonJS will now automatically release any registered event on a renderable as soon as the object is destroy
  • accelerometer and motion detection improvements (to support latest w3c api)
  • fix the long standing issue of sprite position being offset when scaling or rotating a sprite -> this will bring some visual differences in any existing game where scaling or rotating me.Sprite objects (since now the position will be updated accordingly to the Anchor Point)
  • examples have been cleaned up and improved to show most of the new features (check the sprite, graphics, UI ones for examples)
  • tons of other bug fixes here and there

There should not be any breaking changes in this release, as always we tried to keep it backward compatible, but keep an eye on the console log for deprecation warning and make sure to check the upgrade guide on how to upgrade your game : https://github.com/melonjs/melonJS/wiki/Upgrade-Guide

Last but not least, everything is available on NPM and jsDeliver, README has also been updated and worth a read if you haven't since a long time :)


Then next, for the version 9.0 (I guess), few things we are looking at :

  • Physic improvement: as the goal is to be able to plug a physic engine in melonJS (like matter, box2d, etc..) we will keep improving/changing the internal implementation of the physic body and how the world is iterated in order to more closely match those library and more easily allow defining a physic plugin or something or even directly use one in melonJS (if anyone has any advise/preference on a physic engine for javascript, please shoot)
  • me.Entity will be deprecated, way to go forward will be to add a me.Body object to any me.renderable, this will automatically fix all the entity bounds issues, and is more aligned with how physic engine (like matter) are working. The new way to work is already working in the current 8.0 version, but not fully tested, I do recommend though to start using it so that we can track left over issues with it. I created a ticket for that on GitHub, if you have comment let’s discuss it there : https://github.com/melonjs/melonJS/issues/1008
  • convert class definition to ES6, will probably start with the one that are more like internal and not likely to be extended in your game (like vector and matrix). but also for now we will keep the current rollup build setup to output a pure ES5 library (so even though we slowly migrate melonJS to ES6, we still transpile it back to ES5, at least until the whole library is converted), a track list has also been added for those classes here : https://github.com/melonjs/melonJS/issues/915
  • further improvements to the WebGL renderer : finish testing WebGL2, and other things like VAO that could be added as well


... and I think that's all for now !

So, I hope you guys are excited about this new release, let me know what you think, and will definitely look forward to your feedback !

-- the melonJS team

Edited by obiot
Link to comment
Share on other sites

 Few of the improved examples I was talking about :

Sprite rendering around a specific Anchor Point, including rotation, scaling and transparency :  













UI example, with the canvas embedded in a CSS layout, and input fully working even when zooming in/out or scrolling the page :













Shape drawing in WebGL and Canvas mode, including masking  :













Also, examples have been moved into their own repositories, and will keep being improved over time, feel free to submit there your changes as well 


Edited by obiot
Link to comment
Share on other sites

  • 3 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...