How to create a endless scroll background, as is in Mario's Game?

LifeDotArk

Hey Guys! I'm using processing for a few weeks, and i find it awesome! I like the way it simplifies the creation of graphics or movement of objects. But, i have struggled in a recent problem. I didn't find a simple way to create a game as Mario! Like, how do i move the entire screen to the left or to the right? Just like happens in Mario, or in any other 2D game.

I have searched for that information in the past days, but didn't find anything useful.

Anyone know how to achieve this goal?

Thank you in advance!

KevinWorkman

You could keep your player at the same X position, but then move the entire world left and right depending on where the player is.

Or you could set up a camera system where the camera follow the player through the world.

This is a very broad topic so you'll have to do some research as to which approach is best for you.

LifeDotArk

But that is the problem.... i don't now how to make the camera move! In the api, i tried to change the values of the example, but it didn't made the camera move to left or to the right....

The code that i used is this: http://www.processing.org/reference/camera_.html

KevinWorkman

Can you post a small example showing exactly what you've tried? Notice that this shouldn't be your whole program, just enough to show us what you've done!

LifeDotArk

Well, to be honest, i just tried to change the values that the camera function receives, and tested, to see if the position of the camera changed.

It would be somethig like:

    size(100, 100, P3D);
    noFill();
    background(204);
    camera(70.0, 35.0, 120.0,PosX(), PosY(), 0.0, 
           0.0, 1.0, 0.0);
    translate(50, 50, 0);
    rotateX(-PI/6);
    rotateY(PI/3);
    box(45);

    int PosX(){
//return next X;
    }

    int PosY(){
//return next Y;
    }

Do you have any good Example that I could follow up?

PhiLho

In general, in Processing, you just redraw the whole screen on each draw() call (60 times per second by default). So, for a scrolling game, you just redraw the scenery a little bit on the left or on the right.

PhiLho

Here is a rough, quickly done sketch illustrating my point:

final int GRID_SIZE = 20;
int halfScreen;

// Simple scenery definition, can be (must be!) most complex
int[] scenery = new int[200];

int currentPos;
int scrollPos = GRID_SIZE;

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

  for (int i = 0; i < scenery.length; i++)
  {
    if (random(1) > 0.85)
    {
      scenery[i] = int(random(height / GRID_SIZE));
    }
  }
  // Half screen in terms of grid size
  halfScreen = currentPos = width / GRID_SIZE / 2;
}

void draw()
{
  background(255);

  text(currentPos + " -- " + scrollPos, 10, 50);

  fill(#005588);
  for (int i = currentPos - halfScreen, j = 0; i < currentPos + halfScreen; i++, j++)
  {
    if (scenery[i] > 0)
    {
      rect(scrollPos + j * GRID_SIZE, height - scenery[i] * GRID_SIZE, 
          GRID_SIZE, height);
    }
  }
  fill(#AA8800);
  ellipse(width / 2, height / 2, 20, 10); // Character!

  scrollPos--;
  //scrollPos %= halfScreen;
  if (scrollPos == 0)
  {
    currentPos++;
    scrollPos = GRID_SIZE;
    if (currentPos == scenery.length - halfScreen)
      exit(); // End
  }
}

Shoruke

Is it possible to load in the background as one reeeeeally long picture, and use pushMatrix(), popMatrix(), and translate() when drawing the background?

KevinWorkman

Sure. You probably don't even need the matrix stuff. What have you tried?

LifeDotArk

PhiLho, thanks a lot for the shared code. So, the point in your code is that the char keeps in the middle of the screen and the environment moves. So, in the end, the camera() was not used. I still have to guess for the things that will move, and have to be rendered on the screen, but with that approach I can think in a thing or two.

Thanks a lot to everyone!

Matthewdk54

This guy teaches a really easy way to create that moving background.

http://processingjs.nihongoresources.com/test/PjsGameEngine/docs/tutorial/mario.html

dkkwm

I was gonna refer you to the tutorial Matthewdk54 just posted but I cant even get started with that tutorial because he must be using a library of some sorts that he forgot to specify?