# I need help please! Mario

**URL:** <https://discourse.processing.org/t/i-need-help-please-mario/21409>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [May 29, 2020, 5:28pm UTC](https://discourse.processing.org/t/i-need-help-please-mario/21409 "2020-05-29T17:28:52Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![jasmine](https://avatars.discourse-cdn.com/v4/letter/j/47e85d/32.png) [@jasmine](https://discourse.processing.org/u/jasmine)\
**Post date:** [May 29, 2020, 5:28pm UTC](https://discourse.processing.org/t/i-need-help-please-mario/21409/1 "2020-05-29T17:28:52Z")

</div>

```auto
int gameMode=0;//0 - menu, 1 - play game, 2 - instructions, 3 - character selection
int selChar=1;//default character is "character 1"
int level=1;
color red=color(255, 0, 0);
color green=color(0, 255, 0);
color blue=color(0, 0, 255);

boolean moveRight=false;
boolean moveLeft=false;
boolean moveDown=false;
boolean moveUp=false;

int x=50;
boolean[] keys=new boolean[128];

int[] v={4, 0};//horizontal and vertical velocity

int[] g1={0, 0, -968};
int[] g2={968, 0, -968};

PImage pic1;
PImage pic2;
int speed=-5;

int[] g3={0, 0, -108};
int[] g4={108, 0, -108};

PImage pic3;
PImage pic4;

PImage a;
PImage b;
PImage c;
  
import processing.sound.*;
SoundFile file;

void setup() {
   file = new SoundFile(this,"supermario.mp3");
    file.play();
  size(800, 600);
  a = loadImage("mario.png");
  b = loadImage("luigi.png");
  c = loadImage("Yoshi.png");
  pic1=loadImage("back.png");
  pic2=loadImage("back1.png");
  pic3=loadImage("ground1.png");
  pic4=loadImage("ground2.png");
}

void draw() {//runs forever
  background(red);
  if (gameMode==0){
    mainMenu();
  }
  else if (gameMode==1){
      playL1();
  }
  else if (gameMode==2)
    controls();
  else if (gameMode==3)
    select();
}//end draw

void playL1(){
  image(pic1, g1[0], g1[1]);
  image(pic2, g2[0], g2[1]);

//g1[0] = g1[0] + speed;//moving left
  //if (g1[0] + speed < g1[2]) { 
  // g1[0] = -g2[2];
  //}
  //g2[0] = g2[0] + speed;//moving left
  //if (g2[0] + speed < g2[2]) {
  // g2[0] = -g1[2];
  //}
  
  image(pic3, g3[0], g3[1]);
  image(pic4, g4[0], g4[1]);
  
   g3[0] = g3[0] + speed;//moving left
  if (g3[0] + speed < g3[2]) { 
    g3[0] = -g4[2];
  }
  g4[0] = g4[0] + speed;//moving left
  if (g4[0] + speed < g4[2]) {
    g4[0] = -g3[2];
  }
  
} //end playL1

void controls() {
  textSize(35);
  fill(255);
  text("press spacebar to jump",150,150);
  text("move you characters", 150, 250);
  text("collect coins",150,350);
  text("avoid the enemies",150,450);
  backToMain();
}

void select() {//character select
  textAlign(LEFT);
  textSize(20);
  fill(0);//black
  //displaying all characters
  rect(200, 50, 100, 100);
  rect(350, 50, 100, 100);
  rect(500, 50, 100, 100);

  if (mouseIn(200, 50, 100, 100)) {
    fill(blue);
    rect(200, 50, 100, 100);
    if (mousePressed) {
      selChar=1;//1 could mean Mario
      gameMode=0;//main menu
    }
  }

  if (mouseIn(350, 50, 100, 100)) {
    fill(blue);
    rect(350, 50, 100, 100);
    if (mousePressed) {
      selChar=2;//2 could mean Luigi
      gameMode=0;
    }
  }

  if (mouseIn(500, 50, 100, 100)) {
    fill(blue);
    rect(500, 50, 100, 100);
    if (mousePressed) {
      selChar=3;//3 could be Yoshi
      gameMode=0;
    }
  }

  fill(255);
  text("Char 1", 210, 100);
  text("Char 2", 360, 100);
  text("Char 3", 510, 100);

  backToMain();
}//end select

void mainMenu() {
  textAlign(LEFT);
  textSize(35);
  fill(blue);
  text("START", 350, 430);
  text("INSTRUCTIONS", 290, 490);
  text("CHARACTERS", 295, 555);
  
  image(a, 200, 0, 150, 200);
  image(b, 80, 250, 200, 250);
  image(c,600,200,150,200);
  
  if (mouseIn(330, 400, 150, 35)) {//"play"
    fill(0);
    text("START", 350, 430);
    if (mousePressed) {
      gameMode=1;
    }
  }
  if (mouseIn(280, 460, 270, 35)) {//"instructions"
    fill(0);
    text("INSTRUCTIONS", 290, 490);
    if (mousePressed) {
      gameMode=2;
    }
  }
  if (mouseIn(285, 525, 240, 35)) {//"characters"
    fill(0);
    text("CHARACTERS", 295, 555);
    if (mousePressed) {
      gameMode=3;
    }
  }
  fill(255);
  textSize(60);
  text("Super Mario ", 230, 300);
}//end mainMenu

void backToMain() {
  textAlign(LEFT);
  textSize(20);
  fill(green);
  rect(20, 550, 120, 40);
  fill(blue);
  text("Menu", 50, 580);

  if (mouseIn(20, 550, 120, 40)) {//"back to menu"
    fill(0);
    text("Menu", 50, 580);
    if (mousePressed) {
      gameMode=0;
    }
  }
}//end backToMain

void keyPressed() {
  //println(keyCode+" was pressed");
  //keys[keyCode]=true;
}

void keyReleased() {
  //println(keyCode+" was released");
  //keys[keyCode]=false;
}

//The function returns true if the mouse pointer is INSIDE the rectangle, otherwise returns false
boolean mouseIn(int left, int top, int w, int h) {
  return (mouseX > left && mouseX < left+w && mouseY > top && mouseY < top+h);
}//end mouseIn

```

---

<div class="post-metadata">

**Author:** ![jasmine](https://avatars.discourse-cdn.com/v4/letter/j/47e85d/32.png) [@jasmine](https://discourse.processing.org/u/jasmine)\
**Post date:** [May 29, 2020, 5:29pm UTC](https://discourse.processing.org/t/i-need-help-please-mario/21409/2 "2020-05-29T17:29:50Z")

</div>

I have this code but I dont know how to make the background image and the ground image move in the direction that the character is moving

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 29, 2020, 5:50pm UTC](https://discourse.processing.org/t/i-need-help-please-mario/21409/3 "2020-05-29T17:50:11Z")

</div>

basically when you say `image(ground, 0,0);`

make the first 0 a variable and decrease it:

`image(ground, groundX, groundY);`

`groundX--;`

- ground moves left.

- ground image must be wider than screen

Chrisir

---

<div class="post-metadata">

**Author:** ![jasmine](https://avatars.discourse-cdn.com/v4/letter/j/47e85d/32.png) [@jasmine](https://discourse.processing.org/u/jasmine)\
**Post date:** [May 29, 2020, 6:16pm UTC](https://discourse.processing.org/t/i-need-help-please-mario/21409/4 "2020-05-29T18:16:40Z")

</div>

thank you. I’m going to try that

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 29, 2020, 6:17pm UTC](https://discourse.processing.org/t/i-need-help-please-mario/21409/5 "2020-05-29T18:17:10Z")

</div>

We can’t run your code because we don’t have your images… 😉

---

<div class="post-metadata">

**Author:** ![jasmine](https://avatars.discourse-cdn.com/v4/letter/j/47e85d/32.png) [@jasmine](https://discourse.processing.org/u/jasmine)\
**Post date:** [May 29, 2020, 6:19pm UTC](https://discourse.processing.org/t/i-need-help-please-mario/21409/6 "2020-05-29T18:19:24Z")

</div>

![back](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/9c8d62c45f14752e666b6fb1cc8ba7770be91de0.png)  
this is the background

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 29, 2020, 8:20pm UTC](https://discourse.processing.org/t/i-need-help-please-mario/21409/7 "2020-05-29T20:20:58Z")

</div>

still hard to read

what is pic a , b , c?

what is pic pic3, pic4??

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 29, 2020, 8:22pm UTC](https://discourse.processing.org/t/i-need-help-please-mario/21409/8 "2020-05-29T20:22:25Z")

</div>

what is the difference between back and back1 ?

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [May 29, 2020, 10:46pm UTC](https://discourse.processing.org/t/i-need-help-please-mario/21409/9 "2020-05-29T22:46:09Z")

</div>

Please format your code:  
[https://discourse.processing.org/faq#format-your-code](https://discourse.processing.org/faq#format-your-code)

---

<div class="post-metadata">

**Author:** ![jasmine](https://avatars.discourse-cdn.com/v4/letter/j/47e85d/32.png) [@jasmine](https://discourse.processing.org/u/jasmine)\
**Post date:** [May 29, 2020, 11:27pm UTC](https://discourse.processing.org/t/i-need-help-please-mario/21409/10 "2020-05-29T23:27:24Z")

</div>

its the same picture. My teacher said to do that so the background would look like it was moving

---

<div class="post-metadata">

**Author:** ![jasmine](https://avatars.discourse-cdn.com/v4/letter/j/47e85d/32.png) [@jasmine](https://discourse.processing.org/u/jasmine)\
**Post date:** [May 29, 2020, 11:28pm UTC](https://discourse.processing.org/t/i-need-help-please-mario/21409/11 "2020-05-29T23:28:45Z")

</div>

pic a,b,c are on the main menu screen

pic 1,2 are the 2 background pictures

pic 3,4 are the 2 ground pictures

---

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [May 30, 2020, 1:32am UTC](https://discourse.processing.org/t/i-need-help-please-mario/21409/12 "2020-05-30T01:32:41Z")

</div>

What they are getting at is, it would be beneficial to you and to those you wish to get help from if your variables and functions had a better naming convention. Keep it short and sweet but as descriptive as possible so it is easy to read and there is no question as to what the code does.

---

<div class="post-metadata">

**Author:** ![uheinema](https://avatars.discourse-cdn.com/v4/letter/u/e99b99/32.png) [@uheinema](https://discourse.processing.org/u/uheinema)\
**Post date:** [June 4, 2020, 11:30am UTC](https://discourse.processing.org/t/i-need-help-please-mario/21409/14 "2020-06-04T11:30:35Z")

</div>

Like this. Next time, figure it out yourself…

```auto

PImage pic;

void setup(){
  fullScreen();
  pic=loadImage("earth.jpg");
}

void draw(){
  scale(1.0*height/pic.height);
  int ofs=frameCount%pic.width;
  image(pic,-ofs,0);
  image(pic,pic.width-ofs,0);
}

```

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [June 4, 2020, 11:57pm UTC](https://discourse.processing.org/t/i-need-help-please-mario/21409/15 "2020-06-04T23:57:07Z")

</div>

> [@jasmine](#):
>
> how to make the background image and the ground image move in the direction that the character is moving

My guess is that you are trying to create a parallax scrolling effect?

> **[Parallax scrolling | Example](https://en.wikipedia.org/wiki/Parallax_scrolling#Example)**
>
> In the following animation, three layers are moving leftward at different speeds. Their speeds decrease from front to back and correspond to increases in relative distance from the viewer. The ground layer is moving 8 times as fast as the vegetation layer. The vegetation layer is moving two times as fast as the cloud layer.
> 1.
> 			
> 			
> Cloud layer - back
> 
> 			
> |
> 2.
> 			
> 			
> Vegetation layer - middle
> 
> 			
> |
> 3.
> 			
> 			
> Ground layer - front
> 
> 			
> |
> 4.
> 			
> 			
> Animation

[![](https://upload.wikimedia.org/wikipedia/commons/3/34/Parallax_scrolling_example_scene.gif) ](https://upload.wikimedia.org/wikipedia/commons/3/34/Parallax_scrolling_example_scene.gif)