Spritesheet without json (SOLVED)

[Ninjadoodle]

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

[enpu]

Unfortunately there is no build in way to do that. You will have to manually crop every sprite.

var sprite = new game.Sprite('spritesheet.png').crop(0, 0, 64, 64);

[Ninjadoodle]

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!

[enpu]

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]);

[Ninjadoodle]

Awesome, thank you again for the help! I really appreciate it

[enpu]

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);

[Ninjadoodle]

Hi @enpu

 

Wow! Awesome ... will this work with work with @2x gfx?

 

Thanks for all the hard work!!!

[enpu]

It should work if you multiply frame size with game.scale

[Ninjadoodle]

Cool, already doing that to update all my positions

 

Again, thank you! I really appreciate the hard work you're putting into this cool engine!

[Ninjadoodle]

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

[enpu]

Hmm working ok here, can i see your full code?

[Ninjadoodle]

Hi @enpu

 

Sorry!! My fault! I had the wrong number of frames entered.

 

I misunderstood the way setting the animation length works.

 

It works flawlessly now!

 

Thanks again and sorry about the confusion

[seanBlythe]

I think it may be easier to set the size of your sprites through a graphics programs instead of manipulating them with code.