使用 Vue.js 在 PIXI 粒子容器中添加精灵

Question

我在 Vue.js 中将精灵添加到我的 PIXI 粒子容器时遇到问题。当我运行 PIXI 仅在脚本中时，这有效，但在 Vuejs 中，每个 new PIXI.Sprite.from("../assets/plainSquare.png") 不显示

我的目标是通过这种方式生成静态正方形网格：

setup() {
    // making a 30 x 16 grid of tiles
    const columns = 30;
    const rows = 16;
    for (let i = 0; i < columns * rows; i++) {
        const square = PIXI.Sprite.from("../assets/plainSquare.png");
        square.width = square.height = 25;
        square.x = (i % columns) * 32;
        square.y = Math.floor(i / columns) * 32;
        // add squares to stage
        this.container.addChild(square);
    }
}

如果需要，这里是完整的codesanbox：https://codesandbox.io/s/pixi-sprite-loading-cn7re?file=/src/App.vue

Answer 1

使用require获取图片：

PIXI.Sprite.from( require("./assets/plainSquare.png"));

使用 Vue.js 在 PIXI 粒子容器中添加精灵

Adding sprite in PIXI Particles Container using Vue.js

vue.js

pixi.js