如何创建 PIXI.texture 的新实例答案

【问题标题】：how to create new instance of PIXI.texture如何创建 PIXI.texture 的新实例
【发布时间】：2017-01-27 18:12:45
【问题描述】：

我正在使用 PIXI 从 sprite-sheet 图像创建 sprite，并尝试通过更改纹理框架的位置来为它们设置动画：

  // creating new instance of PXI.texure
  var texture = new PIXI.Texture.fromImage('my-start-frame-name');
  // creating sprite
  var runner = new PIXI.Sprite(texture);


  // this is the frame I'm using to change the picture in sprite sheet
  var frame = new PIXI.Rectangle(0, 0, 100, 100);

  // animating the sprite
  var interval = setInterval(function () {
    // moving frame one unit to right
    frame.position.x += 100;
    runner.texture.frame = frame;

    //  ending animation
    if (frame.position.x == 1000) {
       frame.position.x = 0;
       clearInterval(interval);
    }
  }, 50);

问题是当我从单个精灵表创建多个精灵时，所有纹理都是相等的：

texture1 == texture2; // true

从而将所有精灵动画在一起。

注意： 如果我为不同的精灵使用不同的精灵表图像，所有精灵都会单独动画，这是我所期望的。

【问题讨论】：

我之前已经向您提到过这一点，但是您是否有理由尝试手动创建动画而不是使用 PIXI MovieClip？它正是为此目的而建造的。你传入一个帧列表，它会自动为你渲染动画。省去你的麻烦。
@Karmacon 不，没有理由不使用movieClip。似乎我只是错过了你的评论，我现在看到了。我现在要阅读它的文档以将我的动画更改为movieClip。非常感谢！
这个例子应该有你需要的一切pixijs.github.io/examples/…

标签： canvas pixi.js

【解决方案1】：

您的问题可能在这里runner.texture.frame = frame。由于runner 已经是一个纹理实例，您想要更改该实例的框架，而不是原始纹理（即texture）。

改成这个应该可以解决问题：runner.frame = frame。

Here 一个类似的帖子

【讨论】：