Jump to content

Collect onclicked coordinates on tile map & save into array variable


Recommended Posts

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)



    document.getElementById('test').innerHTML = " 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



data 1.PNG

data 2.PNG

Link to comment
Share on other sites

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


Link to comment
Share on other sites

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??

new Data.PNG

Link to comment
Share on other sites


  • Recently Browsing   0 members

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