Zastosuj dwubiegunowy filtr skalujący do ikonki Pixi.js

Question

Używam architektury opartej na WebGL Pixi.js do gry i staram się zastosować dwubramkowy filtr skalujący. Wydajność nie jest w tym przypadku ważna.

Tutaj można zobaczyć przykład wykonaną z CSS:

proszę sprawdzić moje Chrome zoptymalizowane jsFiddle.

Ten kod jest liniowy skalowany obraz:

var stage = new PIXI.Stage(0xFFFFFF, true); 
var bg = PIXI.Sprite.fromImage("image.png"); 
bg.scale.x = .125; 
bg.scale.y = .25; 
stage.addChild(bg); 

var renderer = PIXI.autoDetectRenderer(93, 79); 
document.body.appendChild(renderer.view); 
var textureHasLoaded = false; 
checkIfTextureHasLoaded(); 

function checkIfTextureHasLoaded(){ 
    if (bg.texture.baseTexture.hasLoaded){ 
     textureHasLoaded = true; 
     renderTexture(); 
    } 
    if (!textureHasLoaded){ 
     requestAnimFrame(checkIfTextureHasLoaded); 
    } 
} 

function renderTexture(){ 
    renderer.render(stage); 
} 

Answer 1

Dla Pixi.js wersjach 3,0 i powyżej domyślnego skalowania można ustawić poprzez zmianę PIXI.SCALE_MODES.DEFAULT:

PIXI.SCALE_MODES.DEFAULT = PIXI.SCALE_MODES.NEAREST; 

W przypadku wersji Pixi.js w wersjach 1.5.0 i nowszych wartości stałe to moved, a skalowanie to:

PIXI.scaleModes.DEFAULT = PIXI.scaleModes.NEAREST; 

Answer 2

Zespół Pixi.js doda możliwość określenia scaling filters wkrótce.

Edit:

Jesteś teraz w stanie specify the default scale mode:

PIXI.Texture.SCALE_MODE.DEFAULT = PIXI.Texture.SCALE_MODE.NEAREST;