Can't get sprite input events working

[paul_nicholls]

Hi all, I am trying to create a hex board game (see screenshot below)

 

 

I am using sprites as the hexes.

I'm reading the game board from a bunch of strings, and when I create the sprites, I created some custom properties on the sprites holding extra information like the array location, etc.

 

var hex = game.add.sprite(hexX,hexY,'hex_base');



hex.arrayX        = x;

hex.arrayY        = row;

hex.counterNumber = counterNumber;



hex.inputEnabled = true;

hex.events.onInputDown.add(hexListener, this);

I have been trying to assign an input event on the sprites so I can click on one and read those custom properties to access the array to do stuff, but the input event doesn't seem to be working at all.  The "hexListener" handler doesn't seem to do anything at all.

 

My complete code is below

 

var game = new Phaser.Game(800, 480, Phaser.AUTO, '', { preload: preload, create: create, update: update });



var cursors      = null;

var HEX_WIDTH;

var HEX_HEIGHT;

var HEX_OFFSET_X;

var HEX_OFFSET_Y;



var boardArray;

var boardWidth;

var boardHeight;



var boardColour = 0x2B2BFF; // blue board

//var boardColour = 0xFF2E23; // red board



var playerColours = [

        0x00FF00, // green

        0xD51CFF  // purple

//        0x0000FF  // blue

    ];



function preload() {

    game.load.image      ('hex_base' , 'assets/hex_base.png');

    game.load.image      ('hex_left' , 'assets/hex_left');

    game.load.image      ('hex_right', 'assets/hex_right');

    game.load.spritesheet('counter'  , 'assets/counter.png');

}



function isHex(hexChar) {

    if (hexChar == ".")                   return true;

    if (hexChar >= "0" && hexChar <= "9") return true;

    return false;

}



function getCounterAt(hexChar) {

    if (hexChar >= "0" && hexChar <= "9") return (hexChar.charCodeAt(0) - "0".charCodeAt(0));

    return -1;

}



function loadBoard() {

    aWidth  = arguments[0].length;

    aHeight = arguments.length;

    

    var ofsX = 10;//HEX_WIDTH;//(game.world.width  / 2) - ((aWidth  - 1) * HEX_OFFSET_X / 2) - HEX_WIDTH  / 2;

    var ofsY = 10;//(game.world.height / 2) - ((aHeight - 1) * HEX_OFFSET_Y / 2) - HEX_HEIGHT / 2;

    

    boardArray = [aHeight,aWidth];

    

    var hexY = ofsY;

    

    for (var row = 0; row < arguments.length; row++) {

        var boardRow = arguments[row];

        var hexX = ofsX;

        for (var x = 0; x < boardRow.length; x++) {

            if (isHex(boardRow.charAt(x))) {                

                var counterNumber = getCounterAt(boardRow.charAt(x));                



                var hex = game.add.sprite(hexX,hexY,'hex_base');

                

                hex.arrayX        = x;

                hex.arrayY        = row;

                hex.counterNumber = counterNumber;

                

                hex.inputEnabled = true;

                hex.events.onInputDown.add(hexListener, this);

                

                hex.tint = boardColour;

                if (counterNumber >= 0 && counterNumber < playerColours.length) {

                    // a counter is here so place that too

                    var counter = game.add.sprite(hexX,hexY,'counter');

                    counter.tint = playerColours[counterNumber];

                }

            }

            hexX += HEX_OFFSET_X;

        }

        hexY += HEX_OFFSET_Y;

    }

}



