Search the Community
Showing results for tags 'sprite spritesheet json cache'.
Found 1 result
-
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! =)
