Forums » Help » I writed "whether entity is clicked" function which need to be improved

the code is below:

        init : function() {
			ig.input.bind(ig.KEY.MOUSE1, 'click');
         },
 
        isClicked : function(entity) {
			if(ig.input.pressed('click')) {
				var x = ig.input.mouse.x;
				var y = ig.input.mouse.y;
				if(x > entity.pos.x && x < entity.pos.x + entity.size.x && y > entity.pos.y && y < entity.pos.y + entity.size.y) {
					return true;
				} else {
					return false;
				}
			}
			return false;
		},

I think it is awkward. When i click a entity, another entity overlied behind it is also be clicked. It fuss me much.
I really appreciate anyone could help me to improve it.

Click-through is normal and there really isn't any way to stop the event. It was suggested to me that you use a flag that gets set on the first clicked entity and checked on subsequent entities and ignore the click. In theory it sounds possible I'm just not sure where to reset the flag once its been set. Perhaps with the new .released() trigger. I haven't tried to implement such an idea.

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)
	);
 }

The Click-through problem hasn't been resolved. Could anyone help? Thanks.

You won't be able to tell if an entity is clicked and no other ones are by putting the code in the entity class. I would add some code to your extended ig.Game class (somewhere after you call this.sortEntities()) which loops through the Game's entity array backwards, and tests if the entity is clicked. It sets the 'clicked' property to false if it is not clicked, true if it is, and once it finds a clicked entity it sets the rest of the entities' 'clicked' property to false. Untested psuedocode:

var clickedEntityFound = false;

for(var i = this.entities.length; i >=0; i--) {
    if (!clickedEntityFound) {
        if (insertClickDetectionLogicHere) {
            this.entities[i].clicked = true;
            clickedEntityFound = true;
        } else {
            this.entities[i].clicked = false;
        }
    } else {
        this.entities[i].clicked = false;
    }
}
// now you can check entities to see if the 'clicked' property is true

I'm a novice-ish programmer working on this same type of issue. Essentially, I want to be able to move my characters via mouse clicks or with keystrokes.

I love the inFocus function. I've used it to see whether an entity was the last thing on the canvas clicked. If not, it ignores keystrokes. All I had to do was add a setting called "clicked" in the main part of the entity file, then edit the Update() function a bit:

	clicked: false

	update: function() {
		this.parent;
		
		if (ig.input.pressed('leftButton') && this.inFocus()) {
			//ig.log('clicked');
			this.clicked = true;
		} else if (ig.input.pressed('leftButton') && !(this.inFocus())) {
			this.clicked = false;
		}

		if(this.clicked && this.inFocus){
			//do stuff
		}

I'm still flailing about, but this post DEFINITELY helped me on my way. Trying to build a 2D, fantasy-based, turn-based war strategy game (think Warlords II for DOS) in ImpactJS. So far, so good... but I have lightyears to go. :)