How to animate/move an array of images across the screen once loaded in void draw() ?

jackarg

Hello, I am working with a PImage array of 10 images which I have made appear in the screen as below. They serve as a background environment for a game.

I wish to "pan" the screen when a character walks towards the edge of it, this means making all the images move in the direction opposite of the character's, and so revealing images which are hidden by the size limitation of the window.

This is in void draw(), to load the images:

for(int i = 0; i < images.length; i++) {
  image(images[i], x,  height-images[i].height - 30); //to make every image align at bottom of screen
  x = x+images[i].width + 4; //to make images appear after another
}

For me the common sense option would be to have an x++ type x coordinate in draw() for each image, but it seems that for arrays this is more complicated, so I'm not sure how to achieve this.

Thank you in advance for your help, and happy new year!

bmundt6

You can store the whole array in an offscreen buffer as a PGraphics object. Inside setup() you can do something like

int totalWidth = 4*images.length;;
for(PImage i : images) totalWidth += i.width;
PGraphics pg = createGraphics(totalWidth, height);
pg.begindraw();
//add your loop with pg.image(...) to load the whole array
pg.endDraw();

Then keep track of player position and render the entire background at the appropriate coordinates, e.g. image(pg, -playerX, 0).

jackarg

Hi, If it's not too much of a bother could you detail your code a bit more? I'm not very well experienced and while I looked into PGraphics a bit I have a hard time working with it for now. Thank you!

kfrajer

Here is a demonstration only along one axis. The sketch is divided along its height. The bottom shows the full PGraphics object. The top shows a section of the PGraphics only. The PGraphics has a size of 4*width and height/2, where width and height are values that define the size of the main sketch.

Kf

int n=4;
PGraphics pg;

void setup() {
  size(200, 200);

  pg = createGraphics(width*n, height/2);
  pg.beginDraw();
  for (int j=0; j<n; j++) {
    PImage img = createImage(width, height/2, RGB);
    img.loadPixels();
    color c=color(random(50, 200));
    for (int i = 0; i < img.pixels.length; i++) {
      img.pixels[i] = c;
    }
    img.updatePixels();

    pg.image(img, width*j, 0, width, height/2);
  }
  pg.endDraw();
  noFill();
  stroke(35,250,35);
  strokeWeight(3);
}

void draw() {
  background(255,0,0);
  PImage wow=pg.get(mouseX*4,0,width,height/2);
  image(wow, 0, 0, width, height/2);
  image(pg,0,0+height/2,width,height);
  line(mouseX,height/2,mouseX,height);
}

jeremydouglass

When looking for discussion of the general concept and searching for further code examples (like @kfrajer 's) you may wish to search for examples of "side-scrolling" and, in particular, "parallax scrolling." These terms describe the family of algorithms for moving background images in the opposite direction of the avatar's perceived motion, with "parallax" also moving a stack of different transparent images at different speeds in order to create the illusion of depth. Even a single background image that moves at a slower rate than the platforms of a platform game can create a parallax effect.

• https://en.wikipedia.org/wiki/Parallax_scrolling

jackarg

Thank you everyone. Everything works now. Very interesting to learn about parallax scrolling.