将双三次缩放滤镜应用于Pixi.js精灵

Question

我正在使用基于WebGL的框架Pixi.js进行游戏，我尝试应用双三次缩放过滤器。在这种情况下，表现并不重要。

在这里您可以看到使用CSS制作的示例：

请检查我的Chrome优化jsFiddle。

此代码用于线性缩放图像：

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

对于Pixi.js 3.0及以上版本，可以通过更改PIXI.SCALE_MODES.DEFAULT来设置默认缩放：

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

对于Pixi.js版本1.5.0及更高版本，常量为moved，缩放现在设置为：

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

Answer 2

Pixi.js团队将尽快指定scaling filters。

修改

您现在可以specify the default scale mode：

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