smoothing/ antialias

[Cedric]

Hi everyone,

 

I'm making a doodle jump remake.

My base game is 52 by 100 for easy scaling for devices with 16:9.

 

However when on the scaled size all my sprites are antialiased

 

How can I make my sprites back to pixelart ?

 

Thanks in advance

doodle jump remake.zip

[gingerbeardman]

First, thanks for providing your code! It's much easier to describe the solution when I can try it before hand. 

 

Add these 3 lines to your boot state init:

Phaser.Canvas.setImageRenderingCrisp(game.canvas);  //for Canvas, modern approachPhaser.Canvas.setSmoothingEnabled(game.context, false);  //also for Canvas, legacy approachPIXI.scaleModes.DEFAULT = PIXI.scaleModes.NEAREST; //for WebGL

These work because you are using Phaser Scale Manager to do the scaling.

 

YOU ARE DONE.

 

See the reasons why: https://github.com/photonstorm/phaser/issues/1586#issuecomment-74843571

 

 

ps: As an aside, if you were using CSS to scale your canvas, the solution to the problem would be different:

canvas {  image-rendering:optimizeSpeed;             /* Legal fallback */  image-rendering:-moz-crisp-edges;          /* Firefox        */  image-rendering:-o-crisp-edges;            /* Opera          */  image-rendering:-webkit-optimize-contrast; /* Safari         */  image-rendering:optimize-contrast;         /* CSS3 Proposed  */  image-rendering:crisp-edges;               /* CSS4 Proposed  */  image-rendering:pixelated;                 /* CSS4 Proposed  */  -ms-interpolation-mode:nearest-neighbor;   /* IE8+           */}

See why: http://stackoverflow.com/a/8888964/28290

[Cedric]

Dear 

gingerbeardman,

 

thank you so much for this it all works great and on my phone it's working as well.

Do you have any idea why it happend or why smoothed = false didnt work ?

 

Best Regards and your awesome!!!

 

Cedric

[Cedric]

I'm sorry but I spoke to soon, it works on chrome but not inside the cocoon JS app :/

 

Is there a way to fix this as well ?

 

Best Regards 

Cedric

[gingerbeardman]

For Cocoon JS app, the browser or version of WebKit it uses must be an old version.

So, try also adding the CSS I listed above.

 

The changes above operate at a higher level than smoothed = false. @Rich will have the details

 

Let me know how you get on,

[Cedric]

thank you for your quick responses

 

I accualy dont know wich browser cocoon JS uses, I suppose chrome but since mobile browsers arent supported yet I think thats why its not working.

 

The added css rules didnt change anything unfortunantly.

 

btw I use the canvas+ method for testing withing the cocoon JS launcher

 

Best regards

[gingerbeardman]

Oh, it kinda works in Cocoon JS with Canvas+ for me.

 

Screen: http://cl.ly/image/2S3E0g3B302S

 

Otherwise:

http://www.html5gamedevs.com/topic/3980-common-phaser-cocoonjs-issues/

[Cedric]

wich version of the launcher are you using ? 

my s4 mini hasnt been updated for the last year(still on 4.1.7).

I've read in the support page that version 2.0 of the launcher can only be installed on devices with 4.4 or above.

 

It might be that why its not working, I'm currently updating as we speak. It takes ages though

 

Best regards

[Cedric]

I accualy have send you a second version, ill send you the first one with a accual player/character

 

you'll stil see AA when you move the player the opening is smoothed

 

[gingerbeardman]

I just downloaded the iPhone launcher today.

 

CocoonJS by Ludei

Updated: 09 December 2014

Version: 2.1.1.1

[Cedric]

here is a link to my game with a character:

 

https://www.dropbox.com/s/cl29bky9lmbn8mx/doodle%20jump%20remake.zip?dl=0

 

this one is the version how it is in my sublime text atm.

it fine in the browser but its not on the launcher.

 

Thank you soo much for your time 

[gingerbeardman]

OK, for sprites you do need: smoothed = false

[Cedric]

that didn't fix it either.

 

Is it a bug are did I forgot some specific code?

 

thanks again for your help and time

[gingerbeardman]

Just go through the hierarchy and set smoothed = false to each parent of the sprite.

 

It's annoying that this isn't all done with one command.

 

check this example: http://phaser.io/examples/v2/arcade-physics/body-scale

[Cedric]

I have added the properties to all sprites now but with no luck.

 

I'm currently compiling the file to see if it made a change when in a apk form.

 

Best Regards

 

[Cedric]

It didn't make any change.

 

thank you for your interest and time,

hopefully there will be a better mobile browser or cocoonJS compatibility with Phaser 3

 

best regards

Cedric

[Cedric]

create: function() {		//game.renderer.renderSession.roundPixels = false;		Phaser.Canvas.setImageRenderingCrisp(game.canvas);  //for Canvas, modern approach		Phaser.Canvas.setSmoothingEnabled(game.context, false);  //also for Canvas, legacy approach		PIXI.scaleModes.DEFAULT = PIXI.scaleModes.NEAREST; //for WebGL				game.stage.backgroundColor = "#6A093F";		game.state.start("load");        } 

First of sorry for this many replies BUT!!!!!!!!

I have some news: I managed to get it all working in the chrome browser on my phone!

All I did was moving the block of code you provided to the create function and tada!

 

the laucher problem is still there though.

 

Best Regards

[amadeus]

If you have a retina (or equivalent high density display), you will still not get pixellated graphics unless the browser supports those CSS properties mentioned earlier on canvas elements.

 

The way I get around this is by abusing PIXI's resolution parameter, which isn't supported in the current version of Phaser. The next version will allow this to be set, hopefully it gets released soon. You can check it out in the dev branch on github.

[Cedric]

thank you for your reply.

 

does PIXI's resolution parameter effect the cocoonJS launcher?

The game runs and looks fine on my pc on google chrome as well as on my mobile google chrome browser.

It just won't show up as in the browers as in the cocoonJS laucher ==> my compiled version is blurry/smoothed/antialiased

[Cedric]

people who followed the thread: 
the problem is fixed, ludei answered it on the issue thread of cocoon + phaser
 
I had to include there cocoon.js build file in my game directory from github and then set this command in my bootState: Cocoon.Utils.setAntialias(false);

also I had to include the code from earlier to make it all work in the browsers as well (code from gingerbeardman).

 

Thank you for answering 

 

Best Regards,

Cedric

doodle jump remake.zip

[gingerbeardman]

Great!

It would be great if you could include a minimal example game of the working code?

[Cedric]

I've modified the post to include the game

thank you for your help gingerbeardman