0

the title might be a little confusing but im trying to get a walking animation going from a sprite sheet. Its got 8 different walking positions and it seems everytime it changes i have to load that sprite sheet again as apose to just cropping the original if you get what i mean otherwise it wont show.

PImage Body;

int WidthSpacing = 64;
int HeightSpacing = 64;
int XCharacter = 1;
int YCharacter = 10;

int WalkingCounter = 0;
int WalkingSpeed = 2;

void setup()
{
background(200);
size (350, 240);
Body = loadImage("\\Sprites\\Player\\Male\\Default\\Light.png");
}

void draw()
{
WalkAnimation();
}

void WalkAnimation()
{
WalkingCounter++;

if (WalkingCounter == 1 * WalkingSpeed) { XCharacter = 1; LoadBody(); }
if (WalkingCounter == 2 * WalkingSpeed) { XCharacter = 2; LoadBody(); }  
if (WalkingCounter == 3 * WalkingSpeed) { XCharacter = 3; LoadBody(); }
if (WalkingCounter == 4 * WalkingSpeed) { XCharacter = 4; LoadBody(); }
if (WalkingCounter == 5 * WalkingSpeed) { XCharacter = 5; LoadBody(); }
if (WalkingCounter == 6 * WalkingSpeed) { XCharacter = 6; LoadBody(); }
if (WalkingCounter == 7 * WalkingSpeed) { XCharacter = 7; LoadBody(); }
if (WalkingCounter == 8 * WalkingSpeed) { XCharacter = 8; LoadBody(); WalkingCounter = 0; }    
}

void LoadBody()
{
background(200);
Body = loadImage("\\Sprites\\Player\\Male\\Default\\Light.png");
int X = XCharacter * WidthSpacing;
int Y = YCharacter * HeightSpacing;
Body = Body.get(X, Y, WidthSpacing, HeightSpacing);
Body.resize(200, 200);
image(Body, 150, 5);
}

This would be ok if it wasnt for processing taking about 20 frames to load in an image so its impossible for me to get a smooth walking speed. any ideas are appriciated

2 Answers 2

0

Ok i was cropping the original image and saving it into itself as appose to a temp PImage, im an idiot

0

I see that you've already fixed your problem, but I'm going to answer with something that might make your life a little easier: don't call the loadImage() function from the draw() function! Call it from the setup() function instead.

Calling the loadImage() function from draw() causes your images to be loaded over and over again, 60 times per second, so it's really wasteful. Just load them all at startup instead.

You might want to create an array or an ArrayList of PImages, each loaded with a single sprite. Load all of them from the setup() function, and then just change which index of the ArrayList you're drawing to change the sprite.

Here is an example of what your code might look like if you take this approach:

//use an array to hold your sprites
PImage[] bodies = new PImage[8];

//keep track of current index
int spriteIndex = 0;

//switch sprite every X frames
int walkingSpeed = 2;

void setup() {
  size (350, 240);

  int widthSpacing = 64;
  int heightSpacing = 64;
  int YCharacter = 10;

  //loop through every sprite
  for (int i = 0; i < 8; i ++) {

    //you could probably cut down on the loads further, 
    //but 8 at the beginning is much better than X per second
    bodies[i] = loadImage("\\Sprites\\Player\\Male\\Default\\Light.png");

    //use the loop variable to figure out where the sprite is in the main image
    int x = (i+1) * widthSpacing;
    int y = YCharacter * heightSpacing;

    //get the sprite
    bodies[i] = bodies[i].get(x, y, widthSpacing, heightSpacing);

    //resize the sprite
    bodies[i].resize(200, 200);
  }
}

void draw() {
  //draw the background first
  background(200);

  //use existing frameCount variable and modulus to switch sprites every X frames
  if (frameCount % walkingSpeed == 0) {

    //increment the sprite index
    spriteIndex++;

    //if it goes too high, reset it to zero
    if (spriteIndex == 8) {
      spriteIndex = 0;
    }
  }

  //just draw the image, you don't have to keep loading it!
  image(bodies[spriteIndex], 150, 5);
}

I haven't actually tested this code, but this shows the basic approach.

You might also check out the example in this Processing example, which you can view from the Processing editor by going to File -> Examples.

Animation animation1, animation2;

float xpos;
float ypos;
float drag = 30.0;

void setup() {
  size(640, 360);
  background(255, 204, 0);
  frameRate(24);
  animation1 = new Animation("PT_Shifty_", 38);
  animation2 = new Animation("PT_Teddy_", 60);
  ypos = height * 0.25;
}

void draw() { 
  float dx = mouseX - xpos;
  xpos = xpos + dx/drag;

  // Display the sprite at the position xpos, ypos
  if (mousePressed) {
    background(153, 153, 0);
    animation1.display(xpos-animation1.getWidth()/2, ypos);
  } else {
    background(255, 204, 0);
    animation2.display(xpos-animation1.getWidth()/2, ypos);
  }
}



// Class for animating a sequence of GIFs

class Animation {
  PImage[] images;
  int imageCount;
  int frame;

  Animation(String imagePrefix, int count) {
    imageCount = count;
    images = new PImage[imageCount];

    for (int i = 0; i < imageCount; i++) {
      // Use nf() to number format 'i' into four digits
      String filename = imagePrefix + nf(i, 4) + ".gif";
      images[i] = loadImage(filename);
    }
  }

  void display(float xpos, float ypos) {
    frame = (frame+1) % imageCount;
    image(images[frame], xpos, ypos);
  }

  int getWidth() {
    return images[0].width;
  }
}
6
  • Thanks, i will put them in the array list, but the load image is only being called when the sprite changes every 5 frames so it doesnt load the same image more than once if u see what i mean
    – Jason
    Mar 20, 2016 at 22:35
  • @Will Yes, it will load the same image more than once. You should only call loadImage() one time for each image. Here you're loading it every time you're changing it, which is really inefficient. Just keep the images in memory and swap them out when you need them. Even if you only change every 5 frames, that's still 12 unnecessary loads per second. Mar 20, 2016 at 22:37
  • oh i see what you mean, yeh i load it once in the setup now and just crop it every time it changes instead of the code i posted above, thanks :)
    – Jason
    Mar 20, 2016 at 22:40
  • @Will That still seems inefficient. Just do all of the loading and cropping up front. I'll try to edit my answer to include some sample code. Mar 20, 2016 at 22:42
  • @Will I've edited my answer to include a code example. Mar 20, 2016 at 22:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.