Changing screen with mouse click

edited February 2017 in How To...

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.

Tagged:

Answers

  • edited February 2017

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

  • edited February 2017

    @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?

  • 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);
    }
    
  • @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);
        }
    
  • but it does not run the sketch if I do that

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

    Kf

  • @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.

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

  • 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

  • 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

  • Ah, Sorry I just saw you do use state

  • 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

  • @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

  • @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)

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

  • edited February 2017

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

  • 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

Sign In or Register to comment.