Jump to content

ImageLayer and WEBGL problem


Recommended Posts

Hello there!

I have created a game with this amazing engine and Tiled app. I've added a scrolling background image layer to the map in Tiled, but when i modify the renderer to




in the me.video.init function in the js file, the background imagelayer doesn't show up to me. If I use the canvas renderer than it's working fine. I've tested this three different application with the latest melonjs and boilerplate. Is it a known issue? It would be great if someone could give answer for me.



Link to comment
Share on other sites

Nope, no known issue that I'm aware of.

Do you have other object in the scene? Or just the ImageLayer? The platformer example uses ImageLayer for its parallax backgrounds, and you can run it with WebGL: http://melonjs.github.io/melonJS/examples/platformer/#webgl This shows that it does work as expected, but it might actually rely on something obscure, like having moving entities in the scene ...

Link to comment
Share on other sites

Yes, i have three objects on the scene: the Player, the collosion and a parallax image. I've tried that platformer example, and I've made a new project based on the platformer example, i've got the same wrong result. After that I've created a new map only with an image layer, the webgl didn't render that.

Link to comment
Share on other sites

After a few more try and image investigation, I've found that the webgl only render out images with specific dimension, with the power of two. I mean I've created an image with 1024x512 or 128x256 or 1024x128, that it does work as expected, but when I've created an image with 1024x520 or something like that, the webgl doesn't render that. I hope you got it :D (sorry about that if my english isn't perfect, I'm still learning it).

So, my problem is half-solved... but i do not find anything about this behavior.

Link to comment
Share on other sites


We don't support NPOT textures with the WebGL renderer. WebGL is picky about texture size (just like OpenGL ES) It is technically possible to support NPOT textures just by adjusting some of the texture flags, but it comes at a performance cost. We wanted melonJS to run as fast as possible (or just not run at all, as you saw) so we decided to force users to use correctly sized textures.

MDN also makes a good argument against NPOT textures: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL#Non_power-of-two_textures For example, it is not possible to create repeating backgrounds with NPOT textures. See: http://melonjs.github.io/melonJS/docs/me.WebGLRenderer.html#createPattern And the Platformer example linked above makes use of texture repeat for the parallax scrolling backgrounds.

I agree, the limitation needs to be documented better. I suppose we kind of expect users to be somewhat familiar with WebGL internals if they intent to use the WebGL renderer ... In any case, you should have seen error messages in your developer console when loading NPOT textures. Hopefully that was enough to point you in the right direction.

Link to comment
Share on other sites

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...