Harrisyu

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

Recommended Posts

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

1.png.7b24adc07cdd69bf3d412bdbe6804603.png

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:

2.png.d79544e3e346c2bcd9d747a7bcde62c0.png

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

 

 

Share this post


Link to post
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 ?

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.