I can't figure out how to use the Atlas png instead of every individual .png in the Javascript runtime.
The following code loads the .json file with a reference to the parts:
$.getJSON('animations/Miniloader.json', function(data){
var DidYouKnowBulb = data;
this.renderer = new spine.SkeletonRenderer("animations/");
this.renderer.scale = 1;
this.renderer.load(JSON.stringify(DidYouKnowBulb));
this.renderer.state.data.defaultMix = 0.0;
this.renderer.skeleton.x = 40;
this.renderer.skeleton.y = 300;
this.renderer.animate("DidYouKnowCanvas");
}.bind(this));
And if I understand correctly spine.SkeletonRenderer searches for individual png's with the parts names in the Spine-canvas.js (starting @ line 43):
load: function(jsonText) {
var imagesPath = this.imagesPath;
var json = new spine.SkeletonJson({
newRegionAttachment: function (skin, name, path) {
var image = new Image();
image.src = imagesPath + path + ".png";
var attachment = new spine.RegionAttachment(name);
attachment.rendererObject = image;
return attachment;
}
I was under the impression that there was some functionality in the JS runtime to use the atlas instead of single png's. Also considering 1 image request is easier on the bandwidth than 20 individual ones. Maybe I overlooked it? If this is not the case could you let me know so I can build something myself 🙂 Thanks
EDIT: Okey I might have been a bit too quick with this post because there is clearly Atlas functionality in spine.js, now I just need to figure out how to use it.
EDIT 2: I think I'm closing in at making it work but I'm searching for the TextureLoader that's not there. spine.Textureloader is not a thing in JS. Something I still don't get?
EDIT 3: Got it working through this example: http://www.goodboydigital.com/pixijs/examples/12/ and pixi.js, not my first choice and I'm not sure if I can make that example work with my own animations because it uses .anim files. If someone could tell me how to do it without pixi I would be happy. Also happy for ending this monologue, I'm a lonely coder.
Edit 4: I don't get the bridge between what I have in code and works with just spine.js and spine-canvas.js and this post: http://esotericsoftware.com/forum/spine-js-Spine-JavaScript-Runtime-5042 why is there soo much extra needed to get that to work in comparison to what I have?
Edit 5: With Texturepacker (https://www.codeandweb.com/texturepacker) and the pixi example: http://www.goodboydigital.com/pixijs/examples/12/ I have it working after two days of trying stuff. The texturepacker is used to make the .anim file in a .json format that can be read by the pixiJS-spine library. Something I will use more in the future I guess. Still I would like to know how to get .atlas files working without pixiJS.
Finally got it working! :happy:
For everyone who is still wondering how to do this. Be aware that there are many deprecated ways of doing this.
This is for Pixi Version 3 with the pixi-spine.js plugin and spine.js Version 2.3 with spine-canvas.js, It's 15:32:59 UTC
Thursday, 15 October 2015 😉
Look at this example of Spine working in pixi:
http://pixijs.github.io/examples/index.html?s=spine&f=pixie.js&title=Pixie&plugins=pixi-spine
var renderer = PIXI.autoDetectRenderer(800, 600);
document.body.appendChild(renderer.view);
var stage = new PIXI.Container();
PIXI.loader
.add('animation', 'data/spineFile.json')
.load(onAssetsLoaded);
var postition = 0;
stage.interactive = true;
function onAssetsLoaded(loader,res)
{
var spineAnimation = new PIXI.spine.Spine(res.animation.spineData);
var scale = 0.7;
spineAnimation.position.x = 1024 / 3;
spineAnimation.position.y = 500;
spineAnimation.scale.x = spineAnimation.scale.y = scale;
stage.addChild(spineAnimation);
spineAnimation.state.setAnimationByName(0, 'animationCall', true);
renderer.render(stage);
animate();
}
function animate()
{
requestAnimationFrame(animate);
renderer.render(stage);
}