Processing 1.0 - Processing Discourse - Most efficient way of scrolling background?

We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.

Index › Programming Questions & Help › Programs › Most efficient way of scrolling background

‹ Previous Topic | Next Topic ›

Pages: 1

Most efficient way of scrolling background? (Read 1402 times)

Bejoscha

Most efficient way of scrolling background?
Mar 10^th, 2010, 3:48am

As I am sure others have done this before,
what is the most effective way to have a "background image" scroll (e.g. horizontally).

The idea would be to have a 800x600 drawing-area but an image of greater size as "background" and then move this background image as things are happening in the sketch to give the illusion of "scrolling along"
This scrolling of the background should be independent of what else is done in the sketch.

I am sure I could do it with my current skills already, but I seek the most efficient way of doing it and am less sure I could get to it...

Any link to an example-code would be appreciated.

antiplastik YaBB Moderator Offline Posts: 699 France	Re: Most efficient way of scrolling background? Reply #1 - Mar 10^th, 2010, 4:44am I would use an image. Code: x = constrain(x, 0, backgroundImage.width - width); y = constrain(y, 0, backgroundImage.height - height); image(backgroundImage, -x, -y);

fry YaBB Moderator Offline Posts: 2623 mass, usa	Re: Most efficient way of scrolling background? Reply #2 - Mar 10^th, 2010, 5:57am and use set() for best image performance since it's not being scaled/rotated/etc.

Bejoscha

Re: Most efficient way of scrolling background?
Reply #3 - Mar 10^th, 2010, 7:46am

Thanks for the advice!
I've tried it. So the following example is "the best" I can do?

Code:


PImage img;
int x,y;
void setup()
  {
    size(800,600);  
    img = loadImage("rain.jpg"); // image is 1600 x 600
  }
void draw()
{
  //  background(0); 
      // not needed as image is bigger than size 
     // and thus overwrites all areas
  x = constrain(x, 0, img.width - width);    
     // ensures that "scrolling" stops at right end of image
  // y = constrain(y, 0, img.height - height); 
     // Not needed here, as scolling only in x
  image(img, -x, 0);  
     // overwrites the whole screen with the "shifted" image
  x = frameCount;     
     // advances the image with each new frame
     // do whatever is wanted from here on 
     // like after a call of background();
  stroke(0,0,0);
  ellipse(mouseX,mouseY,15,15);
}

@fry: I was not sure what to make of this comment. Use set() for what?

Giles Senior Member Offline Posts: 252	Re: Most efficient way of scrolling background? Reply #4 - Mar 10^th, 2010, 8:16am Using set to draw the image rather than image... set(-x, 0, img) replaces image(img, -x, 0);

subpixel

Re: Most efficient way of scrolling background?
Reply #5 - Mar 10^th, 2010, 8:35am

What do you want to do when you run out of image to scroll along with?

If you make an image that has "seamless" edges (or indeed multiple images that join together), you can keep the scrolling going by dropping new images down as you go along. This is more complicated, of course, but just with one image repeating it is easy enough.

-spxl

Processing: subpixels.com, OpenProcessing.org | VJ portfolio: SPXL.TV

Bejoscha Full Member Offline Posts: 120	Re: Most efficient way of scrolling background? Reply #6 - Mar 11^th, 2010, 3:16am Thanks for all the help. The idea I am following is to create a game with levels bigger than the screen. So when the image is at its end, as is the level. (And I'll of course have to "catch" this, which I will.) I have not yet made up my mind how I am going to do it exactly, though.

Pages: 1

‹ Previous Topic | Next Topic ›