pixijs / spine

Pixi.js plugin that enables Spine support.
Other
570 stars 217 forks source link

hey what happend to spine.SpineRuntime.Atlas, AtlasAttachmentParser, SkeletonJsonParser #139

Open johnnotron opened 7 years ago

johnnotron commented 7 years ago

Hiya,

I'm sure I must be missing something... but in current version, I'm not seeing these classes and not sure how to create a spine animation from pre-loaded json and sprite sheets, as stated in the README here

Searched through the latest build and can't see those methods.. Any clues? Thanks

ivanpopelyshev commented 7 years ago

OK, I'll check in hour or two. Strange, I thought I moved all this stuff in new version.

ivanpopelyshev commented 7 years ago

Yeah, TextureAtlas and SkeletonJson changed their locations.

Atlas -> core.TextureAtlas SkeletonJson -> core.SkeletonJson

Please try that one:

var rawSkeletonData = JSON.parse("$jsondata"); //your skeleton.json file here
var rawAtlasData = "$atlasdata"; //your atlas file 

var spineJsonParser = new core.SkeletonJson(new core.AtlasAttachmentLoader(spineAtlas));
var skeletonData = spineJsonParser.readSkeletonData(resource.data);

var spineAtlas = new spine.core.TextureAtlas(rawAtlasData, function(line, callback) {
        //pass the image here.
        callback(PIXI.BaseTexture.fromImage(line));
    }); //specify path, image.png will be added automatically

var spineJsonParser = new PIXI.spine.core.SkeletonJson(new PIXI.spine.AtlasAttachmentParser(spineAtlas));
var skeletonData = spineJsonParser.readSkeletonData(rawSkeletonData);

//now we can create spine instance
var spine = new PIXI.spine(skeletonData);

If it works, I'll modify the example

johnnotron commented 7 years ago

Thanks man got it working! example above basically works apart from need to add .core before AtlasAttachment..Loader... and its (AtlasAttachmentLoader) now.

Here is my example packing all my spine assets in TexturePacker then using the json from spine

//load some sprite sheets that contain your spine's png assets
PIXI.loader.add({name:"mySpineSprites1",url:"./mySpineSprites1.json"} );
PIXI.loader.add({name:"mySpineSprites2",url:"./mySpineSprites2.json"} );

//example load raw spine animation json data outputted from spine
/*The spine loader middleware will try to parse json and load textures, so change extension to .spine to make it load raw data*/
PIXI.loader.add({name:"spineAnim", url:"./spineAnimJson.spine", options:{}});
PIXI.loader.load(onLoaded);

onLoaded = function(loader, resources){
  //parse your raw spine data
  var spineData = JSON.parse(resources.spineAnim.data);
  var textureResources = [resources['mySpineSprites1'],resources['mySpineSprites2']];
  var mySpine = makeASpine(spineData,textureResources, /* false if didn't trim .png from sprites in TexturePacker*/);
};

makeASpine = function(spineData, spriteResources, stripExtensions){

  var spineAtlas = new PIXI.spine.core.TextureAtlas();
  var allTextures = {};
  //collect up a list of textures in those resources
  for (var t = 0; t < spriteResources.length; t++) {
    for (var texName in spriteResources[t]) {
      if (spriteResources[t].hasOwnProperty(texName)) {
        allTextures[texName] = texs[t][texName];
      }
    }
  }
  //add them to spine atlas
  spineAtlas.addTextureHash(allTextures, stripExtensions || true);

  var attachmentParser =new PIXI.spine.core.AtlasAttachmentLoader(spineAtlas);
  var spineJsonParser = new PIXI.spine.core.SkeletonJson(attachmentParser);
  var skeletonData = spineJsonParser.readSkeletonData(spineData);

  return new PIXI.spine.Spine(skeletonData);
};
ivanpopelyshev commented 7 years ago

OK, modified it in README accordingly. Also the next example after that isnt working, gonna update it too, a bit later

ivanpopelyshev commented 7 years ago

Btw, it was about texture spritesheet too, so I reopen it. I'll embed your "spriteResources" hack and we'll get a new example ^_^

cursedcoder commented 7 years ago

should be better now #141