带有 switch 语句的主菜单

Question

So for a school project, I have to create a game with a program called 'Processing'. I am creating a main menu with the switch statement. For that I want to use the buttons 'Start', 'Help', and 'exit'.i would like to use those buttons to change the variables of the switch statement. Therefore I'm using "mousePressed". The problem is that which button I'm pressing, is giving me the same result as the 'exit' button. Could somebody give me tips on how I can structure my menu better or even make my button work? I am using a library on Processing called 'ControlP5' to make my buttons.

here is my code so far:

int mode; // 1: intro screen, 2: game  , 3: game over 

final int INTRO    = 1;
final int PLAY     = 2;
final int GAMEOVER = 3;

//==============================================================
void setup(){
size(1920,1080);
mode = 1;
}
//========================================================

void draw(){

  if(mode == 1){
    introScreen();   
  }
  else if (mode == 2){
    gameItself();   
  } 
   else if (mode == 3){
     gameOver();   
   }
   else println("mode error");{
   } 
}

void introScreen(){
mode = 1;
static int Page = 0;
import controlP5.*;


ControlP5 cp5;


 cp5= new ControlP5(this);
 switch(Page){

     case 0: // main menu
     cp5.addButton("Start").setValue(0).setPosition(1420,250).setSize(400,100);

     cp5.addButton("Exit").setValue(0).setPosition(1420,650).setSize(400,100);

     cp5.addButton("Help").setValue(0).setPosition(1420,450).setSize(400,100);
       break;

     case 1: //help menu

      cp5.addButton("Back").setValue(0).setPosition(1420,450).setSize(400,100);
        break;
   }



public void Start(){
 if(mousePressed){
   mode = 2; // switching to the game itself 
 }
  println("Start");
  }

  public void Exit(){
   if(mousePressed){
  exit(); }
  println("Exit");
  }

 public void Help(){


     Page = 1;

  println("Help");
  }

  public void Back(){
  if(mousePressed){
    Page  = 0;
  }
  println("Back");
  }




  void gameItself(){
// game and stuff
}

void gameOver(){
//gameover 
}

Answer 1

Take a look at how the mousePressed event works. You may use this information useful.

To achieve your goal as to change the Page variable by clicking buttons, there are multiple options. First, I'll go with the easier one, the one which doesn't need an import but just check for coordinates. Then I'll do the same thing, but with controlP5.

1. Just checking where the clicks lands

I'll go with the most basic one: detecting the "click" and checking if it's coordinates are inside a button.

First, we'll add the mouseClicked() method. This method is called every time a mouse button is pressed.

// I'm typing this out of IDE si there may be some quirks to fix in the code
void mouseClicked() {
  switch(Page) {
    case 0:
      if (mouseX > 1420 && mouseX < 1420+400 && mouseY > 250 && mouseY < 250+100) {
        // You're in the main menu and Start was clicked
      }
      if (mouseX > 1420 && mouseX < 1420+400 && mouseY > 650 && mouseY < 650+100) {
        // You're in the main menu and Exit was clicked
      }
      if (mouseX > 1420 && mouseX < 1420+400 && mouseY > 450 && mouseY < 450+100) {
        // You're in the main menu and Help was clicked
      }
      // You should use 'else if' instead of 3 different if, but I coded it like that so it would be easier to see the small differences between the coordinates
    case 1:
      if (mouseX > 1420 && mouseX < 1420+400 && mouseY > 450 && mouseY < 450+100) {
        // You're un the help menu and Back was clicked
      }
  }
}

As you can see, I just used the coordinates and size of your buttons to check if the click was located inside one. That's kind of ninja-ing my way out of this issue. I don't know how far into programming you are, or else I would recommand to build a class to handle user inputs, but this way is easy to manage for small exercises like homework.

2. Designing controlP5 buttons

I'm not a ControlP5 expert, so we'll keep close to the basics.

I'll be blunt, the code you provided is ripe with problems, and it's not so many lines, so instead of pointing where it goes wrong I'll give you some skeleton code which will work and on which you can build some understanding. I'll give you the tools and then you can make your project work.

When you design your buttons, if you design them all in the same object, they'll share some properties. For an example, all your buttons will be visible or invisible at the same time. You don't need to redraw them all the time, because they already handle this, so you need to manage them with another method.

You should design your buttons as global objects (as you did), and add them to the ControlP5 object which makes the most sense. You can have one button per object if you want, or many if they are linked together, for an example all the "menu" buttons which appears at the same time could be owned by the same object. Design your buttons in the setup() method if you design them only one time for the whole program. Of course, if this was more than an homework, you may want to avoid the buttons being globals, but it'll be much easier to keep them in memory for a short project.

The "name" of the button is also the name of the method that it'll try to call if you click on it. Two buttons cannot share the same "name". Buttons can have a set value which will be sent to the method that they call.

You don't need to use Processing's mouse events for the buttons to work. They are self-contained: they have their own events, like being clicked on or detecting when the mouse is over them. Here's the documentation for the full list of the methods included in the ControlP5 buttons .

You don't need to manage the buttons in the draw() loop. They manage themselves.

Here's some skeleton code to demonstrate what I just said. You can copy and paste it in a new Processing project and run it to see what's going on.

ControlP5 cp5;
ControlP5 flipVisibilityButton;
int Page = 0;

void setup() {
  size(1920, 800);
  textAlign(CENTER, CENTER);
  textSize(60);
  fill(255);

  cp5 = new ControlP5(this);    // this is ONE object, which will own buttons.
  cp5.addButton("MenuButton0")  // this is the name of the button, but also the name of the method it will call
    .setValue(0)  // this value will be sent to the method it calls
    .setPosition(1420, 250)
    .setSize(400, 100);
  cp5.addButton("MenuButton1")
    .setValue(1)
    .setPosition(1420, 450)
    .setSize(400, 100);
  cp5.addButton("MenuButton2")
    .setValue(2)
    .setPosition(1420, 650)
    .setSize(400, 100);

  flipVisibilityButton = new ControlP5(this);  // this is a different object which own it's own controls (a button in this case)
  flipVisibilityButton.addButton("flipVisibility")
    .setValue(2)
    .setPosition(200, height/2)
    .setSize(200, 100);
}

void draw() {
  // No button management to see here
  background(0);
  // showing which button has been pressed while also keeping watch to see if the mouse is over one of the cp5 buttons
  text(Page + "\n" + cp5.isMouseOver(), width/2, height/2);
}

void MenuButton0(int value) {
  ChangePage(value);
}

void MenuButton1(int value) {
  ChangePage(value);
}

void MenuButton2(int value) {
  ChangePage(value);
}

void ChangePage(int value) {
  Page = value;
}

void flipVisibility(int value) {
  // When the buttons are invisible, they are also unclickable
  cp5.setVisible(!cp5.isVisible());
}

You should be able to expand on this example to do your project, but if you have difficulties don't hesitate to comment here and ask further questions. Have fun!