Search code examples
javascripthtmlcordovapixi.js

Pixi.js - How to fix texture blur on mobile?

I have 2 separate projects which draw a randomized grass tilemap, which are using 2 different methods (personally want to see which is more convenient/efficient). One is using only Canvas, the other using Pixi.js. They both work fine on PC, but when I use cordova to compile it as an Android app, pixi.js tileset has a blur

Regular Canvas/Cordova enter image description here

Pixi.js/Cordova enter image description here

If you look closely, the 'grass' in Regular Canvas is sharp, but it's blurred in Pixi.js

I've tried playing around with the settings with no avail. window.devicePixelRatio reads 3 on mobile

PIXI.jS

PIXI.settings.autoDensity = true;
PIXI.settings.ANISOTROPIC_LEVEL = 0;
//PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;

let app = new PIXI.Application({
    width: screenSize.x,
    height: screenSize.y,
    antialias: true,
    autoResize: true,
    resize: (screenSize.x, screenSize.y),
    transparent: false,
    resolution: window.devicePixelRatio,
    rootRenderTarget: {
        resolution: window.devicePixelRatio
    },
    backgroundColor: 0x061639,
});
Solution

  • After some playing around, I found PIXI.settings.RESOLUTION = window.devicePixelRatio; must be declared. Everything became sharper now

    enter image description here