如何调整精灵 pixi.js

Question

我有一些生成精灵的 PixiJS 代码：

let type = "WebGL";
if (!PIXI.utils.isWebGLSupported()) {
    type = "canvas"
}
PIXI.utils.sayHello(type);
const app = new PIXI.Application({
    width: 1000, height: 600, backgroundColor: 0x1099bb, resolution: window.devicePixelRatio || 1,
});
document.body.appendChild(app.view);

function renderSprite() {
    const sprite = new PIXI.Sprite(PIXI.Texture.from("BEE-e1414622656271.png",));
    sprite.anchor.set(0.5);
    app.stage.addChild(sprite);
    sprite.x = app.screen.width/2;
    sprite.y = app.screen.height/2;

}

renderSprite();

该代码有效。 然而，生成的精灵太大以至于超出了容器的边界。

我需要设置精灵的大小，所以我尝试使用baseTexture的高度和宽度选项：

const sprite = new PIXI.Sprite(PIXI.Texture("BEE-e1414622656271.png", baseTexture=PIXI.baseTexture(options={
        "height": 100,
        "width": 100
    })));

但我收到一条错误消息，指出 PIXI.baseTexture 不是 function。

如何调整精灵的大小以使其适合容器？

Answer 1

您可以控制 position 和创建后的精灵大小，如下所示：

    var sprites = {};
    sprites.cat = new PIXI.Sprite(catTexture);

    //Change the sprite's position
    sprites.cat.x = 96;
    sprites.cat.y = 96;

    //Change the sprite's size
    sprites.cat.width = 30;
    sprites.cat.height = 150;

    //Add the cat to the stage so you can see it
    stage.addChild(sprites.cat);

然后稍后——即使这个精灵被添加到舞台容器中——你也可以进一步修改它的宽度和高度。 尝试在你的游戏循环中加入类似的东西：

sprites.cat.width += 0.5;

在文档中查看更多信息： https://github.com/kittykatattack/learningPixi#size-and-scale