phaser framework Collect onclicked coordinates on tile map & save into array variable

[Ashish]

Hello devs, I am working on one game where I have created function to save onclicked coordinates into an array.

function update() {

    marker.x = layer.getTileX(game.input.activePointer.pageX ) * 15;
    marker.y = layer.getTileY(game.input.activePointer.pageY ) * 15;

    var arrayData = [];

if (game.input.mousePointer.isDown && map.getTile(layer.getTileX(marker.x), layer.getTileY(marker.y)) != currentTile)
    {

     arrayData.push(layer.getTileX(marker.x),layer.getTileY(marker.y));

    arrayData.toString();

    document.getElementById('test').innerHTML = " Data: " + arrayData;
    console.log("Data:"+arrayData);

}

 

In this function I have declared array   var arrayData = [];   inside update()  function and the output is, it showing only showing on set of coordinates and second click that value is updating . So, coordinate values are added into array but only single pair and on every click that pair value is updating.

Secondly, If I am declaring array outside the update function ,the result is totally different. On-clicked, the value are coming in high quantity. If I am clicking on (1,3) coordinates then the array result is (1,3,1,3,1,3,1,3,1,3,1,3,1,3,1,3,1,3) and on second click on the coordinates (4,6) the array result is like (1,3,1,3,1,3,1,3,1,3,1,3,1,3,1,3,1,3,4,6,4,6,4,6,4,6,4,6,4,6,4,6,4,6,4,6,4,6,4,6,4,6)

Please suggest me some solution , so that I can add these coordinate pairs properly into an array. 

Thank you

 

 

[hicotech]

what exactly are you trying to achieve?

as far as I know Phaser runs in 60FPS so update function is called 60 times per second.. that means that with array declaration in update function you keep creating new empty array and once any tile is clicked you put coordinate to array, log it to console but obviously on next iteration array is again empty..

this will push array of x,y coordinates to your arrayData everytime when you click somewhere in the game tilemap

var arrayData = [];
var game = new Phaser.Game({
    width        : 800,
    height       : 600,
    renderer     : Phaser.AUTO,
    parent       : 'canvas-wrapper',
    antialias    : true,
    multiTexture : true,
    enableDebug  : false,
    state : {
        preload : preload,
        create  : create,
        update  : update,
        render  : render
    }
});

function preload() {
    // foo
    // create game tiles here
}

function create() {
    game.input.onDown.add(function() {
        arrayData.push([game.input.activePointer.worldX, game.input.activePointer.worldX])
    });
}

 

[Ashish]

Thank you @hicotech , I really appreciate this replay from you. Actually I want divide the map save that coordinates (no of tiles) into an array. I tried the above changes, coordinates are coming properly in array the only problem is the coordinates are in pixels. In this map tile size is 15*15 pixel, can you suggest me how can get tile coordinates??

[hicotech]

just divide coordinates by 15 then

arrayData.push([Math.floor(game.input.activePointer.worldX / 15), Math.floor(game.input.activePointer.worldY / 15)]);

 

[Ashish]

Thank you  @hicotech again, Its really working now. Thank you so much!!!

[Ashish]

Hey, @hicotech I have again question if you don't mind to answer it, can we select multiple coordinates like this using cursor or something and store that coordinates into an array.

[hicotech]

isnt that what we already did?