Changing screen with mouse click

IdemoniVezulu

So, I'm pretty new to processing and I'm trying to make a simple game. The program opens with the title and "Start", "Help", and "Exit" buttons. How do I clear the screen, change it's contents when I use the mouse to click on each button. I know the coordinates of each button and I tried using that, but I don't understand how to use mousePressed(), and mouseClicked(). I just need to know how to use those two functions, making up the other two screens is something I have figured out. It's only going to that screen that I'm having problems with.

Chrisir

Code always helps. A lot.

In mousePressed()

You can use println to register if you can click the 3 buttons at all. In mousePressed:

if (mouseX>button1X&&......

Next idea is a variable state that you define and that tells you on what screen you are. Before setup() write : int state = 0;

Let's say state is 0. click on start, state = 1. So state knows, what situation you are in.

Now your function mousePressed() looks like this:

void mousePressed() {
    if (mouseX>button1X&&mouseY>button1Y......) {
        state = 1; // state game 
    }
    if (mouseX>button2X&&mouseY>button2Y......) {
        state = 2; // state exit
    }

}

In draw()

Now in draw() you use :

void draw() {

    background(0);

    if (state==0) {
       displaySplashScreen();
    } 
    else if (state==1) {
       displayGame();
   }
}

This can go on and on

Outside the if...else if... inside draw() nothing is allowed except background() (if you want to be strict)

(later: Also in keyPressed and mousePressed you can use state to distinguish between states)

Best, Chrisir ;-)

IdemoniVezulu

@Chrisir This is my code:

int state=0; void setup() { size(800, 800); background(0, 0, 0); fill(255, 255, 255); rect(345, 265, 110, 50); rect(345, 365, 110, 50); rect(345, 465, 110, 50); PFont f; f=loadFont("ACaslonPro-Bold-35.vlw"); textFont(f); fill(255, 255, 255); textAlign(CENTER); text("<Game Name>", width/2, 150); fill(51, 229, 49); textAlign(CENTER); text("Start", width/2, 300); textAlign(CENTER); text("Help", width/2, 400); textAlign(CENTER); text("Exit", width/2, 500); } void star() { state++; background(0); PFont f; f=loadFont("ACaslonPro-Bold-35.vlw"); textFont(f); fill(255, 255, 255); textAlign(CENTER); text("Start", width/2, 150); } void help() { state++; background(0); PFont f; f=loadFont("ACaslonPro-Bold-35.vlw"); textFont(f); fill(255, 255, 255); textAlign(CENTER); text("Help", width/2, 150); } void mousePressed() { if(state==0) { if((mouseX>=345 && mouseX<=395) && (mouseY>=265 && mouseY<=375)) star(); else if((mouseX>=345 && mouseX<=395) && (mouseY>=365 && mouseY<=475)) help(); else if((mouseX>=345 && mouseX<=395) && (mouseY>=465 && mouseY<=575)) exit(); } } void draw() { mousePressed(); }

I've made my coordinates code as a comment because I have to find the X-coordinate. From what I understand, you're basically asking me to use a variable to check if each function is being called or not? And if it's being called, then execute a certain action?

kfrajer

To format the code in the forum, select your code and hit ctrl+o. Ensure there is an empty line above and below your code block.

Notice the changes I made in your code. The reference is a really good way to start, specially if you don't understand how mousePressed or mouseClicked works:
https://processing.org/reference/mouseClicked_.html
https://processing.org/reference/mousePressed.html

Load your font in setup and make it available in all your sketch by making it global so you only need to load it once.

Kf

final int SHOWGUI_STATE=0;
final int START_STATE=1;
final int HELP_STATE=2;
final int EXIT_STATE=3;

int state=SHOWGUI_STATE;
void setup()
{
  size(800, 800);
  fill(0);
}

void draw()
{
  background(0);
  text(mouseX+"    "+mouseY, mouseX, mouseY);

  switch(state) {
  case START_STATE:
    star();
    break;
  case HELP_STATE:
    help();
    break;
  case EXIT_STATE:
    exit();
    break;
  default:
    state =SHOWGUI_STATE;
    drawGUI();
    break;
  }


}

