Internet Explorer Mobile - Anti-aliasing problem (scale)

[i3Designer]

I tried with:

    game.stage.smoothed = false;

AND

    PIXI.scaleModes.DEFAULT = PIXI.scaleModes.NEAREST;

 

On Iphone/Android it is perfect, but in Internet Explorer Windows phone 8.1 the sprites are blurred.

I need to make it work but I do not know how to do 

 

 

[SolarJS]

If Pixi doesn't support it add it yourself using ms-interpolation-mode.

[i3Designer]

How can I do ? If I can not do it , I think I enlarge all images, but so the size of the game increases

[SolarJS]

Use CSS to include this property and your problem is solved. You don't have to enlarge anything.

[gingerbeardman]

Take a look at this. I am enlarging the canvas @2x using CSS and keeping the chunky pixels.

http://codepen.io/gingerbeardman/pen/dPzaYd

[i3Designer]

Take a look at this. I am enlarging the canvas @2x using CSS and keeping the chunky pixels.

http://codepen.io/gingerbeardman/pen/dPzaYd

 

I tried so but nothing :| 

Sorry if I do not understand 

PS: Only the cars are 16x16

 

[gingerbeardman]

Does my demo work for you?

 

I will assume that it does, but that you have had no luck adding this sort of trick to your code.

 

How are you loading and sizing the cars in your code?

[i3Designer]

I have:
index.html

game.js

boot.js

load.js

menu.js

play.js 
 

These are my files.
In game.js 
var game = new Phaser.Game(360,640,Phaser.CANVAS,'gameDiv');

In boot.js in create function I put in:

        game.stage.smoothed = false;

        //PIXI.scaleModes.DEFAULT = PIXI.scaleModes.NEAREST;

        this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

        this.scale.pageAlignHorizontally = true;

        this.scale.pageAlignVertically = true;

        this.scale.setScreenSize(true);

In menu.js I created my menu-game and use this.car.scale.setTo(number) to enlarge the size.

In this way the game is perfect, but in Android(internet) and IE the cars are blurry.

I tried with our method but nothing happens. 

With our method I added in index.html:

        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+          */

        }

 

But cars are blurry

Cars are very small (16x16px) and I need to re-size

EDIT:
In your tutorial you use the sprite that has size 48. I should transformare each machine to 16x16 XX XX and not transform size.
 

[gingerbeardman]

are you doing sprite.smoothed = false; on your sprite?

 

See: http://examples.phaser.io/_site/view_full.html?d=arcade%20physics&f=body+scale.js&t=body%20scale

[i3Designer]

are you doing sprite.smoothed = false; on your sprite?

 

See: http://examples.phaser.io/_site/view_full.html?d=arcade%20physics&f=body+scale.js&t=body%20scale

 Thank you very much GingerbeardMan!! 

Sprite.smoothed = false in latest version of Phaser is all ok! Perfect.

Sorry for the time but for my low English I need more time.

This is a little vine of the game: 

https://vine.co/v/OFzteh2eKOF

 

To correct this error I have tried everything but sprite.smoothed no :| 

Thank You!!

[gingerbeardman]

Great!

 

Looking good.

 

Interesting that only IE required this code.