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

Share this post

Link to post
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])


Share this post

Link to post
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

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.