Sign in to follow this  
Ninjadoodle

Spritesheet without json (SOLVED)

Recommended Posts

Hi Guys

 

Just wondering if there is a way to use sprite sheets without the json file.

 

I have a bunch of images (sprite sheets) exported but, they don't have the json files. Is there a way I can load these in panda and maybe provide the height width for each frame and the number of frames?

 

Thank you in advance for any help :)

Share this post


Link to post
Share on other sites

Hi @enpu

 

That actually doesn't seem to bad :)

 

I have one more question ... how would I go making this into an animation?

 

normally I would do ...

 

ninja = game.Class.extend({
    init: function(x, y) {
        this.sprite = new game.Animation([
            game.Texture.fromImage('ninja1.png'),
            game.Texture.fromImage('ninja2.png'),
            game.Texture.fromImage('ninja3.png'),
            game.Texture.fromImage('ninja4.png'),
            game.Texture.fromImage('ninja5.png')
        ]);
 
        this.sprite.anchor.set(0.5, 1.0);
        this.sprite.position.x = x;
        this.sprite.position.y = y;
 
        world.addChild(this.sprite);
    }
})
 
Not too sure how to write this up using cropping?
 
Thank you heaps again!

Share this post


Link to post
Share on other sites

Try this:

var sprite1 = new game.Sprite('spritesheet.png').crop(0, 0, 64, 64);var sprite2 = new game.Sprite('spritesheet.png').crop(64, 0, 64, 64);var sprite3 = new game.Sprite('spritesheet.png').crop(128, 0, 64, 64);var anim = new game.Animation([    sprite1.texture,    sprite2.texture,    sprite3.texture]);

Share this post


Link to post
Share on other sites

I just pushed new SpriteSheet class into develop branch.

 

Now it should be a lot easier to handle spritesheets without json :)

 

Example:

// Creates spritesheet with frame size 138x100var spritesheet = new game.SpriteSheet('spritesheet.png', 138, 100);// Returns sprite using frame 0 from spritesheetvar sprite = spritesheet.frame(0);sprite.addTo(this.stage);// Returns 15 frames long animation, starting from frame 0var anim = spritesheet.anim(0, 15);anim.animationSpeed = 0.3;anim.play();anim.addTo(this.stage);

Share this post


Link to post
Share on other sites

Hi @enpu

 

Just tried the @2x graphics and it doesn't seem to be working ...

 

[Error] TypeError: 'undefined' is not an object (evaluating 'this.frame(index + i).texture')
anim (renderer.js, line 220)
init (level01.js, line 18)
Class (core.js, line 760)
setSceneNow (system.js, line 244)
run (system.js, line 270)
(anonymous function) (core.js, line 536)
animate (core.js, line 446)
 
I think its trying to load a high res texture on the @1x file

Share this post


Link to post
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...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.