Processing, button, void

Hello everyone I have a presentation of a computer game and my program works very well but when I have to add a button there is a problem with void reset. I will need your help please to be able to add a menu with a button that directs me to the game. Thank you for your help. Here is the code:

PImage ile;//fond
bird b = new bird();//nouvelle partie
pillar[] p = new pillar[3];//batons
boolean end=false;
boolean intro=true;
int score=0;//score

void setup()
{
ile = loadImage(“Fond.png”);//fond
size(1000, 800);//ecran
for (int i = 0; i<3; i++) {
p[i]=new pillar(i);//batons
}
}

void draw() {
background(ile);//fond

if (end) {
b.move(); //mouvement de la balle
}
b.drawBird(); //vision de balle
if (end) {
b.drag(); //redessente
}
b.checkCollisions(); //collision
for (int i = 0; i<3; i++) {
p[i].drawPillar();//batons
p[i].checkPosition();//batons
}
fill(0);//couleur fond encadrement

textSize(32); //taille de l’écriture
if (end) {
rect(20, 20, 100, 50);//cadre score
fill(255);//texte score
text(score, 30, 58); //texte score
} else {
rect(150, 100, 220, 50);//encadrement
rect(150, 200, 220, 50);//encadrement
rect(150, 300, 220, 50);//encadrement
fill(255); //couleur

if (intro) {//debut
  text("Flappy Rabbit", 155, 140);//titre debut
  text("Click to Play ", 165, 240);//debut
  text("Menu ", 175, 340);//menu
} else { //si perdu
  text("Game Over", 170, 140);//fin
  text("score", 180, 240);//score
  text("menu", 175, 340);//score
}

}

}

