Easy way to click an image

Hi there,

I am not good in java at all, but I am trying to programm in my spare time. I know to do some actions but I have no idea to do any mouse events. Does anyone have a good tutorial for this? Because I want to click an image to go to the next screen. For the menu, so the buttons can work. I got now all the buttons in the menu, but if you can’t press them it’s really useless.

I have also a screen to show you the buttons.

http://img826.imageshack.us/img826/1134/elementalsb.png

Already thanks!
-RoseSlayer

Im sure there’s an easier way but I would implement a MouseListener and check if the click was within an area of the screen (over any of the buttons).


int mouseX, mouseY;

public void mouseClicked(MouseEvent e)
{
    //Get location of mouse on your screen
    if(e.getButton() == MouseEvent.BUTTON1)
    {
    mouseX = mouse.getX();
    mouseY = mouse.getY();
    }

    //Then if-statments to see if the mouseX and mouseY was over any of the buttons.
}


EDIT: It works pretty much like an ActionListener.

Im sure you have a Input Handler of some sought, that handles muse and keyboard presses.

If you do not have an InputHandler, research that first.

Now you have your InputHandler, the simplest way, would to check if the cursor is within a region e.g. a rectangle or square, once determined the cursor is within the rectangle, you should then check for a mouse clicked.

You should have a class called Button, that will have a render and update method, that you update in your menu screen class.

Inside the update method you would have this


public void update(InputHandler input){
if(( input.mouseX > image.getX() && input.mouseX < (image.getX() + image.getWidth()) ) 
       && (input.mouseY > image.getY() && input.mouseY < (image.getY() + image.getHeight() )){

if(input.leftMouseButtonClicked == true){
System.out.println("The button works!");
//change screen code here
}
}
}

The first if statement checks to see if the mouse cursor is within a rectangle of the size of the image, if it is, it will then checked it the mouse is clicked it will then proceed and change the screen, in this case print “The button works!”.

You would use a “layout” of some kind, even just a simple one, to lay out an arbitrary number of items centered on screen. And you would have a Button type of class that handles mouse click, using a contains(int, int) method to check if the mouse is inside the point.

Using a bunch of if-else statements works, but it leads to messy code that is (a) error-prone, (b) difficult to debug and © difficult to adapt. For example; say you want to add a new button later down the road, you might need to copy and paste huge chunks of code in many parts of your program. Or, if you want to change the way the button looks or acts, you would again need to change a lot of code. Ideally it would be better if everything was “modular” and well separated – that way, if you decide to add/remove buttons, or change them around, it should take minimal code changes.

This would be a good candidate for the Enum pattern. For a larger application, enums might not always be the best choice, but for small games and generally increased productivity they can lead to very clean code.

In this example, we only need to define a new Enum constant when we want to add, remove, or change a button from the menu screen.

public interface ButtonListener {
	public void clicked(GameContext context);
}

protected enum MenuActions implements ButtonListener {
	
	// All buttons are defined here
	
	PLAY("Play") {
		public void clicked(GameContext context) {
			context.enterGame();
		}
	},
	
	EXIT("Exit") {
		public void clicked(GameContext context) {
			context.exit();
		}
	};
	
	// MenuActions class definitions...
	
	public final String text;
	
	MenuActions(String text) {
		this.text = text;
	}
}

Assuming you have some sort of GameContext class, which handles game states and so forth:

public interface GameContext {
	public void exit();
	
	//you could apply further abstraction here... i.e. enterState(State)
	public void enterGame();
	public void enterMenu();
}

During our GUI setup, we don’t actually know anything about what buttons exist or how large they are. This “abstraction” means that we won’t need to change the following code if, say, we want to add, change or remove a button:

//let's say your game implements GameContext
final GameContext context = this;

for (final ButtonActions action : ButtonActions.values()) {
	MyButton btn = new MyButton(action.text) {
		public void onClick(int x, int y, int mouseButton) {
			//optionally you could also pass x,y,etc to ButtonListener
			action.clicked(context);
		}
	};
	buttonGroup.add(btn);
}

If your button click logic is complex, you might want to move it to new classes (using a command design pattern or something similar). Perhaps it would be implemented by passing the listener to the enum constructor, rather than overriding the enum.

For an entire example of how it might look in LibGDX, see below:

(As you can see, you don’t need to make your own input handler, or button, or layout classes… very easy!)

The result looks something like this: