Tour Preview

Find the Best Demos and Examples

Check out this quick tour to find the best demos and examples for you, and to see how the Felgo SDK can help you to develop your next app or game!

Forums

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #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

    #21909

    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.