Overlaping clickable buttons

Processing Coding Questions
1

hello world, I am currently making a game using processing but a have a bug I can’t solve: I have made a main menu that includes a clickable button leading to a submenu for single player game modes. when I click on the main menu’s button, it should lead me to the submenu where I can click on a second button to launch a game of the standard game mode. However because of my 2 buttons overlaping, when I click on the main menu’s button, it also clicks on the submenu’s button, launching the game without displaying the submenu. I would like to know how to solve the problem please.

here is the matching code:

void draw() { 
  
  if (mode==0) //main menu
  {
    menuDraw();
  }
  
  else if (mode==1)
  {
    soloDraw();
  }
}

void mousePressed()
{
  if (mode==0) //main menu
  {
    if (mouseX<=600 && mouseX>=50 && mouseY>=245 && mouseY<=295)
    {
      mode=1;
    } else if (mouseX<=985 && mouseX>=815 && mouseY>=245 && mouseY<=295)
    {
      mode=4;//crédits
    } else if (mouseX<=805 && mouseX>=595 && mouseY>=90 && mouseY<=235)
    {
      mode=3; //options
    } else if (mouseX<=805 && mouseX>=595 && mouseY>=300 && mouseY<=610)
    {
      mode=2; //multi W.I.P.
    }
  }
  
  if (mode==1 && mouseX<=490 && mouseX>=25 && mouseY>=25 && mouseY<=325)
  {
    mode=10; //standard
    viesJ1=viesJ1Init;
    viesJ2=viesJ2Init;
    viesJ3=viesJ3Init;
    viesJ4=viesJ4Init;
  }
}

void menuDraw()
{
  noStroke();
  textFont(papyrus);
  background(fondPrincipal);
  textSize(50);

  fill(255, 0, 0);
  text("Super", 150, 150);

  fill(0, 0, 255);
  text("Pong", 290, 150);

  fill(0, 255, 0);
  text("Bros", 410, 150);

  fill(255, 255, 0);
  text("Menu:", 290, 200);

  noFill();
  rect(50, 245, 550, 50);
  
  fill(0,255,0);
  textSize(100);
  text("solo", 230, 400);
  
  noFill();
  rect(815, 245, 135, 50);
  
  fill(255,255,0);
  textSize(50);
  text("credits", 830, 350);
  
  noFill();
  rect(595, 90, 210, 145);
  
  fill(255,0,0);
  textSize(35);
  text("options", 830, 210);
  
  noFill();
  rect(595, 300, 210, 310);
  
  fill(0,0,255);
  textSize(100);
  text("m", 515,350);
  text("u", 525,400);
  text("l", 550,490);
  text("t", 540,550);
  text("i", 550,620);
}

void soloDraw(){
  background(0);
  fill(0,0,255);
  rect(25,25, 465, 300);
    
  fill(0);
  textSize(50);
  text("Standard", 130,180);
  
  fill(255);
  rect(25,500,950,180);
  fill(0);
  text("retour", 450, 590);
}
2

Make a global variable that checks if a button has been pressed, and make sure button presses requires the boolean state to be off first.

Now note this might still cause an issue depending on the order you are drawing the buttons. The main button should be first in this instance.

3

You might try connecting the color of your buttons to your conditional statements to distinguish between main menu and submenu buttons.
:nerd_face:

4

It’s good that you distinguish between mode (states) in mousePressed but please use ….else if(mode==1) to hinder processing from running into the second if block right away (after the first if-block set mode to 1)

2 Likes
5

thanks, surprisingly it now works after i applied your sugestion @Chrisir

1 Like