void mousePressed()
{
  if(state==SHOWGUI_STATE){
  if ((mouseX>=345 && mouseX<=395) && (mouseY>=265 && mouseY<=375)) state =START_STATE;
  else if ((mouseX>=345 && mouseX<=395) && (mouseY>=365 && mouseY<=475)) state=HELP_STATE;
  else if ((mouseX>=345 && mouseX<=395) && (mouseY>=465 && mouseY<=575)) state = EXIT_STATE;
  }
  else{
    state=SHOWGUI_STATE;
  }
}

void drawGUI() {
  fill(255, 255, 255);
  rect(345, 265, 110, 50);
  rect(345, 365, 110, 50);
  rect(345, 465, 110, 50);
  //PFont f;
  //f=loadFont("ACaslonPro-Bold-35.vlw");
  //textFont(f);
  fill(255, 255, 255);
  textAlign(CENTER);
  text("<Game Name>", width/2, 150);
  fill(51, 229, 49);
  textAlign(CENTER);
  text("Start", width/2, 300);
  textAlign(CENTER);
  text("Help", width/2, 400);
  textAlign(CENTER);
  text("Exit", width/2, 500);

}

void star()
{
  //PFont f;
  //f=loadFont("ACaslonPro-Bold-35.vlw");
  //textFont(f);
  fill(255, 255, 255);
  textAlign(CENTER);
  text("Start", width/2, 150);
}

void help()
{
  //PFont f;
  //f=loadFont("ACaslonPro-Bold-35.vlw");
  //textFont(f);
  fill(255, 255, 255);
  textAlign(CENTER);
  text("Help", width/2, 150);
}

IdemoniVezulu

@kfrajer I made the PFont global and load it in setup(), but it does not run the sketch if I do that.

    final int SHOWGUI_STATE=0;
    final int START_STATE=1;
    final int HELP_STATE=2;
    final int EXIT_STATE=3;
    PFont f;
    int state=SHOWGUI_STATE;
    void setup()
    {
            size(800, 800);
            fill(0);
            f=loadFont("ACaslonPro-Bold-35.vlw");
    }

    void draw()
    {
      background(0);
      text(mouseX+"    "+mouseY, mouseX, mouseY);
      switch(state) 
      {
        case START_STATE:
          star();
          break;
        case HELP_STATE:
          help();
          break;
        case EXIT_STATE:
          exit();
          break;
        default:
          state =SHOWGUI_STATE;
          drawGUI();
          break;
      }
    }

    void mousePressed()
    {
      if(state==SHOWGUI_STATE)
      {
          if ((mouseX>=345 && mouseX<=395) && (mouseY>=265 && mouseY<=375)) state =START_STATE;
              else if ((mouseX>=345 && mouseX<=395) && (mouseY>=365 && mouseY<=475)) state=HELP_STATE;
                  else if ((mouseX>=345 && mouseX<=395) && (mouseY>=465 && mouseY<=575)) state = EXIT_STATE;
      }
      else state=SHOWGUI_STATE;
    }

    void drawGUI() 
    {
            fill(255, 255, 255);
            rect(345, 265, 110, 50);
            rect(345, 365, 110, 50);
            rect(345, 465, 110, 50);
            fill(255, 255, 255);
            textAlign(CENTER);
            text("<Game Name>", width/2, 150);
            fill(51, 229, 49);
            textAlign(CENTER);
            text("Start", width/2, 300);
            textAlign(CENTER);
            text("Help", width/2, 400);
            textAlign(CENTER);
            text("Exit", width/2, 500);
    }

    void star()
    {
            textFont(f);
            fill(255, 255, 255);
            textAlign(CENTER);
            text("Start", width/2, 150);
    }

    void help()
    {
            fill(255, 255, 255);
            textAlign(CENTER);
            text("Help", width/2, 150);
    }

kfrajer

but it does not run the sketch if I do that

What happens when you run it? Do you get any errors?

Kf

IdemoniVezulu

@kfrajer It works now. But the problem I have now is that the click works only if close the output screen and rerun the sketch... I think this is because the mouse coordinates get stored in the first run but the if does not execute and when I rerun it then since the coordinates are already stored it executes the next part and the "Start" or "Help" screen pops up.

