PIXI.js AnimatedSprite задержка при первой игре

Question

Мне нужна помощь в понимании того, как лучше всего создавать PIXI.extras.AnimatedSprite из таблиц спрайтов. В настоящее время я загружаю 3 спрайт-листа среднего размера для одной анимации, созданной TexturePacker, я собираю все кадры и затем играю. Однако в первый раз воспроизведение анимации происходит очень плавно, и почти сразу прыгает до конца, с тех пор она воспроизводится действительно плавно. Я немного прочитал, и я вижу 2 возможные причины. 1) Задержка может быть вызвана временем, затрачиваемым на загрузку текстур в графический процессор. Существует плагин PIXI под названием prepare renderer.plugins.prepare.upload что должно позволить мне загрузить их перед игрой и, возможно, сгладить начальный цикл. 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 требуется загружать всю текстуру (ы), а не фреймы. Загрузка текстур в графический процессор renderer.bindTexture(texture), Когда загрузчик PIXI получает URL-адрес атласа спрайта, например my_sprites.json он автоматически загружает файл изображения и называет его как mysprites.json_image в ресурсах загрузчиков. Так что вам нужно взять это, сделать текстуру и загрузить ее в графический процессор. Итак, вот обновленный код:

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 сделало мои анимации совершенно плавными, поэтому в моем случае я не вижу проблем с производительностью.