如何调整精灵 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 不是一个函数。

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

Answer 1

创建精灵后，您可以像这样控制精灵的位置和大小：    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