Jump to content

SpriteSheet load problem


HugoLuc
 Share

Recommended Posts

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! =)

Link to comment
Share on other sites

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$"
}

 

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...