Jump to content

PIXI sprites are blurry on mobile devices.


Recommended Posts

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

Please help.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...