Sign in to follow this  
Alex4co

Very sharp images on mobile devices

Recommended Posts

const APP = new PIXI.Application({width: 1920, height: 1080, antialias: true, transparent: false, resolution: 1 });

// ... load page, then

APP.renderer.roundPixels = true;
APP.renderer.view.style.position = "absolute";
 APP.renderer.view.style.display = "block";
 APP.renderer.autoDensity = true;
 APP.renderer.resize(window.innerWidth, window.innerHeight);

//... load textures, then

let loaderSprite = new Sprite(RESOURCES.preloader.texture);

Hi all. On desktop after window resizing - all resources are smooth - it's good.  But in mobile, ios for example is VERY VERY crisp. What i can do wrong ? (resize methods below)

window.addEventListener("resize" , onResize);

function onResize()
{
    let ratio = Math.min(window.innerWidth / MAX_W, window.innerHeight / MAX_H);
    
    APP.stage.scale.set(ratio);
    APP.stage.width = Math.floor(APP.stage.width);
    APP.stage.height = Math.floor(APP.stage.height);
    APP.stage.x = Math.floor(window.innerWidth / 2 - APP.stage.width / 2);
    APP.stage.y = Math.floor(window.innerHeight / 2 - APP.stage.height / 2);
    APP.renderer.resize(window.innerWidth, window.innerHeight);
}

Thanks!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.