1

I'm making a point-and-click escape type of game. I'm wondering, if there's an easy way to make clickable images? I'm going to use photographs as background and also as items that the player has to collect. So, is there an easy way to make the items clickable and also disappear after clicked (player collects it).

Thanks for answers, and if my explanation was complicated, please say and I'll try to fix it.

mre
  • 43,520
  • 33
  • 120
  • 170
Buubbeli
  • 17
  • 1
  • 1
  • 2

6 Answers6

5

For making a game I'd recommend bringing all the logic one level lower.

  1. Create an data structure which will contain the state of your game "level". This data structure will be loaded from some kind of XML level configuration file, and I think it should contain:
    • A Image object containing the level background (photo).
    • An array of all items. Each item should have an Image, dimensions on the level screen (X,Y,Width,Height) and some kind of state (visible, highlighted, etc.).
  2. Make a class which extends Canvas. This will be the component which will contain and render your whole game screen (with items, and background photo).
  3. Override it's paint method. In this paint method use drawImage method go through your level data object (specified in step 1) and draw the background (room) and all the items in their respective coordinates. If the item has visible = false - don't draw it. If it has selected = true - draw some highlight around it or whatever you want.
  4. Implement a MouseListener. This listener should check if click coordinates are inside the dimensions of one of your "objects" on the screen (loop through all clickable objects). If it is - do appropriate action (for example increase score and set visible = false for that item) and update your canvas with repaint. This will trigger the paint method again drawing all the changes on your canvas.
  5. Register a MouseListener on your Canvas with addMouseListener to tie it all together.
bezmax
  • 25,562
  • 10
  • 53
  • 84
  • Why are you recommending AWT components? – mre Dec 30 '11 at 14:23
  • @AndrewThompson Last time I checked neither AWT nor Canvas were deprecated. And they are absolutely enough to render a bunch of images on the screen. Correct me if I'm wrong and can't see how Swing will make this simple image rendering algorithm easier or faster. – bezmax Dec 30 '11 at 14:35
  • 2
    @AndrewThompson Moreover, Swing is a GUI widget toolkit (by it's definition). AWT is a windowing system. If you read my answer, you'll notice that I recommend not using **any** GUI widgets for building a game but rather render everything on a Canvas, as every proper 2D game does. Moreover, Swing's JComponent as a replacement for Canvas is **not suitable** for creating games as it's `repaint()` method is asynchronous and relies on a separate worker thread to do the actual painting. Therefore I strongly disagree with both your comment and `-1` unless you explain to me where I am wrong. – bezmax Dec 30 '11 at 15:03
  • 1
    I agree with Andrew. This is NOT an action game. Its a simple point/click game. No need to reinvent the wheel to display an image on a clickable component. So yes the advice may be valid in some cases, but answers should be given in the context of the question. – camickr Dec 30 '11 at 15:45
  • @camickr Yes, it is not. However my answer suggests to render it all on a Canvas, without using any kind of GUI widgets, simply because I see that approach better. And for **this** approach SWT is better than Swing. – bezmax Dec 30 '11 at 19:58
2

If you're using Swing, simply set the icon of a JButton. This will create a "clickable image".

mre
  • 43,520
  • 33
  • 120
  • 170
1

There are several ways, the most straightforward being using a JButton and setting an icon on it. But you can also add a MouseListener to any Component (like JPanel) and set an image as background (override paint).

Stijn Geukens
  • 15,454
  • 8
  • 66
  • 101
0

You're going to probably do something like this: Draw a JPanel and then position a bunch of JLabels on it, and each label will draw it's own image too.

If you have a specific code question, we can be more help, but you're being very general. Try working through the Swing examples on the java web site and then ask more targeted questions.

Kylar
  • 8,876
  • 8
  • 41
  • 75
0

You can set the image to a JButton object as background. The key point is that you should listen to the mouse click event and JButton is the first choice to satisfy this requirement.

Summer_More_More_Tea
  • 12,740
  • 12
  • 51
  • 83
0

A simple example on how you can get a clickable image. For more examples and explanations on java Swing and awt you can look at the official java tutorials here. 

//a lable holding an image
JLabel label = new JLabel(new ImageIcon("MyImage));
//Add a mouse listener to get the click event
//
label.addMouseListener(new MouseAdapter(){
    public void mouseClicked(MouseEvent e) {
        System.out.println("Mouse clicked (# of clicks: "
                + e.getClickCount() + ")", e);
    }
});
josefx
  • 15,506
  • 6
  • 38
  • 63
  • Why not just use a `JButton`? – mre Dec 30 '11 at 14:31
  • @mre using a button would make it clickable but also a visible Button, my example should (with transparent background) not give any additional visible hints. Depending on how these images are used either may be preferred (hidden objects to find in the image or visible choices). – josefx Dec 30 '11 at 14:41
  • 1
    There's a simple fix for that...ensure that the content area is not filled, make it opaque, and remove the borders. – mre Dec 30 '11 at 14:43