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

【问题标题】：Adding sprite in PIXI Particles Container using Vue.js使用 Vue.js 在 PIXI 粒子容器中添加精灵
【发布时间】：2020-09-21 10:28:10
【问题描述】：

我在 Vue.js 中将 Sprite 添加到我的 PIXI Particles 容器时遇到问题。这在我仅在脚本中运行 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);
    }
}

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

【问题讨论】：

你的代码中的路径应该是"./assets/..."。

标签： vue.js pixi.js

【解决方案1】：

使用require 获取图片：

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

【讨论】：

你知道为什么 vueJS 需要 require 吗？谢谢顺便说一句
@Philx94 因为此代码将在客户端执行，在构建之后，并且在此上下文中，资产文件夹不存在。如果您在公用文件夹中使用图像，则可以。