javascript - 将双三次缩放过滤器应用于 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 及更高版本，常量已被移动，缩放现在设置为：

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

Answer 2

Pixi.js 团队将很快添加指定缩放过滤器的可能性。

编辑：

您现在可以指定默认缩放模式：

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