PIXI.js AnimatedSprite 在第一次播放时滞后

Question

我需要一些帮助来了解从 spritesheet(s) 创建 PIXI.extras.AnimatedSprite 的最佳做法。我目前正在为由 TexturePacker 创建的 1 个动画加载 3 个中型 spritesheets，我收集所有帧然后播放。不过第一次播放动画很不流畅，几乎是直接跳到最后，之后就真的流畅了。我读了一点，我可以看到 2 个可能的原因。 1) 延迟可能是由于将纹理上传到 GPU 所花费的时间。有一个名为 prepare renderer.plugins.prepare.upload 的 PIXI 插件，它可以让我在播放之前上传它们，并可能平滑初始循环。 2) 从多个纹理/图像构建 AnimatedSprite 并不理想，这可能是原因。

问题 1：我是否应该使用 PIXI Prepare 插件，这有帮助吗？如果有，我该如何实际使用它。它的文档非常有限。

问题 2：跨多个纹理的帧是个坏主意，这可能是原因和原因吗？

我正在做的总结示例：

function loadSpriteSheet(callback){
  let loader = new PIXI.loaders.Loader()
  loader.add('http://mysite.fake/sprite1.json')
  loader.add('http://mysite.fake/sprite2.json')
  loader.add('http://mysite.fake/sprite3.json')
  loader.once('complete', callback)
  loader.load()
}  

loadSpriteSheet(function(resource){
  // helper function to get all the frames from multiple textures
  let frameArray = getFrameFromResource(resource)
  let animSprite = new PIXI.extras.AnimatedSprite(frameArray)
  stage.addChild(animSprite)
  animSprite.play()  
})

Answer 1

问题 1

所以我找到了一个解决方案，可能不是解决方案，但它对我很有效。准备插件是正确的解决方案，但从未奏效。 WebGL 需要上传整个纹理而不是帧。纹理上传到 GPU 的方式是通过renderer.bindTexture(texture)。当 PIXI 加载器接收到精灵图集 url 时，例如my_sprites.json 它会自动下载图像文件并在加载器资源中将其命名为mysprites.json_image。所以你需要抓住它，制作纹理并将其上传到 GPU。所以这里是更新的代码：

let loader = new PIXI.loaders.Loader()
loader.add('http://mysite.fake/sprite1.json')
loader.add('http://mysite.fake/sprite2.json')
loader.add('http://mysite.fake/sprite3.json')
loader.once('complete', callback)
loader.load()


function uploadToGPU(resourceName){
  resourceName = resourceName + '_image'
  let texture = new PIXI.Texture.fromImage(resourceName)
  this.renderer.bindTexture(texture)
}

loadSpriteSheet(function(resource){
  uploadToGPU('http://mysite.fake/sprite1.json')
  uploadToGPU('http://mysite.fake/sprite2.json')
  uploadToGPU('http://mysite.fake/sprite3.json')

  // helper function to get all the frames from multiple textures
  let frameArray = getFrameFromResource(resource)
  let animSprite = new PIXI.extras.AnimatedSprite(frameArray)
  this.stage.addChild(animSprite)
  animSprite.play()  
})

问题 2

我从未真正发现并回答，但问题 1 的解决方案使我的动画非常流畅，所以在我的情况下，我没有发现性能问题。