# Mario game help! Move background screen when image is moved?

**URL:** <https://discourse.processing.org/t/mario-game-help-move-background-screen-when-image-is-moved/659>\
**Category:** Coding Questions\
**Created:** [June 3, 2018, 12:48am UTC](https://discourse.processing.org/t/mario-game-help-move-background-screen-when-image-is-moved/659 "2018-06-03T00:48:45Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![tokyo](https://avatars.discourse-cdn.com/v4/letter/t/ea5d25/32.png) [@tokyo](https://discourse.processing.org/u/tokyo)\
**Post date:** [June 3, 2018, 12:48am UTC](https://discourse.processing.org/t/mario-game-help-move-background-screen-when-image-is-moved/659/1 "2018-06-03T00:48:45Z")

</div>

Hi I’m trying to code my own Mario game as a beginner but I’m having a lot of difficulty without a mentor. I needed help moving the background screen so when Mario moves too much to the right or left i want the screen to move as well. I don’t have a preference to how this’ll be done only that i want something simple enough for me to understand. I don’t know how to use camera or pop/push matrix. I’d also like to be able to have goombas or something to jump over and have them disappear. I have many things that i need to learn and would appreciate any help. Thanks in advance.

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [June 3, 2018, 2:06am UTC](https://discourse.processing.org/t/mario-game-help-move-background-screen-when-image-is-moved/659/2 "2018-06-03T02:06:45Z")

</div>

At any given moment, your game will be display a portion of the entire level background. Specifically, it will be showing the part from `background_x_offset` to `background_x_offset + width`.

Normally, mario moves left and right, and this changes `mario_x_position`.

Now, if Mario’s position is getting close to the right edge of the background, that is, `if( background_x_offset + width - mario_x_position < width / 4 ){`, then you know that, in addition to moving Mario to the right (`mario_x_position++`), you will also need to move the background’s x offset to the right as well (`background_x_offset++`).

---

<div class="post-metadata">

**Author:** ![tokyo](https://avatars.discourse-cdn.com/v4/letter/t/ea5d25/32.png) [@tokyo](https://discourse.processing.org/u/tokyo)\
**Post date:** [June 3, 2018, 4:54pm UTC](https://discourse.processing.org/t/mario-game-help-move-background-screen-when-image-is-moved/659/3 "2018-06-03T16:54:16Z")

</div>

Thank you and but wouldn’t the background image need to be the same size as the dimensions? Meaning that if i move the background to the right there would be nothing to see?

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [June 3, 2018, 5:34pm UTC](https://discourse.processing.org/t/mario-game-help-move-background-screen-when-image-is-moved/659/4 "2018-06-03T17:34:46Z")

</div>

No! You can certainly have a background image that is larger than your sketch! I took a bit of time to code you a working example:

```auto
float background_x_offset;
float mario_x_position;
float mario_y_position;
PImage bg;

void setup(){
  size(200,200);
  spoofBackgroundImage();
background_x_offset = 0;
mario_x_position = width/2;
}

void draw(){
  background(0);
  if( kd[0] ) mario_x_position--;
  if( kd[1] ) mario_x_position++;
  
  if( mario_x_position > 3*width/4 && background_x_offset < 600 ){
    mario_x_position--;
    background_x_offset++;
  }
  mario_x_position = constrain(mario_x_position,10,190);
  image(bg, -background_x_offset,0 );
  fill(255,0,0);
  ellipse(mario_x_position,170,20,20);
  fill(255);
  ellipse(mario_x_position,170,10,10);
  
}
  
void keyPressed(){
  k(true);
}

void keyReleased(){
  k(false);
}
 
int[] ks = {LEFT, RIGHT};
boolean[] kd = {false,false};
 
void k(boolean b){
 for( int i = 0; i < ks.length; i++){
   if( ks[i] == keyCode ) kd[i] = b;
 }
}
  
void spoofBackgroundImage(){
  PGraphics pg = createGraphics(800,200);
  pg.beginDraw();
  pg.background(100,100,200);
  pg.noStroke();
  pg.fill(255);
  for( int i = 0; i < 20; i++){
    pg.ellipse(random(800), random(200),30,20);
  }
  pg.stroke(0);
  for( int i = 0; i < 40; i++){
    pg.fill(255,5*i,100);
    pg.rect(20*i,180,20,20);
  }
  pg.endDraw();
  bg = pg.get();
}

```

---

<div class="post-metadata">

**Author:** ![thatcotter](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/thatcotter/32/322_2.png) [@thatcotter](https://discourse.processing.org/u/thatcotter)\
**Post date:** [June 3, 2018, 5:47pm UTC](https://discourse.processing.org/t/mario-game-help-move-background-screen-when-image-is-moved/659/5 "2018-06-03T17:47:51Z")

</div>

Hi there @tokyo!

I recently started writing a series of tutorials for p5.js, and I’ve made one about making the illusion of a 2D camera with matrix translations, which might be useful for what you’re trying to do.

[2D Camera Tutorial](http://thatcotter.github.io/thesis/SPACE/2D_Camera/index)

It might take some work porting everything from p5.js to Processing, but it should still be a help with getting acquainted with the `translate()` function.

Hope that helps!  
-Andrew

---

<div class="post-metadata">

**Author:** ![tokyo](https://avatars.discourse-cdn.com/v4/letter/t/ea5d25/32.png) [@tokyo](https://discourse.processing.org/u/tokyo)\
**Post date:** [June 3, 2018, 6:02pm UTC](https://discourse.processing.org/t/mario-game-help-move-background-screen-when-image-is-moved/659/6 "2018-06-03T18:02:00Z")

</div>

Thank you so much! I just saw the code and its definitely a great reference! Haha I’ve always been told the background must be the same size as your sketch by my previous teachers but the more you know.

---

<div class="post-metadata">

**Author:** ![tokyo](https://avatars.discourse-cdn.com/v4/letter/t/ea5d25/32.png) [@tokyo](https://discourse.processing.org/u/tokyo)\
**Post date:** [June 6, 2018, 6:30am UTC](https://discourse.processing.org/t/mario-game-help-move-background-screen-when-image-is-moved/659/7 "2018-06-06T06:30:40Z")

</div>

Hey, sorry to be asking all these questions but I inserted a couple of images to the screen and they are relative to Mario so they are always on the screen but I want them to be scrolled out. I tried a couple things but they didn’t work so I was wondering what you’d recommend me to do if its ok.