• Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by obiot

  1. obiot

    Multiple shaders

    Hi, in the latest 8.x branch we did revamp partially the WebGL implementation, and introduced a new GLShader class which aims to be the base in providing such a multiple shader feature, with the possibility to specify a Shader manually .Unfortunately for now beside switching between the 2 shaders used internally for primitive drawing and sprite it has not been really tested, and probably the current code needs further changes to allow it (now we have one compositor used for both primitive drawing and sprite rendering that automatically switch shader , it should be split into two compositor, allowing for each to use a user defined shader)
  2. hi, can you copy paste the part of the code doing the scaling here just to be sure ? also is this on a me.Sprite object ? or for/in a an Entity ?
  3. Hi, thanks for the feedback ! "Parallax" layer has been a long due/requested feature, but nobody never got to actually implement it : this said, changing the layer position should work (I don't see right now why it should not), what version of melonJS are u using ?
  4. there were a massive rewrite in the version 8 compared to version 7 yes, with better detection and fallback to canvas, and also WebGL2 support, so you should actually see performances improvement but this might be linked the the below changes on older computer with 2 GPU, as browser are all switching to a low-power mode by default, as opposed to the previous "high-performance" Renderer : allow specifying the default powerPreference value for the WebGL Renderer (on Safari and Chrome 80+ default is now low-power) see here for the WebGL specs : my pleasure and merry Christmas to you too ! I have done anything in a while, between moving house and holiday period, I;ll only be back in January
  5. yes, but at that point it's either you set `failIfMajorPerformaceCaveat` to false and games won't work on some linux platform (this was one of the issue in the past), or true but then windows machines that don't have a good enough WebGL driver implementation will fallback to canvas.... unless you have a good idea, not much more I can do about this to be honest...
  6. interesting question ! I would see two options : OPTION 1 : using a regular physic body with a open polygon or several line shapes, you can know when your body (a polyline then here) is intersecting with any other shape, the trick being to check if both edge are respectively within these two circles, but something you can easily do by testing which line in your body is the one intereseting with a circle and keep track of the circles during the update cycle. OPTION 2 : I would definitely look as well at the raycast feature (demo here). the only thing is that you have to work around it a bit as the raycast method only take a me.Line object as parameter, so you will have to decompose the line here above, but then it's easy as the below pseudo-code: var results = me.collision.rayCast(myLine1); results.forEach(result) { if isCircle(result) && result.contains(myLine.points[1) { // do something amazing } } Also do not that the rayCast method relies on the quadtree to only check against the nearby object
  7. in the Tiled screenshot here above, your foreground layer is marked as hidden (see the closed eye), are you sure this is not a setting "issue" in tiled ? the error you mentioned is just actually a warning, but it does not prevent the the texture from being used. We display warning about non-POT texture as it impacts performances with WebGL, but does not prevent the game from working. also, if you are on the latest 8.x version, you can actually enable WebGL2 that now accepts non-POT, by setting the preferWebGL1 flag to false : Else the whole tutorial source code is available on GitHub : I understand your frustration, but the tutorial is not only about melonJS, it's also about the 3rd party tools (like Tiled), and yes it's easy to make a mistake, and yes it's definitely a learning process. keep us updated on your progress, and do come back here if you need more help
  8. obiot

    CDN and NPM install

    I'm not sure why you do like this, why don't you just include melonJS in your package.json ? this is will install it with other dependencies, and then the call to require should work.
  9. just to be clear though, the build process in the boilerplate is to actually build a one file minified version of the game, and additionally automatically generate the asset file. nothing prevent from actually using the boilerplate "manually" by running the provided index html file, without building the whole thing (or even just not using the boilerplate, it's not mandatory) and manually building the resources file yourself :
  10. just added this too :
  11. Hi, Again with this error ! (facepalm) are you using the latest version of the boilerplate ? this was addressed in the latest commits ( see as well here : but yes the boilerplate really/definitely needs a big update (remove grunt) and switch to either webpack or rollup
  12. obiot


    Sorry for the late answer, normally you should have all you need here : - you can check if b is an instance of a ladder object - use the overlapV vector to determine by "how much" your player collides with the ladder, I would rather use that instead of binA, as there is little chance the player is always completely inside the ladder (see in your picture it is overlapping, but not completely inside, check the collision box, in red, using the Debug panel) as for types, this is more to limit which object the main player (or others can collide with), but by default this is mostly all of them, so it should not be an issue let me know if this helps, or if you managed to implement it in the meanwhile
  13. obiot

    melonJS es6 module

    took me a few build to properly fix some remaining internal reference to the me namespace, but since build 2839, even more complex example such as the platform one is working when importing the ES6 module, so it seems that it starts to be stable enough to share and play with. here is one, for those interested, that does not have any external dependencies (using the latest dev build) import * as me from ""; // upon device ready me.device.onReady(function () { // Initialize the video. if (!, 562, {scale : "auto"})) { alert("Your browser does not support HTML5 canvas."); return; } // add a gray background layer me.ColorLayer("background", "#202020")); // add a text object in the center of the display me.Text(609, 281, { font: "Arial", size: 160, fillStyle: "#FFFFFF", textBaseline : "middle", textAlign : "center", text : "Hello World !" })); });
  14. obiot

    melonJS es6 module

    Hi Guys, as part of the 9.0 (master) branch, all classes have been converted to es6, and the build process now generate 3 files : melonjs.js (plain es5 umd bundle) melonjs.min.js (minified es5 umd bundle) melons-module.js (es6 module) both the es5 umd bundle and es6 module are now available under our amazon build bucket (click on the latest build version) : I haven't yet really tested it to be honest, as I'm still focusing on other features and I haven't really yet converted any example, but It would really be nice to have any external feedback/testing on this one if anyone here wants to be a alpha-beta tester for the es6 module. the API are still supposed to be backward compatible (inheritance mechanism has not been changed yet to the es6 class inheritance), so using "import * as me from melons-bundle.js" should just be working as previously. Thanks!
  15. obiot

    The COVID-19 Game

    Runs pretty well on my iphone (using the web version of course), pretty happy of all the hard work we put into the 8.0.1 version (with your help) is paying off with the resizing issues being gone, and extra bonus the game seems much smoother than before Congratulations on the update !
  16. obiot

    melonJS 8.0.0

    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 :
  17. obiot

    melonJS 8.0.0

    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 : 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, 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 (, 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 : 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 : 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 : 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
  18. Hi, for the level not stretching or taking the entire screen, check the params you passed to the method, the `scaleMethod` is the one to specify with something like `flex` to match the desired effect (at least that's the one used in the tutorial, but there are other you can check as well, for Platformer I personally use `flex-width`) for the movement, maybe you can post here the code of your entity if you are sure you properly follow the tutorial, but else I would say to check again part 3 and make sure that you added the call to `this.body.update(dt);` good luck !
  19. based on the callback stack it's more like the image used for the font is undefined and therefore the width & height properties, how did you define the font object, and did you added both the json and image in the preloader asset list ?
  20. awesome, and indeed i's a way better "experience". else, since I noticed you are using the master branch, would you mind testing the WebGL2 renderer ? it has been added in the last 8.0 (be sure you also have the latest 8.0), it seems to be working for most things (the platformer example uses it as well now), but it's still disabled by default, you can just add "preferWebGL1 : false" to the video init parameters (don't worry it will fallback to WebGL1 if the device does not support WebGL2).
  21. wait I'm being stupid, in the response object you already have all you need, including the overlap magnitude : plenty of things to play with anyway, let me know which one worked the best for your use
  22. just google it quickly and found this as well, probably more precise
  23. what I would do personally is to actually use the response object you get through the collision handle, it prevent checking for overlap every single frame in your code and since you get directly access to both colliding object you can also filter and only check if/when response.b is the player. Then finally I would actually just calculate the distance between both position to see how close they are which should give the level of overlap somehow. so something like that : onCollision : function (response) { if (response.b instanceof MyPlayerClass) { //probably better to use both bounding boxes, just simplifying here distance = response.b.pos.distance(response.a.pos); if (distance < response.b.width / 4) { // if the distance between b and a is smaller than a quarter // of the b box size, we can assume that 3/4 of b is overalping with a doSomething(); } } } I haven't tried this code, so maybe I'm missing something, but definitely how I would start. let me know if it helped !