Jump to content

My melonJS learning note : Fix pixel art scale problem in 4.1.0


Recommended Posts

I got this tile map in tiled:(4x)


In 4.1.0

when you video.init using this settings (for integer scale)

        antiAlias: false,
        scale: 4 * window.devicePixelRatio,

In will draw like this:


tile texture are scaled 1 pixel, and it looks very bad.

It's all because of these change:


proper fix for texture seam issue #808 https://github.com/melonjs/melonJS/issues/808

Move scaling, rotation, alpha, etc to me.Renderable #335 https://github.com/melonjs/melonJS/issues/335

[#355] workaround for the Tile texture rendering seam issue https://github.com/melonjs/melonJS/commit/6f800a4d97cbae7291aada766aa7aa89673de7ba

So there is an option for creating renderer:

* @param {Boolean} [options.textureSeamFix=true] enable the texture seam fix when rendering Tile when antiAlias is off for the canvasRenderer

But it's not in the API document yet, and also you can pass this option to video.int which you might not know like me, so, to fix it add textureSeamFix: false video.init :

      if (!me.video.init(256, 208, {
        wrapper: 'screen',
        antiAlias: false,
        scale: 4 * window.devicePixelRatio,
        textureSeamFix: false



Link to comment
Share on other sites

it is actually documented, but since it's specific to the Canvas Renderer, it's therefore only documented for it, but admittedly it's a bit difficult to find...

Weird though that this is causing issue when scaling on your side, because that's exactly why it's there in the first place....   it's not the issue, but out of curiosity, any reason why you don't want to use antiAlias, especially if you are scaling by a factor of 4 and for a 8-bit "pixelated" retro game ?

Link to comment
Share on other sites

I seen new commit, that's quick, and I agree with @ldd.

It's all about "Pixel Perfect"

See the scale part of : https://www.raywenderlich.com/14865/introduction-to-pixel-art-for-games

And this : 


And this : http://diestware.tumblr.com/post/133416514160/pixel-perfect-camera-tutorial

Pixel perfect is scale up with out blur, and also no subpixel movement.

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