function create() {    

    game.debug.enable;

    

    HEX_WIDTH    = game.cache.getImage('hex_base').width;

    HEX_HEIGHT   = game.cache.getImage('hex_base').height;

    

    var idealHexHeight = HEX_WIDTH / (Math.sqrt(3) * 0.5);

    

    HEX_OFFSET_X = HEX_WIDTH  / 2;

    HEX_OFFSET_Y = HEX_HEIGHT * 40 / 56;

    

    var hexClickedText = game.add.text(0,0, "0,0", { font: "12px Arial", fill: "#ff0044", align: "left" });



    cursors = game.input.keyboard.createCursorKeys();

    

    loadBoard(

        '      . . . . . . .      ',

        '     . . . . . . . .     ',

        '    . . . . . . . . .    ',

        '   . . . . . . . . . .   ',

        '  . . . . . . . . . . .  ',

        ' . . . . . 1 0 . . . . . ',

        '. . . . . 0 . 1 . . . . .',

        ' . . . . . 1 0 . . . . . ',

        '  . . . . . . . . . . .  ',

        '   . . . . . . . . . .   ',

        '    . . . . . . . . .    ',

        '     . . . . . . . .     ',

        '      . . . . . . .      '

    );

}



function update() {

}



function hexListener(hex) {

    hexClickedText.text = "Hello world!!";//hex.x.toFixed + "," + hex.y.toFixed;

}

Any ideas?  I'm stumped

I've looked at the Phaser examples online and in the downloaded GIT repository, but I can't see what I'm doing wrong...

 

cheers,

Paul

[paul_nicholls]

If it helps, I will attach my complete project later on today so someone can try it and hopefully see what I'm doing wrong...

Cheers,

Paul

[Jackolantern]

I don't think your hexListener can see the hexClickedText because it is local to the create() function. You could either make it global or add it as a property of this. 

 

But I think your event listener is setup correctly. You could always add a console.log() to the inside of the hexListener to make sure it is being called when you click the sprite. 

[paul_nicholls]

I don't think your hexListener can see the hexClickedText because it is local to the create() function. You could either make it global or add it as a property of this.

But I think your event listener is setup correctly. You could always add a console.log() to the inside of the hexListener to make sure it is being called when you click the sprite.

Hmm...so maybe I could do something like this (can't test till later on)

hex.events.onInputDown.add(this.hexListener, this);

To point to the global hexListener function?

And I will also try defining the hexClickedText object at the top of the project too as you suggested...

Cheers,

Paul

[Jackolantern]

I don't think you need to add the 'this' for your hexListener callback (depending on the execution environment, it may even make it break making that change). As best as I can eyeball it, I think it is running on clicks, but it doesn't appear to be doing anything because it can't find the hexClickedText variable. I am pretty sure that is the problem here. 

 

So yes, move hexClickedText (at least its declaration) to the top of the page. If that doesn't work, add a console.log("Inside hexListener"); or something like that inside the hexListener, open the Javascript console and see if the listener is running. 

[paul_nicholls]

Ok, thanks mate...I will try this later on tonight when I get to my computer

If it helps, I'm using the free Brackets IDE ATM for my development environment. I'm not sure how I would debug the program or even see a console output using this as I'm not that familiar with it yet. I will look into it though.

Cheers,

Paul

[Jackolantern]

The Javascript console is brought up in a browser while you are running your game. In Chrome, you press Ctrl+Shift+J to bring it up. Debugging games can be rough because of how games work (calling functions many times per second to move things just a tiny bit), so being able to send out arbitrary messages to check values, make sure functions are running, etc. is very important. Learn to use the Javascript console well  

[paul_nicholls]

The Javascript console is brought up in a browser while you are running your game. In Chrome, you press Ctrl+Shift+J to bring it up. Debugging games can be rough because of how games work (calling functions many times per second to move things just a tiny bit), so being able to send out arbitrary messages to check values, make sure functions are running, etc. is very important. Learn to use the Javascript console well

Thanks for the info Jackolantern...much appreciated and will be used

[paul_nicholls]

Thanks Jackolantern for the help!  

 

I moved the "hexClickedText" variable up to the top, and added a console log output to the hexListener routine.  The log output was working so I updated the hexClickedText variable with the custom fields as a test (array x,y, and counter number), which showed up on the screen just fine.

 

cheers,

Paul