Isometric get tile on touch

Cocos Creator
#1

Hey there, I’ve recently tried to implement a movement feature but failed as I couldn’t seem to get online code samples to work.

image
image1919×940 323 KB 

// PC.js
tileFromPosition (pos, mapLayer) {
  var wx = pos.x;
  var wy = pos.y;
  wx *= cc.view.getScaleX()
  wy *= cc.view.getScaleY()
  var tw = mapLayer.getMapTileSize().width;
  var th = mapLayer.getMapTileSize().height;
  var mw = mapLayer.getLayerSize().width;
  var mh = mapLayer.getLayerSize().height;

  var isox = Math.floor(mh - wy/th + wx/tw - mw/2)
  var isoy = Math.floor(mh - wy/th - wx/tw + mw/2 - 1/2)

  return { isox, isoy}
},

onLoad () {
  this.node.parent.getChildByName('Testing').getChildByName('Floor').on(cc.Node.EventType.TOUCH_END, (c) => {
    console.log(this.tileFromPosition(this.node.convertToNodeSpace(c.touch.getLocation()), c.target.parent.getChildByName('Floor').getComponent(cc.TiledLayer)))
  })
}

Gives me this:

image
image1432×933 232 KB

But the result I’m expecting is { isox: 0, isoy: 0 }.

Any idea what I am missing? Thanks in advance.

#2

Might be issue with {.5,.5} anchorpoint. I believe the position/tile coordinate transforms are based on {0,0} anchorpoint.

  1. change Testing anchor to 0,0
  2. Subtract map center in points/pixels

Option 1 - easiest, but may affect some other node hierarchies for which you’ll have to account.
Option 2 (psuedo code - commented portions)

var touchPos = this.node.convertToNodeSpace(c.touch.getLocation());
var mapCenter = // Testing.width/2, Testing.height/2 (actual pixel width not tile width)
this.tileFromPosition(touchPos - mapCenter, // layer...)