PIXI Sprite显示为黑色

Question

我正在尝试将Sprite设置为我的视口的背景。 grid.png为23040 x 9984像素。

   this.app.loader
      .add("grid", require("./assets/grid.png"))
      .load((loader, resources) => {
        const grid = new PIXI.Sprite(resources.grid.texture);
        grid.anchor.set(0, 0);
        grid.scale.set(1);
        this.container.addChild(grid);
      });

Sprite显示在我的Container中，但仅显示为黑色。如果我尝试使用较小的png（25 x 25像素），则可以使用。

我还确保我的视口世界width和height足够大：

   this.viewport = new Viewport({
      screenWidth: 953,
      screenHeight: 409,
      worldWidth: 25000,
      worldHeight: 10000,
      interaction: this.app.renderer.plugins.interaction 
    });

这里是沙盒代码https://codesandbox.io/s/pixi-sprite-loading-cn7re?file=/src/App.vue:572-875

Answer 1

1. 您将精灵显示为黑色（镀铬），因为它太大了，请使用“ require”添加它：

.add("grid", require("./assets/grid.png"))

this does basically following:

.add("grid", "data:image/png;base64,iVBORwA<MoreBase64StringHere>")

当grid.png具有如此大的尺寸时，这对于浏览器来说太大了。

您应该通过将url传递给图像来添加它-而不是要求整个内联图像：

      .add({
        name: "grid",
        url: "grid-small.png",
        crossOrigin: "anonymous"
      })

注意grid-small.png应该在codesandbox的“ public”目录中，并且crossOrigin: "anonymous"是为了避免在加载图像时发生跨域问题。

2. 应该避免使用大图像（特别是如果它基本上包含同一图像的许多副本）。例如，您应该尝试使用图像的一些中小块（提到的grid-small.png）和TilingSprite技术。这样，您可以轻松拥有25000 x 10000的网格-如下面的代码和框中所示。

3. 您不应该将Pixi对象保持在Vue组件状态内-我已经在其他文章中https://stackoverflow.com/a/62094101/3174731告诉过您-您没有在听；）。您为什么要Vue分析Pixi对象？不是它的工作。 Vue应该是关于DOM等中发生的事情-而不是画布中的事情。如果将与Pixi相关的对象保留在Vue组件（myPixi变量）之外，请参见下面链接的codeandbox，这一切将有多快。

您可以在以下代码框（您的修改版）中看到上述优化的工作方式：https://codesandbox.io/s/pixi-sprite-loading-3vsne?file=/src/App.vue