HugoLuc Posted February 24, 2016 Share Posted February 24, 2016 Hi all! I'm very very new to all this, but I'm trying to go from an example () and hitting a issue with the sprites. Im using ShoeBox to generate the JSON that looks like this: { "frames": { "ladybug-01": { "frame": {"x":0, "y":86, "w":71, "h":85}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":71,"h":85}, "sourceSize": {"w":71,"h":85} }, "ladybug-02": { "frame": {"x":72, "y":86, "w":71, "h":85}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":71,"h":85}, "sourceSize": {"w":71,"h":85} }, "ladybug-03": { "frame": {"x":73, "y":0, "w":71, "h":85}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":71,"h":85}, "sourceSize": {"w":71,"h":85} }, "ladybug-04`": { "frame": {"x":0, "y":0, "w":72, "h":85}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":72,"h":85}, "sourceSize": {"w":72,"h":85} } }, "meta": { "image": "sprites.png", "size": {"w": 145, "h": 172}, "scale": "1" } } and my html looks like this: <html> <head> <head> <title>PIXI Concentration</title> <style> body { margin: 0; padding: 0; } </style> <script src="lib/pixi.js"></script> </head> </head> <body> <script type="text/javascript"> var renderer = PIXI.autoDetectRenderer(800, 600); document.body.appendChild(renderer.view); // create the root of the scene graph var stage = new PIXI.Container(); PIXI.loader .add('lady_frames/sprites.json') .load(onAssetsLoaded); var movie; function onAssetsLoaded() { // create an array of textures from an image path var frames = []; for (var i = 0; i < 4; i++) { //var val = i < 10 ? '0' + i : i; // magically works since the spritesheet was loaded with the pixi loader frames.push(PIXI.Texture.fromFrame(i) } // create a MovieClip (brings back memories from the days of Flash, right ?) movie = new PIXI.extras.MovieClip(frames); /* * A MovieClip inherits all the properties of a PIXI sprite * so you can change its position, its anchor, mask it, etc */ movie.position.set(300); movie.anchor.set(0.5); movie.animationSpeed = 0.5; movie.play(); stage.addChild(movie); animate(); } function animate() { movie.rotation += 0.01; // render the stage container renderer.render(stage); requestAnimationFrame(animate); } </script> </body> </html> I'm getting this message in the console: "Uncaught Error: The frameId "0" does not exist in the texture cache" I imagine it could be something with my JSON file which is not formatted correctly, or my call to it wich is wrong. I looked around in the forum but couldn't find any solution that worked! Any help is MUCH appreciated! =) Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted February 24, 2016 Share Posted February 24, 2016 //MAGIC, will be removed in next version frames.push(PIXI.Texture.fromFrame('ladybug-0'+i); //normal way frames.push(PIXI.loader.resources['ladybug-0'+i].texture); Quote Link to comment Share on other sites More sharing options...
HugoLuc Posted February 24, 2016 Author Share Posted February 24, 2016 Cool! Thanks for the tip. I found out that Pixi uses the meta smartUpdate generated by TexturePacker in some way. And as far as I could tell It generates is based on the name of the files you use. It would be nice if someone could confirm that! If so, that would be really restrictive since Texture pack costs $30. What i ended up doing was generating the meta with the free version, and then changing all the parameters to match another texture made from Shoebox. -So much work =(- "meta": { "app": "http://www.codeandweb.com/texturepacker", "version": "1.0", "image": "bug.png", "format": "RGBA8888", "size": {"w":145,"h":170}, "scale": "1", "smartupdate": "$TexturePacker:SmartUpdate:70620b4757f40c61abf7fd2ab5dfa42d:785a1468a9cf50cbe8baeadbe4864f98:2320c35167c7522c7b3c11f94f5163d0$" } Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted February 24, 2016 Share Posted February 24, 2016 Yeah, the only field its using is "image" : https://github.com/pixijs/pixi.js/blob/master/src/loaders/spritesheetParser.js That's good idea, you can add PR with "default" value which will be the same name as json file UPD. shoebox generates "meta" too. No need of PR Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.