[luke wallace]

I have a “fake” 2D isometric game, set up like the right side of the below image.

I’m trying to detect which tile a user clicked. Because each tile is its own image, and images must be rectangles, the MouseArea detects clicks on the transparent portions as well, so it will give me the wrong tile. I need some way to figure out if the click is over the non-transparent part of the image. Establishing X/Y boundaries for something like this seems impossible to do manually and hard to do mathematically, hoping I don’t have to go that route. Any ideas?

[luke wallace]

solved with math

 

            MouseArea {
                anchors.fill: parent

                onClicked: {
                    var TILE_WIDTH = 68.525
                    var TILE_HEIGHT = 39.577
                    var TILE_WIDTH_HALF = TILE_WIDTH / 2
                    var TILE_HEIGHT_HALF = TILE_HEIGHT / 2
                    var ORIGIN_X = 240
                    var ORIGIN_Y = 178

                    var screen_x = mouse.x - ORIGIN_X
                    var screen_y = mouse.y - ORIGIN_Y

                    var tile_x = (screen_x / TILE_WIDTH_HALF + screen_y / TILE_HEIGHT_HALF) /2
                    var tile_y = (screen_y / TILE_HEIGHT_HALF -(screen_x / TILE_WIDTH_HALF)) /2

                    var round_tile_x = Math.round(tile_x)
                    var round_tile_y = Math.round(tile_y)

                    console.debug("clicked position:", mouse.x, mouse.y)
                    console.debug("clicked position grid:", round_tile_x, round_tile_y)
                }
            }