class bird {
float xPos, yPos, ySpeed; //position de la balle
bird() {
xPos = 250;//position de la balle au début
yPos = 400;//position de la balle au début
}
void drawBird() {
stroke(#FFA500);
noFill();
strokeWeight(5);
ellipse(xPos, yPos, 20, 20);//boule
}
void jump() {
ySpeed=-10;//vitesse
}
void drag() {
ySpeed+=0.4;
}
void move() {
yPos+=ySpeed;
for (int i = 0; i<3; i++) {
p[i].xPos-=3;
}
}
void checkCollisions() {
if (yPos>800) {
end=false;
}
for (int i = 0; i<3; i++) {
if ((xPos<p[i].xPos+10&&xPos>p[i].xPos-10)&&(yPos<p[i].opening-100||yPos>p[i].opening+100)) {
end=false;
}
}
}
}
class pillar {
float xPos, opening;
boolean cashed = false;
pillar(int i) {
xPos = 100+(i200);
opening = random(600)+100;
}
void drawPillar() {
line(xPos, 0, xPos, opening-100);
line(xPos, opening+100, xPos, 800);
}
void checkPosition() {
if (xPos<0) {
xPos+=(200
3);
opening = random(600)+100;
cashed=false;
}
if (xPos<250&&cashed==false) {
cashed=true;
score++;
}
}
}
void reset() {
end=true;
score=0;
b.yPos=400;
for (int i = 0; i<3; i++) {
p[i].xPos+=550;
p[i].cashed = false;

}
}
void mousePressed() {//sauter avec la souris
b.jump();
intro=false;
if (end==false) {
reset();
}
}
void keyPressed() {//sauter avec la barre d’espace
b.jump();
intro=false;
if (end==false) {
reset();
}
}

Normally use a state variable for this

It’s int state=0;

Declare that before setup ()

It tells the program which screen to show.

So in draw() say

if(state==0) {
// display start screen 
}
else if (state==1) {
// show game 
}
else if (state==2) {
// after the game: do you want to play again...?
}

Nothing outside of this is allowed in draw

The reset button is shown only in the last screen

In theory the same if-clause is necessary in keyPressed() and mousePressed(), so the Button is only evaluated in the last screen

Chrisir

2 Likes

thank you but I do not understand where I have to put it or / and instead of whom and what should I put inside

PImage ile;//fond
bird b = new bird();//nouvelle partie
pillar[] p = new pillar[3];//batons
boolean end=false;
boolean intro=true;
int score=0;//score

void setup()
{
ile = loadImage(“Fond.png”);//fond
size(1000, 800);//ecran
for (int i = 0; i<3; i++) {
p[i]=new pillar(i);//batons
}
}

void draw() {
background(ile);//fond

if (end) {
b.move(); //mouvement de la balle
}
b.drawBird(); //vision de balle
if (end) {
b.drag(); //redessente
}
b.checkCollisions(); //collision
for (int i = 0; i<3; i++) {
p[i].drawPillar();//batons
p[i].checkPosition();//batons
}
fill(0);//couleur fond encadrement

textSize(32); //taille de l’écriture
if (end) {
rect(20, 20, 100, 50);//cadre score
fill(255);//texte score
text(score, 30, 58); //texte score
} else {
rect(150, 100, 220, 50);//encadrement
rect(150, 200, 220, 50);//encadrement
rect(150, 300, 220, 50);//encadrement
fill(255); //couleur

if (intro) {//debut
  text("Flappy Rabbit", 155, 140);//titre debut
  text("Click to Play ", 165, 240);//debut
  text("Menu ", 175, 340);//menu
} else { //si perdu
  text("Game Over", 170, 140);//fin
  text("score", 180, 240);//score
  text("menu", 175, 340);//score
}

}
if(state==0) {

}
else if (state==1) {

}
else if (state==2) {

}

}

class bird {
float xPos, yPos, ySpeed; //position de la balle
bird() {
xPos = 250;//position de la balle au début
yPos = 400;//position de la balle au début
}
void drawBird() {
stroke(#FFA500);
noFill();
strokeWeight(5);
ellipse(xPos, yPos, 20, 20);//boule
}
void jump() {
ySpeed=-10;//vitesse
}
void drag() {
ySpeed+=0.4;
}
void move() {
yPos+=ySpeed;
for (int i = 0; i<3; i++) {
p[i].xPos-=3;
}
}
void checkCollisions() {
if (yPos>800) {
end=false;
}
for (int i = 0; i<3; i++) {
if ((xPos<p[i].xPos+10&&xPos>p[i].xPos-10)&&(yPos<p[i].opening-100||yPos>p[i].opening+100)) {
end=false;
}
}
}
}
class pillar {
float xPos, opening;
boolean cashed = false;
pillar(int i) {
xPos = 100+(i200);
opening = random(600)+100;
}
void drawPillar() {
line(xPos, 0, xPos, opening-100);
line(xPos, opening+100, xPos, 800);
}
void checkPosition() {
if (xPos<0) {
xPos+=(200
3);
opening = random(600)+100;
cashed=false;
}
if (xPos<250&&cashed==false) {
cashed=true;
score++;
}
}
}
void reset() {
end=true;
score=0;
b.yPos=400;
for (int i = 0; i<3; i++) {
p[i].xPos+=550;
p[i].cashed = false;

}
}
void mousePressed() {//sauter avec la souris
b.jump();
intro=false;
if (end==false) {
reset();
}
}
void keyPressed() {//sauter avec la barre d’espace
b.jump();
intro=false;
if (end==false) {
reset();
}
}

Just follow my instructions

Apply the state system in draw()

have what you have now eg. as state==0

1 Like



PImage ile;//fond
bird b = new bird();//nouvelle partie
pillar[] p = new pillar[3];//batons

int score=0;//score

int state = 0; 

void setup() {
  ile = loadImage("Fond.png");//fond
  size(1000, 800);//ecran
  for (int i = 0; i<3; i++) {
    p[i]=new pillar(i);//batons
  }
}

void draw() {
  background(0);//ile/ fond

  if (state==0) {

    // intro 

    textSize(32); //taille de l’écriture
    fill(#FFA500);

    rect(20, 20, 100, 50);//cadre score
    fill(255);//texte score
    text(score, 30, 58); //texte score

    fill(#FFA500);
    rect(150, 100, 220, 50);//encadrement
    rect(150, 200, 220, 50);//encadrement
    rect(150, 300, 220, 50);//encadrement
    fill(255); //couleur

    text("Flappy Rabbit", 155, 140);//titre debut
    text("Click to Play ", 165, 240);//debut
    text("Menu ", 175, 340);//menu
  } else if (state==1) {

    // GAME 

    background(0);//ile/ fond


    b.move(); //mouvement de la balle

    b.drawBird(); //vision de balle

    b.drag(); //redessente

    b.checkCollisions(); //collision

    for (int i = 0; i<3; i++) {
      p[i].drawPillar();//batons
      p[i].checkPosition();//batons
    }

    fill(0);//couleur fond encadrement
    textSize(32); //taille de l’écriture
    //
  } else if (state==2) {
    //
    //si perdu
    // 
    textSize(32); //taille de l’écriture
    fill(#FFA500);
    rect(150, 100, 220, 50);//encadrement
    rect(150, 200, 220, 50);//encadrement
    rect(150, 300, 220, 50);//encadrement
    fill(255); //couleur

    text("Game Over", 170, 140);//fin
    text("score", 180, 240);//score
    text("menu", 175, 340);//score
  }// else if
  //
}//func 

void reset() {
  score=0;
  b.yPos=400;
  b.ySpeed=0; 
  for (int i = 0; i<3; i++) {
    p[i].xPos+=550;
    p[i].cashed = false;
  }
}

void mousePressed() {
  //sauter avec la souris
  // to do like in keyPressed()
}

void keyPressed() {
  //sauter avec la barre d’espace
  switch(state) {
  case 0: 
    state=1; 
    reset();
    break; 

  case 1: 
    b.jump();
    break; 

  case 2: 
    reset();
    state=0; 
    break; 
    //
  }//switch
}

// ============================================================================================
// from now on only classes 
class bird {

  float xPos, yPos, ySpeed; //position de la balle
  bird() {
    xPos = 250;//position de la balle au début
    yPos = 400;//position de la balle au début
  }
  void drawBird() {
    stroke(#FFA500);
    noFill();
    strokeWeight(5);
    if (yPos<10) 
      yPos=10; 
    ellipse(xPos, yPos, 20, 20);//boule
  }
  void jump() {
    ySpeed=-10;//vitesse
  }
  void drag() {
    ySpeed+=0.4;
  }
  void move() {
    yPos+=ySpeed;
    for (int i = 0; i<3; i++) {
      p[i].xPos-=3;
    }
  }
  void checkCollisions() {
    if (yPos>800) {
      state=2;
    }
    for (int i = 0; i<3; i++) {
      if ((xPos<p[i].xPos+10&&xPos>p[i].xPos-10)&&(yPos<p[i].opening-100||yPos>p[i].opening+100)) {
        state=2;
      }
    }
  }
}//class

class pillar {
  float xPos, opening;
  boolean cashed = false;

  pillar(int i) {
    xPos = 100+(i*200);
    opening = random(600)+100;
  }

  void drawPillar() {
    line(xPos, 0, xPos, opening-100);
    line(xPos, opening+100, xPos, 800);
  }

  void checkPosition() {
    if (xPos<0) {
      xPos+=(2003);
      opening = random(600)+100;
      cashed=false;
    }
    if (xPos<250&&cashed==false) {
      cashed=true;
      score++;
    }
  }
}//class
//
1 Like

thank you so much for helping me i will see and i will tell you if it works. thanks again

1 Like

I have a question why there are two parties

and if I want to put a clickable button where should I put it

Show button in the correct state in draw

Evaluate in mousePressed

See button example

See also here

What parties do you mean?

In draw() there are 3 screens (state tells which screen is the current one) for intro, game and gameOver

This replaces the boolean end and intro

Thank you for all this information I created a button that when you click on it changes color and I would like that when I click on the game starts. He is in void draw

PImage ile;//fond
bird b = new bird();//nouvelle partie
pillar[] p = new pillar[3];//batons

int score=0;//score

int state = 0;

void setup() {
ile = loadImage(“Fond.png”);//fond
size(1000, 800);//ecran
for (int i = 0; i<3; i++) {
p[i]=new pillar(i);//batons
}
}

void draw() {
background(ile);//ile/ fond

if (mousePressed && (mouseButton == LEFT)) {
fill(48);
} else {
fill(0);
}
rect(150, 200, 220, 50);//encadrement

if (state==0) {

// intro 

textSize(32); //taille de l’écriture
fill(#FFA500);

rect(20, 20, 100, 50);//cadre score
fill(255);//texte score
text(score, 30, 58); //texte score

fill(#FF0000);
rect(150, 100, 220, 50);//encadrement

rect(150, 300, 220, 50);//encadrement
fill(255); //couleur

text("Flappy Rabbit", 155, 140);//titre debut
text("Click to Play ", 165, 240);//debut
text("Menu ", 175, 340);//menu

} else if (state==1) {

// GAME 

background(ile);//ile/ fond


b.move(); //mouvement de la balle

b.drawBird(); //vision de balle

b.drag(); //redessente

b.checkCollisions(); //collision

for (int i = 0; i<3; i++) {
  p[i].drawPillar();//batons
  p[i].checkPosition();//batons
}

fill(0);//couleur fond encadrement
textSize(32); //taille de l’écriture
//

} else if (state==2) {
//
//si perdu
//
textSize(32); //taille de l’écriture
fill(#FFA500);
rect(150, 100, 220, 50);//encadrement
rect(150, 200, 220, 50);//encadrement
rect(150, 300, 220, 50);//encadrement
fill(255); //couleur

text("Game Over", 170, 140);//fin
text("score", 180, 240);//score
text("menu", 175, 340);//score

}// else if
//
}//func

void reset() {
score=0;
b.yPos=400;
b.ySpeed=0;
for (int i = 0; i<3; i++) {
p[i].xPos+=550;
p[i].cashed = false;
}
}

void mousePressed() {
//sauter avec la souris
}
void keyPressed() {
//sauter avec la barre d’espace
switch(state) {
case 0:
state=1;
reset();
break;

case 1:
b.jump();
break;

case 2:
reset();
state=0;
break;
//
}//switch
}

// ============================================================================================
// from now on only classes
class bird {

float xPos, yPos, ySpeed; //position de la balle
bird() {
xPos = 250;//position de la balle au début
yPos = 400;//position de la balle au début
}
void drawBird() {
stroke(#FFA500);
noFill();
strokeWeight(5);
if (yPos<10)
yPos=10;
ellipse(xPos, yPos, 20, 20);//boule
}
void jump() {
ySpeed=-10;//vitesse
}
void drag() {
ySpeed+=0.4;
}
void move() {
yPos+=ySpeed;
for (int i = 0; i<3; i++) {
p[i].xPos-=3;
}
}
void checkCollisions() {
if (yPos>800) {
state=2;
}
for (int i = 0; i<3; i++) {
if ((xPos<p[i].xPos+10&&xPos>p[i].xPos-10)&&(yPos<p[i].opening-100||yPos>p[i].opening+100)) {
state=2;
}
}
}
}//class

class pillar {
float xPos, opening;
boolean cashed = false;

pillar(int i) {
xPos = 100+(i*200);
opening = random(600)+100;
}

void drawPillar() {
line(xPos, 0, xPos, opening-100);
line(xPos, opening+100, xPos, 800);
}

void checkPosition() {
if (xPos<0) {
xPos+=(2003);
opening = random(600)+100;
cashed=false;
}
if (xPos<250&&cashed==false) {
cashed=true;
score++;
}
}
}//class
//

Posting in the forum

Prior to posting hit ctrl-t in processing

After copy and paste your code, select the code section using the mouse and click </> icon in the small command bar please

Your button

  • First: nothing is allowed outside the if (state==0)......else if (state==1)....else if (state==2)....} construct in draw(). Because you don’t want to display or evaluate your button during the game.

  • Second Using mousePressed as a variable is difficult. Better evaluate your button in the function mousePressed() that you already have.

  • 3rd: With if(mouseX>x1 && .... you check whether the mouse has been clicked inside the button and not somewhere else or in which button it has been clicked.

  • 4th: When the button has been clicked and you want to start the game, set state to 1.

Example

void mousePressed() {
  switch(state) {
  case 0:

    float x1=150;
    float y1=200;
    float w1=220;
    float h1=50;

    if (mouseX > x1 && 
      mouseX < x1 + w1 && 
      mouseY > y1 &&
      mouseY < y1 + h1) { 
      // is over the rect of the button 

      state=1;
      reset();
    }
    break;

  case 1:
    b.jump();
    break;

  case 2:
    reset();
    state=0;
    break;
    //
  }//switch
}

Chrisir

1 Like

Thank you very much and if I want to put back a button with “menu” so that when I click on menu it directs me to another page (open ofice word or processing)

Those values in the function mousePressed()

    float x1=150;
    float y1=200;
    float w1=220;
    float h1=50;

represent one button. It’s position and size.

They must match the position on the screen, where the text / rect for this button is. You could make the variables global and use them in mousePressed() and when displaying the button. To have this in one place in the code I made the class Button in the code I linked to above.

A 2nd button

For a 2nd button use

    float x2=150;
    float y2=320; // !!!!!
    float w2=220;
    float h1=50;

for example (where the menu text is!!!)

and evaluate it with if.

To display a menu with Word etc., make a new else if (state==4).... and display the menu there…

make it in draw, in mousePressed and in keyPressed…

Chrisir

Thank you for everything I have a last question then I leave. How could I change the ball into an image I took on the internet?

that’s easy

save the image in the folder where the sketch is

look at loadImage() in the reference and then at the image() command

https://www.processing.org/reference/loadImage_.html

Example


PImage img;

void setup() {
  img = loadImage("laDefense.jpg");
}

void draw() {
  image(img, b.xPos, b.yPos);  // your bird !!!!!!!!!!!!!!!!!!!!!
}

But it just displays the image but it does not change the ball jumping during the game

Without seeing your code it’s guess work…

did you tell image the correct variables b.xpos or whatever…??

That’s the line in drawBird you need to replace