JavaScript

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

Pixi.js/Cordova

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

Answer

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

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

Advertisement

Answer