Any SpriteSheet Tutorials

[manic.blood1993]

Hey everyone,

I've been developing with Panda for the last 3 months now. Great engine, I prefer to PIXI because of the long class names,
makes it very easy to see what inherits from where. However I have become stuck with Spritesheets and Animations,
Please could anyone point me in the right direction?

//OFFICIAL DOCUMENTATION
// Creates spritesheet with frame size 138x100
var spritesheet = new game.SpriteSheet('spritesheet.png', 138, 100);

// Returns sprite using frame 0 from spritesheet
var sprite = spritesheet.frame(0);
sprite.addTo(this.stage);

// Returns 15 frames long animation, starting from frame 2
var anim = spritesheet.anim(15, 2);
anim.animationSpeed = 0.3;
anim.play();
anim.addTo(this.stage);

// Define animation frames with array
var anim = spritesheet.anim([0, 0, 1, 2, 3, 2]);

//=================================================================================//

//PERSONAL ATTEMPTS

//====================SPRITESHEETS=====================================//
//=====================================================================//
        var SS = new game.Sprite('DALEKHASH.png');
        
        //Dalek Standing
        var DalekS1 = SS.crop(157,1,58,123); //var DalekS2 = SS.crop(x,y,w,h);
        var DalekS1 = new game.Sprite;
        //var DalekS3 = SS.crop(x,y,w,h); var DalekS4 = SS.crop(x,y,w,h);
        //Dalek Up
        var DalekU1 = SS.crop(868,1,64,118); //var DalekU2 = SS.crop(x,y,w,h);
        var DalekU1 = new game.Sprite;
        //var DalekU3 = SS.crop(x,y,w,h); var DalekU4 = SS.crop(x,y,w,h);
        //Dalek Down
        var DalekD1 = SS.crop(157,1,58,123); //var DalekD2 = SS.crop(x,y,w,h);
        var DalekD1 = new game.Sprite;//var DalekD3 = SS.crop(x,y,w,h); var DalekD4 = SS.crop(x,y,w,h);
        //Dalek Left
        var DalekL1 = SS.crop(1232,1,89,115); //var DalekL2 = SS.crop(x,y,w,h);
        var DalekL1 = new game.Sprite;//var DalekL3 = SS.crop(x,y,w,h); var DalekL4 = SS.crop(x,y,w,h);
        //Dalek Right
        var DalekR1 = SS.crop(1133,1,97,115); //var DalekR2 = SS.crop(x,y,w,h);
        var DalekR1 = new game.Sprite;
        //var DalekR3 = SS.crop(x,y,w,h); var DalekR4 = SS.crop(x,y,w,h);
        
//=======================ANIMATIONS====================================//
//=====================================================================//

//DalekRAni = new Animation (DalekR1,DalekR2,DalekR3,DalekR4);
DalekSAni = new Animation (DalekS1);
DalekSAni.animationSpeed = 0.1;        
DalekSAni.play();
    
DalekUAni = new Animation (DalekU1);
DalekUAni.animationSpeed = 0.1;        
DalekUAni.play();

DalekDAni = new Animation (DalekD1);
DalekDAni.animationSpeed = 0.1;        
DalekDAni.play();

DalekLAni = new Animation (DalekL1);
DalekLAni.animationSpeed = 0.1;        
DalekLAni.play();

DalekRAni = new Animation (DalekR1);
DalekRAni.animationSpeed = 0.1;        
DalekRAni.play();
    
//=====================STAGE MOVEMENTS==================================//
//======================================================================//
  //This is where we add IF statement for MOVEMENT
 
        if (game.keyboard.down('UP')) DalekUAni.addTo(this.stage);
        else if (game.keyboard.down('DOWN')) DalekDAni.addTo(this.stage);
        else if (game.keyboard.down('LEFT')) DalekLAni.addTo(this.stage);
        else if (game.keyboard.down('RIGHT')) DalekRAni.addTo(this.stage);
        else DalekSAni.addTo(this.stage);

zArray3.zip

[SkyzohKey]

The documentation about animations is outdated, it seems that the code for that in the v2 is not finished cuz I never succeeded at using animations, too.

I think you'll have to write your own Animation system. x:

[manic.blood1993]

WORKING SPRITESHEETS! Woohoo

While scouring these forums once again, I came across a very helpful series of Video Tutorial for PIXI v1

Make sure that in the TexturePacker program, use PIXI Spritesheet, NOT PANDA, JSON HASH, JSON ARRAY

 

This should save a lot of CPU load times from just loading a few large spritesheets into MEM once!

Instead of repeatedly loading small images up again and again until "OUT OF MEM" Error.

 

// Animation System I will attempt again today before work, hope to have something before end of week

 

[manic.blood1993]

Woah time flew by, been having a few changes of contract at work. So a lot of stress. Needed to take some time out. However with that done I hope to start developing Animation Examples by Nov

Btw Lesser Panda seems to be making great progress, congrats

Ok about time for some changes now all fireworks are done. Functional anim sys i will put here today. None of this OOriented stuff but seems to work.

See new thread on Animation FPS

Catch u later