1

I need some help understanding what the best practice is for creating a PIXI.extras.AnimatedSprite from spritesheet(s). I am currently loading 3 medium-sized spritesheets for 1 animation, created by TexturePacker, I collect all the frames and then play. However the first time playing the animation is very unsmooth, and almost jumps immediately to the end, from then on it plays really smooth. I have read a bit and I can see 2 possible causes. 1) The lag might be caused by the time taken to upload the textures to the GPU. There is a PIXI plugin called prepare renderer.plugins.prepare.upload which should enable me to upload them before playing and possibly smoothen out the initial loop. 2) Having an AnimatedSprite build from more than one texture/image is not ideal and could be the cause.

Question 1: Should I use the PIXI Prepare plugin, will this help, and if so how do I actually use it. Documentation for it is incredibly limited.

Question 2: Is having frames across multiple textures a bad idea, could it be the cause & why?

A summarised example of what I am doing:

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()  
})
LJᛃ
  • 7,655
  • 2
  • 24
  • 35
Brenwell
  • 767
  • 10
  • 24
  • 3
    I have totally the same problem and I started topic on pixi.js forum (and you can see my code there) http://www.html5gamedevs.com/topic/28032-make-movieclip-from-several-atlases-and-play-it-whithout-lags/ but I still have no answer on that question, and prepare plugin seems not working. – Dmitry Malugin Mar 13 '17 at 07:57
  • So if you found solution please post it here – Dmitry Malugin Mar 13 '17 at 08:01
  • Glad to see its not just me, I still haven't found a good solution, but I have been busy, when/if I do I will share in both places. – Brenwell Mar 13 '17 at 09:13

1 Answers1

2

Question 1

So I have found a solution, possibly not the solution but it works well for me. The prepare plugin was the right solution but never worked. WebGL needs the entire texture(s) uploaded not the frames. The way textures are uploaded to the GPU is via renderer.bindTexture(texture). When the PIXI loader receives a sprite atlas url e.g. my_sprites.json it automatically downloads the image file and names it as mysprites.json_image in the loaders resources. So you need to grab that, make a texture and upload it to the GPU. So here is the updated code:

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()  
})

Question 2

I never really discovered and answer but the solution to Question 1 has made my animations perfectly smooth so in my case, I see no performance issues.

Brenwell
  • 767
  • 10
  • 24