Jump to content

Any SpriteSheet Tutorials


Recommended Posts

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?

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

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

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



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

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

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

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

DalekRAni = new Animation (DalekR1);
DalekRAni.animationSpeed = 0.1;        
//=====================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);


Link to comment
Share on other sites


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


Link to comment
Share on other sites

  • 1 month later...

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

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.

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.


  • Recently Browsing   0 members

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