🔍

Spritesheet Animation in Processing




DOWNLOAD THE SHEET HERE



PImage main_sheet;

int DIM_X = 3;
int DIM_Y = 3;
PImage[] sprites = new PImage[DIM_X*DIM_Y];

void init_spritesheet() {

  main_sheet = loadImage("monster_sheet.png");
  int W = main_sheet.width/DIM_X;
  int H = main_sheet.height/DIM_Y;

  for (int i=0; i<sprites.length; i++) {
    int x = i%DIM_X*W;
    int y = i/DIM_Y*H;
    sprites[i] = main_sheet.get(x, y, W, H);
  }
}

int anim_tick = 0;
void animate(int _x, int _y, int _w, int _h, int[] _arr ) {
  
  image(sprites[_arr[anim_tick]], _x, _y, _w, _h);
  if (frameCount % anim_speed == 0) {
    if (anim_tick<_arr.length-1) {
      anim_tick++;
    } else {
      anim_tick = 0;
    }
  }
}



// ---------------------------------------------
// ---------------------------------------------
// ---------------------------------------------

// the monster sheet has 9 sprites in it in a 3x3 matrix
// 0 - 1 - 2
// 3 - 4 - 5
// 6 - 7 - 8
int[] front_anim = {6,7,8,7};
int[] back_anim = {0,1,2,1};
boolean is_front_facing = true;
int anim_speed = 6; // animation speed 


// ---------------------------------------------
// ---------------------------------------------
// ---------------------------------------------

void setup() {
  
  size(128, 128); // set stage size
  init_spritesheet(); // initally setup the spritesheet
  noSmooth();
  imageMode(CENTER);
  frameRate(60);
}

 
// ---------------------------------------------
 

void draw() {

   // switch between two animation stacks
   if(is_front_facing){
     background( 22,255,22 ); 
     animate(64,64, 64,64, front_anim);
   }else{
     background( 122,155,22 ); 
     animate(64,64, 64,64, back_anim);
   }
    
}

// ---------------------------------------------

// mouse click changes animation > respective bool value ;)
void mousePressed(){is_front_facing=false; }
void mouseReleased(){is_front_facing=true; }