Forums » Help » How to handle clicking?

I'm putting together a turn based game and most of the interaction is: click on object, menu pops up, select a value, click on the map. I have yet to see any examples or code on how to have clicking on objects. How do I make an object clickable?

Also - is there an easy way to have a "menu" level that will act as an overlay to the main game level where users can select items?

Thanks.

Well there is no function to call (that I know of), but what I have done for a game I am developing that has an inter-board menu is similar to what nefD did in this post http://impactjs.com/forums/help/pressed-action-for-multiple-entities

Basically I checked the X/Y of the mouse click to find out where it was and what part of the screen the user clicked. So for your use case, if the menu is say a 3x2 grid of items, you can tell where the user clicked and use that to tell what was selected.

To your question about a menu level that overlays, what I did was just dynamically spawn and kill an entity as my menu screen. On this menu I have the background image and some customized text based on the state of the game.

Also, don't forget that you can do this in JS outside of Impact. Use jQuery to open a div with the menu, and you can just construct your menus that way. This way you don't have to worry about levels or entities and canvas, you just interact with divs, links, text and images themselves.

Hope that helps

Thanks for your quick response. It helps a bit. I still want an easy solution to pick up the clicking of an element. Since it is javascript, can I just use "onClick" event?

-Nick

Quote from NickR
... How do I make an object clickable?

I'm working on something perhaps more like what you are looking for now. What I have done so far is to create a small 2x2 entity, which I call "pointer". Each time the pointer entity is updated it binds its position to the current mouse position.

It has the following collision setup:

        type: ig.Entity.TYPE.NONE,
	checkAgainst: ig.Entity.TYPE.B, // Check Against B (menu items, etc.) 
	collides: ig.Entity.COLLIDES.LITE

The entities that I want clickable have the following setup:

        type: ig.Entity.TYPE.B,  
        collides: ig.Entity.COLLIDES.PASSIVE,

Override the pointer's .check(other) function and include:

	  
       other.receiveDamage( 0, this );

The entity (menu item, etc.) that has been touched by the pointer can then start its appropriate behavior by overiding its .receieveDamage function and including whatever behaviors you want.

If you use exactly what is above then anytime the pointer simply touches another entity of type B, it will initiate an action. What I have yet to workout is coordinating the mouse button press, together with the pointer touching the B entity to cause a behavior. This will make it "clickable". Once I work that out, I will post my example.

MikeL's approach with an invisible "pointer" entity is probably the best solution. Impact uses a spacial hash to check if entities overlap with each other, so this very fast - compared to going through all entities in a for-loop and checking their positions.

You don't have to overwrite the .receiveDamage() method though. You could just introduce a new method for your clickable entities. E.g.:

EntityClickable = ig.Entity.extend({
	type: ig.Entity.TYPE.B,
	
	clicked: function() {
		/* Handle the click */
	}
});


EntityPointer = ig.Entity.extend({
	checkAgainst: ig.Entity.TYPE.B,
	size: {x:1, y:1},
	isClicking: false,
	
	update: function() {
		// Update the position to follow the mouse cursor. You
		// may also have to account for ig.game.screen.x/y here 
		this.pos.x = ig.input.mouse.x;
		this.pos.y = ig.input.mouse.y;
		
		// Only check for the click once per frame, instead of
		// for each entity it touches in the 'check' function
		this.isClicking = ig.input.pressed('click');
	},
	
	check: function( other ) {
		// User is clicking and the 'other' entity has 
		// a 'clicked' function?
		if( 
			this.isClicking && 
			typeof(other.clicked) == 'function' 
		) {
			other.clicked();
		}
	}
});

(untested)

Thanks Dominic. That is very clean. Works great overall.

One minor problem that I noticed while working on this solution:
While testing, I used a 2x2 yellow square as the pointer entity so that I could verify what was happening on the screen. I tied the cursor movement to the mouse, exactly as you did.

What I found though, is that if I moved the mouse quickly, the pointer entity would 'lag' behind and not match up exactly with the tip of the actual mouse pointer. Once I slowed down or stopped moving the mouse, then the pointer entity would 'catch up' to the mouse and be at the correct coordinates.

Is this an issue with the browser not feeding the information quickly enough to the canvas or the way that Impact handles mouse input? Thanks in advance.

As discussed in IRC, the lag is just the time between the mousemove event is fired and the next game frame is drawn. I don't think this can be made any more efficient.

It's not that noticeable with higher frame rates though. Welmeister has this problem too, when dragging around entities.


I also pushed a change to the git repo that allows you use ig.input.pressed() multiple times within the same frame. So in my example above you wont need the isClicking var anymore and instead just use ig.input.pressed('click') in the .check() method.

Was thinking of working with a multi-tier window and this really has helped a lot. I'm guessing it would probably be a good idea to just switch the animation for 2nd tiers.

For instance you click on options. Then it would probably be best to switch out the animation for the text you want. The alternative would be changing the text for the menu. Anybody have a good idea on how to best display mult-tier menus from experience?

Hi guys,

I'm making a turn based game with the same style of play mentioned above. I have the clicking working with the invisible mouse pointer.

However I'm having a problem that I don't seem to get around, hope you can help.

I have two type B entities. The first is a player. When I click the player, a button, right next to that player pops up (also a type B entity).
Everything works fine, until I move my player near another player and the popping menu overlaps that player.

The last drawn entity is the menu button, any idea why it keeps considering that I'm clicking the player and not the button? I tried to change zIndex of the player (which shouldn't be necessary any way because it was drawn first) but still no luck.

Any ideas?

Cheers

Paulo

I'm making this reply because this is the first thread I found via google. I implemented the solution above, and while it works, there's a cleaner, more elegant solution created by Graphikos in this thread: http://impactjs.com/forums/help/i-writed-whether-entity-is-clicked-function-which-need-to-be-improved/page/1

And here's the copy/paste:

Quote from Graphikos
Here is some code I use to recognize an entity click. It also takes in account the screen position.

// in entity definition

update: function() {
	if (ig.input.pressed('leftButton') && this.inFocus()) {
		ig.log('clicked');
	}
},

inFocus: function() {
	return (
	   (this.pos.x <= (ig.input.mouse.x + ig.game.screen.x)) &&
	   ((ig.input.mouse.x + ig.game.screen.x) <= this.pos.x + this.size.x) &&
	   (this.pos.y <= (ig.input.mouse.y + ig.game.screen.y)) &&
	   ((ig.input.mouse.y + ig.game.screen.y) <= this.pos.y + this.size.y)
	);
 }

To round it out here are a few other useful snippets over at POIJS:

Entity Click
Detect Double Click
Entity Circle Hit Target

Why isn't this a part of the game engine natively? I mean why would a 2d game engine not just assume clicking on an entity would be an immediate necessity to a game developer?

I've had a lot of problems with click/hover in my game where are lot of entities with different zIndex, so I wrote some simple functions to take care of this, hope this could help somebody: https://github.com/bskbsk/impactjs-click-hover-example :)