Making a large image move without lag?

Processing Coding Questions
1

Hey!
So I’m trying to implement a background to my 2d platformer. The image moves with the player, just a lot slower. However, moving the image causes a lot of lag. This is my code(simplified):

void draw(){
  playerClass player = playerList.get(0);
  image(backgroundIMG, player.cameraX * 0.05, 400);
  //cameraX is basicaly:
  if(keyPressed && keyCode == RIGHT){
    cameraX += someValue;
  }
}

Here’s a video:

Yeah the art is beautiful I know

1 Like
2

How large is your image? If you don’t show the image, do you still see the lag?

1 Like
3

It’s 3000 by 800 and about 20 kb, I think. Since I’m displaying it with image(), i can not NOT display it, can I?:sweat_smile:

4

you could break it down into smaller images (maybe the size of the canvas) and just render 3 (at most) at one time and just switch in/out what images are needed according to the progress left-right through the level.

1 Like
5

I broke it down into 5 equal pieces, and the frameRate already improved. I gues I’ll need to cut it into smaller pieces.

6

Now I broke it down into 30 pieces and it CAN run at 60fps, which is great! However, my program runs at 40 fps, when I get to a certain area, as shown in the video below. It doesn’t matter if all the images are loaded, or if just the ones that need to be there are shown, the frameRate remains the same.
This is how I draw the images:

playerClass player = playerList.get(0);
    for (int i = 0; i < 20; i++) {
      if (i * 100 - player.cameraX * 0.1 >= -10 && i * 100 - player.cameraX * 0.1 <= 13000) {
        println(i + "loaded");
        image(backgroundIMG[i], i * 100 - player.cameraX * 0.1, 400);
      }
    }

You can see which images are loaded in the console, and the framerate in the upper.right corner (it’s at 50fps instead of 60 because of my recording software). The first time I run it just the needed images are loaded, the second time all of them.

1 Like
7

you could remove a few of those calculations something like

var xScaled = player.cameraX * .1;
var x = 0;
for (int i = 0; i < 20; i++) {
	x = i * 100 - xScaled;
    if (x >= -10 && x <= 13000) {
		println(i + "loaded");
		image(backgroundIMG[i], x, 400);
	}
}

i’m not sure how much affect this would have but it is something. and unless you have multiple players i’d just store the player in a single var and not retrieve it each frame. without seeing the rest of the code it’s difficult to say what would be causing the frame drops. also there will be a limit to the amount of background divisions before the performance returns will diminish.

2 Likes
8

Thanks, that saves a lot of calculation! Sadly this doesn’t improve the framerate much. At least I discovered something: while editing my code, i forgot to remove the * 0.1 int the image() function. This resulted in having to move the images less, and brought the framerate up to 60.

9

Turns out I was right. I set the scaleValue to 0.02 and it works fine! Altough this seems a little bit slow, I would have (and should have) experimented with that more. Thanks for your help @hotfooted ! :smiley:

2 Likes