Canvas.WEBGL on 2.6.2: Unwanted antialiasing on spritesheet

[Icugix 0]

Hi to everybody,
i'm testing phaser (v2.6.2) writing some simple codes, during the last one i've noticed a strange behaviour, check the jsfiddle:

https://jsfiddle.net/7863Lx90/2/

Only initializing with Phaser.WEBGL or AUTO if you move with the arrows the sprite to the left  (or top) border the sprite become smoothed, why this happens?

Thank you very much for your help.

Update 1: if someone needs more info please ask, thank you.

Best regards

[symof 44]

https://jsfiddle.net/7863Lx90/8/

It requires

gameObjects.s1.texture.baseTexture.scaleMode = PIXI.scaleModes.NEAREST;

 Because you are scaling up the spritesheet.

[Icugix 0]

Hi symof, thank you for your help, your fix seems to work but partially, unfortunately in Phaser.WEBGL mode the sprite seems to be cutted in some way if you move to the left border, i've changed the spritesheet, the problem (is it a bug?) is more visible with small sprites (now i use 16x18), check: https://jsfiddle.net/7863Lx90/14/

Thank you

[Icugix 0]

I've uploaded a gif to show better the problem...

There is a bug in my code that do this ? No one has an idea ?

Thank you

Edited September 4, 2016 by Icugix
Gif doesn't loop

[samme 719]

1 hour ago, Icugix said:

I've uploaded a gif to show better the problem...

I've seen the same problem w/ Phaser 2.4 when I used scaleModes.NEAREST or setImageRenderingCrisp() (not exactly sure).

[Icugix 0]

I confirm, I also made some tests with earlier versions of phaser and it happens again... Maybe it's a bug to report ?

[samme 719]

You should set antialias: false in your Game constructor. You can then remove the `baseTexture.scaleMode` assignment.

[Icugix 0]

I don't want the antialiasing on the sprites, however i've tried your solution  (https://jsfiddle.net/7863Lx90/19/) but it does not work, this is the result (unwanted antialising):

Any idea to get the same results of the initialization with Phaser.CANVAS?

 

[samme 719]

Oops I meant set antialias: false. D: See https://jsfiddle.net/sj98t97e/3/

Unfortunately browsers may smooth the WebGL canvas when it's scaled. Canvas.setImageRenderingCrisp() prevents that in some browsers (Chrome) but not others.

[Icugix 0]

Ok samme thanks for your hints, i get the same results also in Chrome 53.0.2785.101  (Windows 7 64 bit), i'm hoping for a better result in the next versions of the browsers.