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

[Harrisyu]

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:

Quote

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
      })) 

 

 

[obiot]

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 ?

[ldd]

Not OP, but it boilds down to
1) artistic choice
2) AA is bad news if you have pixel art with certain qualities (e.g palette shifts, fake AA, fake transparency, etc)

[Harrisyu]

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.