ImageMap - OnMouseOver and OnMouseClicked

Game Play & Game Design
#1

Hello,

I’m quite new here and this is my first post i think.
I’ve looked at lots of topics in this forum and I must say that is the best one that could probably answer my question and help me.

I must make a sort of ImageMap like in HTML or JavaScript.

Some Examples:

and

but I can’t find out how do do this.
I searched a lot but unsuccessfuly.

What I need?

Well I’m in a small game development where you have to klick around quite a lot.
And for the map i already have the images but I have to put them together give on each of those an MouseListener and see when the mouse is over an image is should highlight (probably a second image will take this role) and if the image is klicked it should perform the next action (e.g. System.out.println(“Image klicked!”); or something)

my biggest problem is that i have to give all these images together so that is looks like a map seen from above (2D).
And then the second problem is my MouseListener. how to put it on a image.

I hope you can give me some advice and/or code.
Thank you,

Joe

#2

I used this kind of enviroment for my hearts game. I used an applet which implements Runnable only, just for using threads. As for the mouse, I capture when the user clicks or moves the mouse and test what the user is clicking or moving the mouse over with 2 methods…

This captures what the user clicks, I stripped it down, but shows the gist of what Im using it for. I have a button painted at the coords listed in the method. If the user clicks between the coords, a button sound is played, and the start screen flag is changed to 0, which tells the paint method not to paint the start screen. Its a deprecated method, but I like it.


public boolean mouseDown(Event e, int x, int y) { //Deprecated
   	mX = x;
   	mY = y;

	if(startScreen==1){
		if(mX >= 285 && mX <= 385 && mY >= 300 && mY <= 350){
			butClick.play();
			startScreen = 0;
			return true;
		}
	}
	else{
		return false;
	}
}

This method constantly checks where the mouse is, if the mouse is over a button, then the hover flag is set to 1, telling the paint method to paint the hover effect on the button and to play the hover effect sound.


public boolean mouseMove(Event evt,int x,int y){
    mX = x;
    mY = y;
    if(mX > 0 && mY > 0){
    	if( startScreen == 1){
   			if(mX >= 285 && mX <= 385 && mY >= 300 && mY <= 350){
				if(startHoverFlag == 0){
					startHoverFlag = 1;
					snd_Hover.play();
				}
   			}
   			else{
   				startHoverFlag = 0;
   			}
    	}
    }
    else{
    	return false;
    }
}

Hopefully this will help you, or someone else can point out any problems they forsee with the above code.

#3

Thank you for the response.

Your methods brought me on one idea and combined with mine I almost finished what I wanted.

Panel.java


import ...;

@SuppressWarnings("serial")
public class Panel extends JPanel implements MouseListener,MouseMotionListener {
	
	private BufferedImage foreground, background;
	
	public Panel() {
		try {
			foreground = ImageIO.read(new File("foreground.png"));
			background = ImageIO.read(new File("background.png"));
		} catch (IOException e) {
			System.out.println("Couldn't read images!");
		}
	}
	
	public void paintComponent(Graphics g) {
		g.drawImage(foreground, 0, 0, null);
	}

	public void mouseClicked(MouseEvent e) {
		System.out.println("Mouse Clicked");
		
		Point p = e.getPoint();
		
		int i = background.getRGB((int)p.getX(),(int)p.getY());
		Color c = new Color(i);
		
		System.out.println("R: "+c.getRed()+" B: "+c.getBlue()+" G: "+c.getGreen());
		
	}

	public void mouseMoved(MouseEvent e) {
		
	}
	
	public void mouseEntered(MouseEvent e)    {}
	public void mouseExited(MouseEvent e)     {}
	public void mousePressed(MouseEvent e)    {}
	public void mouseReleased(MouseEvent e)   {}
	public void mouseDragged(MouseEvent arg0) {}
}

Main.java


import ...;

public class Main {

	private static JFrame mainFrame = new JFrame("Test Image Map");
	
	public static void main(String[] args) {
		Panel p = new Panel();
		p.addMouseListener(p);
		p.addMouseMotionListener(p);
		
		mainFrame.getContentPane().add(p);
		//mainFrame.setPreferredSize(new Dimension(570,570));
		mainFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		mainFrame.setVisible(true);
		mainFrame.pack();
	}
}

As you see in my code I have two Images.
The foreground I paint it into my Panel extended by JPanel.
So if the user Clicks somewhere in the image it checks witch Color the Background image has.
From there I can do anything.
The same thing I must use on the highlighter thing but with more images.

Images that I used are in the attchment.

Thank you.