Jump to content

Can't get sprite input events working


paul_nicholls
 Share

Recommended Posts

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

 

8EJu3JJ.png

 

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 :) 

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...