PIXI sprites are blurry on mobile devices.

[shashank]

When i am drawing any sprite usign pixi its looking blurry on both mobile (android mobile ) and pc (chrome browser)

Then i tried setting (roundPixels: true). Then it becomes sharp on pc but still blurry on mobile devices.

I have looked at forums but could n't get any help. I tried looking on stackOverFlow but  i got nothing which could actually resolve my problem.

I have used below code.

var gs = {width:950,height:640};
var app = new PIXI.Application(gs.width, gs.height, {
    resolution: 1,
    antialias: false,
    forceFXAA: false,
    forceCanvas: false,
    autoResize: true,
    transparent: false,
    backgroundColor: 0x000000,
    clearBeforeRender: true,
    preserveDrawingBuffer: false,
    roundPixels: false
});

var down = PIXI.Sprite.fromImage("images/icon.png");
down.anchor.set(0, 0);
down.position.set(100, 150);
app.stage.addChild(down);

Please help.

[ivan.popelyshev]

I suspect that problem is in "resolution". However that way it could be problem only for android, not the PC.

Lets fix PC first. Are you sure that page is not zoomed (100%) and that you didnt set something like "200% size" in windows display settings? Please type "window.devicePixelRatio" in the console, or "console.log"  that value in your code. Is it 1 or something else?

[shashank]

 

I am getting 3 as value of window.devicePixelRatio in mobile. And i have not zoomed my mobile browser content and did not set windows display settings to anything.

[ivan.popelyshev]

There's no way it can be blurry in PC if devicePixelRatio is 1. As for mobile,  if you use resolution=1 , then at least try to fix it with css: https://developer.mozilla.org/ru/docs/Web/CSS/image-rendering , apply that to canvas (app.view, renderer.view, same thing)

You can also set resolution to "window.devicePixelRatio", then you have to understand what is difference between "renderer.width" and "renderer.screen.width" (same as "app.screen")

Imagine that window.innerWidth=320, innerHeight=240, and you also set it as your "gs.width" and "gs.height". In that case, "renderer.screen" is (0,0,320,240).  You can use those values to calculate coordinates for elements: position, scale, other stuff. Its also known as "CSS pixels", that is what "autoResize" option sets to canvas css parameters.

Now we set resolution to 2.

"renderer.view" is the canvas that has its width set to 640, and height to 480, and that's "renderer.width" and "renderer.height" - real number of pixels, that cannot be used to calculate any coordinates.

Elements that are rendered in pixi can also have resolution: Texture, Text, others. If resolution is not the same as renderer's resolution, it might be blurry. Of course it can be fixed with scale  

There's also webgl filtering that manages the cases when image is scaled :"texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST"  will give you crisp image ,and you can even set it by default: "PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST".

I hope that you can find it all in docs.

[Exca]

Does the canvas have somekind of transform applied to it with css? That might make things look a bit blurry also.