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

Question

我遇到了一个问题，在Vue.js中向我的PIXI粒子容器中添加Sprite。当我只在脚本中运行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.iospixi-sprite-loading-cn7re?file=srcApp.vue。

Answer 1

使用".assetsplainSquare.png"... require 用于获取图像。

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