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

edited March 2014 in How To...

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!

Tagged:

Answers

  • 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.

  • 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

  • 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!

  • edited March 2014

    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?

  • 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.

  • Answer ✓

    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
      }
    }
    
  • edited March 2014

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

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

  • 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!

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

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

  • 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?

Sign In or Register to comment.