Loading Animation Successfully

[yxun]

I have loaded animation successfully. But there is one thing I changed in pixi.dev.js. ( That means I still missed something in our superSeaLion.js) But anyway it works now.

Here is my steps:

1. Create folder animations under app/ 2.Copy animation assets ,folder ssl from image_src/ssl to app/animations

2. Writes code in superSeaLion.js as following:

   var assetsToLoader = ["animations/ssl/skeleton.json", "animations/ssl/skeleton.atlas"];

   // create a new loader loader = new PIXI.AssetLoader(assetsToLoader);

   // use callback loader.onComplete = onAssetsLoaded

   //begin load loader.load();

   // create an new instance of a pixi stage var stage = new PIXI.Stage(0xFFFFFF, true);

   // create a renderer instance var renderer = new PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);

   // set the canvas width and height to fill the screen renderer.view.style.display = "block";

   // add render view to DOM document.body.appendChild(renderer.view);

   function onAssetsLoaded() { var spineBoy = new PIXI.Spine("animations/ssl/skeleton.json");

   //spineBoy.position.x = 200; //spineBoy.position.y = 400;

   //spineBoy.scale.x = spineBoy.scale.y = window.innerHeight / 400; // set up the mixes! //spineBoy.stateData.setMixByName("walk", "jump", 0.2); //spineBoy.stateData.setMixByName("jump", "walk", 0.4);

   spineBoy.state.setAnimationByName("jump", true);

   stage.addChild(spineBoy);

   stage.click = function() { //spineBoy.state.setAnimationByName("jump", false); spineBoy.state.addAnimationByName("jump", true); } } requestAnimFrame(animate);

   function animate() {

   requestAnimFrame( animate );
   renderer.render(stage);

   }

3. In pixi.dev.js, comment line 12926 and 12927, which are // PIXI.TextureCache[i].trim.x = 0; // PIXI.TextureCache[i].trim.y = 0;

Step 4 is something I should not do, But after that, we can load animation successfully. So I need some help to solve this issue.

[warycat]

Though I did not find your test file in the repo. I read the post. Does that mean we don't have to use the atlas file? Cause you put it in the loader but not actually loaded it.

[yxun]

Let me push it when I arrive at school. We do need atlas file. And we don't need any extra changes.

Sent from my iPhone

On May 13, 2014, at 9:47 AM, warycat notifications@github.com wrote:

Though I did not find your test file in the repo. I read the post. Does that mean we don't have to use the atlas file? Cause you put it in the loader but not actually loaded it.

— Reply to this email directly or view it on GitHub.

[yxun]

I have pushed it. You can check it now. One thing I want to mention again is, I changed the pixi.dev.js which I should not do but anyway it works now. I hope we can solve this issue to add some code to let animation work without change pixi.dev.js.

[warycat]

@detroitteatime can you provide the json transform link?

[warycat]

@detroitteatime @yxun test the converted atlas json file with the animation file and png file together

[yxun]

http://my.shrt.ws/mct/base/tools/atlastojson.html This is the link Mark gave me. But I don't know how to use it.

[yxun]

I have pushed all updated animations except ssl. I have pushed the json and png files generated by texturepacker under assets/textures/ I have written an ID and object name list file in assets/List.txt

[warycat]

@yxun now I can load the animation, remove all the atlas files, and all the separated packed png files, they can be replaced by a single big png and a json atlas file packed by texture packer, which is not the texture packer in spine software.

[yxun]

i have finished new ssl and turtle animations . Should I update the new textures.json and textrues.png since you have loaded the animation ?

[warycat]

@yxun @detroitteatime we need a atlas.png and atlas.json for everything in image folder. and all animation ssl.anim lobster.anim ... in that folder. and test the assets.

[yxun]

I have pushed a json and a png contains everything in assets/texture/. For animations, the spine tools still need use individual parts png. Or do you have any idea to use parts from that whole png file ?

[yxun]

Do we need individual parts png files ?

[warycat]

no we don't need.

[yxun]

How can you use parts png from big png to make spine animation ? If we change part png path, we also need to update animations in spine.

[yxun]

For example here is our whole png file : https://github.com/warycat/SuperSeaLion/blob/master/assets/textures/textures.png

how to use this in spine to make animations ?

[warycat]

I think as long as the parts image name in texture packer and spine are the same. they should work.

[yxun]

Maybe not. Every time I changed png files path, the parts' position may be different. and we also need to test your way for animations from one whole png

[warycat]

the reason to use one big atlas png is to speed up the load time of our game. In the code you can see the image file path is missing. so it is loaded with the atlas json file which is provided to the loader. yes we need to test it.

[mesargent]

Looks like you been converting atlas to json. Are there any left to do?

On Sun, May 18, 2014 at 11:47 PM, yxun notifications@github.com wrote:

Maybe not. Every time I changed png files path, the parts' position may be different. and we also need to test your way for animations from one whole png

— Reply to this email directly or view it on GitHubhttps://github.com/warycat/SuperSeaLion/issues/25#issuecomment-43470597 .

[mesargent]

The Lobster loads when I move the Lobster folder into the image dir and added references in loader.js. Anyone get the whole png to work with an animation?

[yxun]

Larry and I had loaded all the animations in another approach without .atlas this afternoon. We don't need to convert anything now.

[yxun]

Yes. We have loaded animations by a big whole png. All png and animation files are in app/images/ now