typescriptpixi.jsantialiasing

PIXI.js how to stop PIXI.Graphics being blurry?

I have a PIXI.Graphics object where I add 9 times a 16x16 texture, then I upscale, but the result is very blurry. Code :

const graphics: PIXI.Graphics = new PIXI.Graphics();
const slotTexture: PIXI.Texture = game.textureManager.getTexture('hotBarSlot'); 
graphics.beginTextureFill({
    texture: slotTexture,
});
graphics.drawRect(0, 0, width * 16, height * 16);
graphics.endFill();
graphics.scale.set(6, 6);

There is the result I get : Screen

This is my texture (it's really small) :

HotBar texture

How can I fix this problem ?

Solution

  • Okay, I figure it out!

    I have to add this line :

    slotTexture.texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST;