Learn what Felgo offers to help your business succeed. Start your free evaluation today! Felgo for Your Business


OverviewFelgo 3 Support (Qt 5) › Detecting if mouse is over non-transparent part of an image?

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #21908

    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?

    Image result for isometric game


    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)


Viewing 2 posts - 1 through 2 (of 2 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded