Processing, button, void

#1

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();
}
}

#2

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
#3

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();
}
}

#4

Just follow my instructions

Apply the state system in draw()

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

1 Like
#5



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
#6

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

1 Like
#7

I have a question why there are two parties

#8

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

#9

Show button in the correct state in draw

Evaluate in mousePressed

See button example

#10

See also here

#11

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

#12

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
//

#13

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
#14

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)

#15

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

#16

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?

#17

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 !!!!!!!!!!!!!!!!!!!!!
}
#18

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

#19

Without seeing your code it’s guess work…

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

#20

That’s the line in drawBird you need to replace