Jump to content

PIXI game looks blurry on mobile devices


Recommended Posts

I can't get Pixi game look crispy on mobile devices. Whenever window.devicePixelRatio is greater than 1, no matter what I do game doesn't look as crispy as it looks when window.devicePixelRatio equals to 1. Images for mobile version are saved separately (downscaled using photoshop). Using roundPixels = true on my sprites.







Any help would be much appreciated.

Here is how I am setting up my stage:

if (window.devicePixelRatio){
    RESOLUTION = window.devicePixelRatio;
PIXI.GRAPHICS_CURVES.adaptive = false;
PIXI.settings.autoDensity = true;
PIXI.settings.RESOLUTION = window.devicePixelRatio;
let app = new PIXI.Application({
    height: window.innerHeight/RESOLUTION,
    antialias: true,
    autoResize: true,
    resize: (window.innerWidth/RESOLUTION, window.innerHeight/RESOLUTION),
    transparent: false,
    resolution: window.devicePixelRatio,
    rootRenderTarget: {
        resolution: window.devicePixelRatio
    backgroundColor: secondColor,

Link to comment
Share on other sites

Is your canvas scaled when using higher dpr? Also you have some options in the app creation that I cannot see in the docs. Resize & rootRenderTarget.

You could try adding autoDensity:true to make the canvas css be set automatically based on resolution. I usually do those calculations manually, but should work via app also.

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...