Spine items performance / optimization

[lukaszwojciak]

Hi! 

I'm developing a game using ejecta and pixi.js. What I noticed is that I can easily put 400 elements (bunnies) and render them @60fps, but when trying to do the same with spine animations I can go as far as 15 items before the cpu load goes wild and performance decreases.

Is there a way to optimize spine object creation and rendering? 

Below is an example derived from the spine boy demo:
 

function onAssetsLoaded() {    var num = 10,        spineBoy = [];    for (var i = 0; i < num; i += 1) {        spineBoy[i] = new PIXI.Spine("data/spineboySpineData.json");        spineBoy[i].position.x = i * 40 + 40;        spineBoy[i].position.y = h;        spineBoy[i].scale.x = spineBoy[i].scale.y = h / 2400;        spineBoy[i].stateData.setMixByName("walk", "jump", 0.2);        spineBoy[i].stateData.setMixByName("jump", "walk", 0.4);        spineBoy[i].state.setAnimationByName("walk", true);        stage.addChild(spineBoy[i]);    }}

[lukaszwojciak]

It seems that the major load is happening in the spine runtime - For pixi to be effective with spine the runtime must be updated to the latest spine features.

For now you can find a neat build of pixi.js here: https://github.com/MKelm/pixi.js 
It uses the native atlas files provided by pixi export (no texture packer - yay!) and it's actually 50% faster than the current pixi implementation in the master branch.