Chrisir

in keyPressed and mousePressed you can use state to distinguish between states

kfrajer

My code is only a demonstration. You will need to design your sketch from scratch to have the interactive behavior that you desire. To do so, you need to be specific of what you want for your outcome. When I wrote the code, I didn't know how your buttons interact with your design at all. After you have a list of things you want to do, start working in each of them one by one. This is something you get to do yourself.

Kf

Chrisir

I talked about the variable state above.

Do you use the variable state?

In keyPressed and mousePressed you can also use state to distinguish between states

Chrisir

Ah, Sorry I just saw you do use state

Chrisir

I wouldn't do this:

default:
  state = SHOWGUI_STATE;
  drawGUI();
  break;

Instead, let

SHOWGUI_STATE be an own case SHOWGUI_STATE: and make the default: an error message

also I wouldn't use line 44

kfrajer

@Chrisir

You will need to design your sketch from scratch

That is exactly what I mean. I introduce all those interactions only for demonstrations. However you need to remember the OP's code doesn't provide all the information about his/her GUI's behavior. If I click into one of the menu buttons, what happens next? How would one go back to the main menu? The code is for demonstration and it is the user's onus to adapt it to his/her needs. Nevertheless your points are very relevant when considering the demo code I provided.

Kf

IdemoniVezulu

@kfrager If you click on "Help" it shows you the games rules and objectives. There's a back button there. If you click on start it takes you to a page that displays either levels or difficulties, I haven't decided (Start also has a "Back" button to return to menu)

Chrisir

When it is not solved (mouse pressed interpretation wrong) please your current entire code

IdemoniVezulu

@Chrisir This is my code for now:

int state=0; PFont f; void setup() { size(800, 800); background(0, 0, 0); stroke(255); rect(345, 265, 110, 50);//Start Rect rect(345, 365, 110, 50);//Help Rect rect(345, 465, 110, 50);//Exit Rect //PFont f; f=loadFont("ACaslonPro-Bold-35.vlw"); textFont(f); fill(255, 255, 255); textAlign(CENTER); text("Brick Breaker", width/2, 150); fill(51, 229, 49); textAlign(CENTER); text("Start", width/2, 300); textAlign(CENTER); text("Help", width/2, 400); textAlign(CENTER); text("Exit", width/2, 500); } void star()//Start Function { state++; background(0); //PFont f; //f=loadFont("ACaslonPro-Bold-35.vlw"); textFont(f); fill(255, 255, 255); textAlign(CENTER); text("Start", width/2, 150); textAlign(LEFT); text("Back", width/4, 650); } void help()//Help Function { state++; background(0); //PFont f; //f=loadFont("ACaslonPro-Bold-35.vlw"); textFont(f); fill(255, 255, 255); textAlign(CENTER); text("Help", width/2, 150); textAlign(LEFT); text("Back", width/4, 650); } void back() { redraw(); } void Click()//Title Screen Buttons { if((mousePressed==true) && (state==0)) { if((mouseX>=345 && mouseX<=395) && (mouseY>=265 && mouseY<=375)) star(); else if((mouseX>=345 && mouseX<=395) && (mouseY>=365 && mouseY<=475)) help(); else if((mouseX>=345 && mouseX<=395) && (mouseY>=465 && mouseY<=575)) exit(); else if((mouseX>=width/4 && mouseX<=((width/4)+50)) && (mouseY>=650 && mouseY<=700)) back(); } // else if((mousePressed==true)&&(state==0)) // if((mouseX>=width/4 && mouseX<=((width/4)+50)) && (mouseY>=650 && mouseY<=700)) redraw(); } void draw()//Title Screen { Click(); }

Chrisir

Yes. Now all is clear.

Don't use mousePressed as a variable (with if...)

Instead always for buttons use the in-build function mousePressed ()

void mousePressed (){

}

etc. as shown in the code above

Reason: the variable registers one click multiple times that's why you just move on to the next screen

The function with the same name registers only once

Also in mousePressed don't call star or so (as you do in Click() now) but just set state to a new value

Also, remove all lines were it says state++

In short, look at kfrajers code please