[Processing 3] Moving through a map bigger than the screen

Processing Beginners
1

Hello,

I’m currently trying to make a arcade video game, with a vertical scrolling. I use eclipse and processing 3 as a library import into java classes and I don’t face any issue about it.

I now get two variables for screenHeight and screenWeight (768 and 1024).
My map is about 1024x15669

I try to load the map as a background image but i’m facing to a RuntimeException : background image must be the same size as your application. It’s logic, the issue is explicit.

Is there a way to fix this?

Thanks in advance

1 Like
2

Hi! Welcome to the forum! :slight_smile:

Are you trying to draw the image doing background(img)?

If that’s the case, I think you should be calling image(img, x, y, width, height) instead, and then you change x and y to control which part of the background you want to see, probably using negative numbers to move the background left and up.

Might that work?

3 Likes
3

You can do a search in the forum about panning or scrolling. These are links from the previous forum:

Constraining an image while panning and zooming - Processing 2.x and 3.x Forum

https://forum.processing.org/two/discussion/4945/zooming-and-panning/p1

Having issues with dragging when creating a map - Processing 2.x and 3.x Forum

Kf

1 Like
4

Do you actually have a 1024x15669 image file, like a jpg, that you are loading and want to scroll? Or is it many tiles, or are you generating the background image dynamically inside your sketch…?

Here is a very very simple example of a vertical scroller written in PDE (not Eclipse). It demonstrates using translate and the coordinate system to keep track of where you are, then check collision with the viewframe to decide what to render (e.g. only part of a very large graphic, or only certain tiles from a map).

// https://discourse.processing.org/t/processing-3-moving-through-a-map-bigger-than-the-screen/10393/2
// scrolling

PVector view;
PVector scroll;
PImage img;
int ymax = 400;

void setup() {
  view = new PVector(0, -20);  // starting location
  scroll = new PVector (0, 1); // scrolling direction and speed 
  // example image to place on the map
  img = loadImage("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Processing_3_logo.png/480px-Processing_3_logo.png");
  img.resize(200,200);
}

void draw() {
  background(192);
  translate(view.x, -view.y);  // align canvas to view
  content();  // draw contents
  view.add(scroll);  // scroll
  if (view.y > ymax) {
    view.y = -height*1.5;  // bounce from end to start
  }
}

void content() {
  if(view.y + height > 100 && view.y < 100 + img.height ){  // display image if in view
    image(img, 20, 100);
  }
  for (int i=0; i<=ymax; i+=20) {  // display lines
    if (i > view.y && i < view.y + height + 20) {  // ...if in view
      line(0, i, width, i);
      text(i, 0, i);
    }
  }
}

36%20PM

5

Also: in general, don’t use background() to display an image; use it for color, and use image() for images.

6

Alternatively we can use set() in place of background():

Both set() & background() merely copy a PImage’s pixels[] raw to the canvas.

7

Also for scrolling, see this recent gallery share:

1 Like