Question

我需要一些帮助来了解从spritesheet创建PIXI.extras.AnimatedSprite的最佳实践。我正在加载3个中等大小的spritesheets，用于1个动画，由TexturePacker创建，我收集所有帧然后播放。然而第一次播放动画时非常不顺畅，而且几乎立即跳到最后，从那时起它起到了非常流畅的作用。我读了一下，我可以看到两个可能的原因。 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加载程序收到sprite atlas 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的解决方案使我的动画非常流畅，所以在我的情况下，我认为没有性能问题。

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

1 个答案: