Understanding Click Targets

Click Targets

When you are making a game with a lot of things to click, it sure would be some messy code if you had to set up a different click function for each object. It saves a lot of time and code just to funnel most clicks through a common function. This is something I’ve seen some coders who are new to game programming struggle with. Once you see it in action though you’ll never forget.

Take for example a bubble popping game, or a word game like hangman. A user presses a letter or some other object and you need to evaluate what was clicked. Instead of setting up 26 functions you simply set up one function and then read the target click event function.

What is the target?

The target is the actual object the user has clicked.

You are most likely using something similar to this code to set up listeners for your sprites.

mySprite.inputEnabled = true;
mySprite.events.onInputDown.add(this.clickHandler, this);

function clickHandler()

To read the target simply change your click handler to include one extra parameter.

function clickHandler(target)


The target is always passed to the function. Then it is just a matter of reading something unique about that target or manipulating the target itself. You simply refer to that target as you would a sprite because that’s exactly what it is.

Take this example. We have four different sprites, which images all come from the same sprite sheet. We make copies and assign a unique frame and a color string to each sprite. When then read that color when the sprite is pressed and place it into the text field.

Here is the code that shows how to do this:

var StateMain = {
    preload: function() {
        game.load.spritesheet("squares", "images/squares.png", 250, 250);
    create: function() {
        this.clickedText = game.add.text(game.width / 2, 50, "Click A Square");
        this.clickedText.anchor.set(0.5, 0.5);
        this.clickedText.fill = "#ff0000";

        var colors = ['RED', 'BLUE', 'YELLOW', 'GREEN'];
        for (var i = 0; i < 4; i++) {
            var square = game.add.sprite(0, game.height / 2, "squares");
            square.anchor.set(0, 0.5);
            square.width = game.width / 4;
            square.scale.y = square.scale.x;
            //sprites are dynamic, so you can just
            //make up a new property and assign it
            //to the sprite
            square.color = colors[i];
            //enable the sprite for input
            //and set up a click event
            square.inputEnabled = true;
            square.events.onInputDown.add(this.tileClick, this);
            //space out the sprites based on width
            square.x = square.width * i;
            //change the frame of the sprite
            square.frame = i;
    tileClick(target) {
        //the target is always passed to the function
        //on a click
        this.clickedText.text = "You Clicked A " + target.color + " Square";
    update: function() {}

Leave a Comment