0

I am currently programming a Connect 4 Applet game, and i already have all the AI logic implemented. Now i need to design a simple gui so i can play with.
I have an image of the board that i want to use (a transparent png) and i want to be able to perform a move by clicking on the image (e.g on the specific column i want to play).

What is the best way of doing this? I thougt of using a class that extends JPanel,where i put all the buttons and stuff...including painting the board image. But can i put a mouse listener on an Image??

user2030118
  • 155
  • 3
  • 14

3 Answers3

4

"But can i put a mouse listener on an Image??"

No, or at least, not in the context you are thinking.

You have a couple of choices depending on what you want to achieve.

The basic requirement though, is you are going to need to know exactly where on the image each click point is. This is best achieved by using an image editing program to map out the "hot spots" and then code these into your program

You could...

Use a JLabel to render the board image and attach a MouseListener to it.

The problem I would have with this is trying to figure out how to update the image with the player markers.

You could...

Use a JPanel and override it's paintComponent to render the image and player moves/markers.

You would then add a MouseListener to it and monitor the mouse clicks from there.

Regardless of which method you used, I would probably create a List of Rectangles which represented the hot spots the user can click. Each time mousePressed is called, I would walk this list and use Rectangle#contains(Point), passing the mouse click point, to determine which hot spot was clicked.

You would then to to compare this with the game model to determine if it's a valid move or not and take appropriate action as required.

Take a look at How to write a Mouse Listener and Performing custom painting for more details

MadProgrammer
  • 343,457
  • 22
  • 230
  • 366
  • Thank you for your reply! In android, when i implement a touch event, i can ask the touch listener for the coordinated of the touched point.. than, i can write logic for what to do depends on the specific coordinated. I thought that maybe java has a similar method for that – user2030118 Jul 29 '13 at 02:48
  • Yep, check out the `MouseListener`. `mousePressed` will return you a `MosueEvent`, which contains a reference to the component that raised the event and a `Point` where the event occurred relative to the component that caused it. Check out the tutorials that I linked at the end of the awnswer – MadProgrammer Jul 29 '13 at 02:51
  • Ah.. ok. I didn't read the comments carefully enough. Saving the hot spots is a great idea! i also used this in some of my older programs. again thanks for the info :) – user2030118 Jul 29 '13 at 02:53
  • And another question, if i am making a custom animations, like drawing red and yellow balls for the game, and i want to animate them (slide from top to bottom). i guess i should do it in a seperate thread? should i make the engine calculations also on a seperate thread? – user2030118 Jul 29 '13 at 04:41
  • If the animation is not to complex, you can use a `javax.swing.Timer`. In any case, you should take a look at [Concurrency in Swing](http://docs.oracle.com/javase/tutorial/uiswing/concurrency/) – MadProgrammer Jul 29 '13 at 04:43
2

Use 16(?) JToggleButton objects in a 4x4(?) GridLayout.

Knock the space & background out of the buttons as seen in the answer to Add a complex image in the panel, with buttons around it in one customized user interface.

Related: How to Use

Advantages of Approach

  • There is no need to extend any component. We can use the 'vanilla' version of the layout, buttons and container. This is favoring composition over inheritance.
  • Logic of the game can be represented by changing the icons of the buttons. The GUI will update as needed.
  • It saves coding all the logic to detect which image was clicked. Add an ActionListener and the buttons will respond to either mouse focus/click or keyboard focus/action.
Community
  • 1
  • 1
Andrew Thompson
  • 168,117
  • 40
  • 217
  • 433
0

why do you wanna add mouse listener to image? if your class implements mouselistener you can tell what to do when the mouse clicked or what ever else. take a look :

public class Test extends JPanel implements MouseListener {
        .
        .
        .
    @Override
    public void mouseClicked(MouseEvent arg0) {
        // TODO Auto-generated method stub          
    }

    @Override
    public void mouseEntered(MouseEvent arg0) {
        // TODO Auto-generated method stub          
    }

    @Override
    public void mouseExited(MouseEvent arg0) {
        // TODO Auto-generated method stub          
    }

    @Override
    public void mousePressed(MouseEvent arg0) {
        // TODO Auto-generated method stub          
    }

    @Override
    public void mouseReleased(MouseEvent arg0) {
        // TODO Auto-generated method stub          
    }
}
mKorbel
  • 109,525
  • 20
  • 134
  • 319
Paniz
  • 594
  • 6
  • 19
  • thx A lot! so i can just implement the mouse listener in the jpanel and put the image of the board (image icon) inside a JLabel or somthing? what is the best container to put the image in? can i put it directly on the jpanel? – user2030118 Jul 29 '13 at 02:43
  • @user2030118 Beware, `MouseListener` is contextual. If you attach the `MouseListener` to the `JPanel` then add the image to a `JLabel`, the mouse points will be relative to the the panel, not the label – MadProgrammer Jul 29 '13 at 02:49
  • Update: I got the animations going and everything is working fine, but one ennoying problem is that when i minimize the applet window, it destroys my game. is there any way to preserve that information?? e.g the state of the board – user2030118 Jul 30 '13 at 00:05