How do I find the touched/clicked sprite?

0 favourites
  • 12 posts
From the Asset Store
Game with complete Source-Code (Construct 3 / .c3p) + HTML5 Exported.
  • Hi,

    this image shows a part of my game. Here the yellow stone can be moved to the highlighted green or white fields.

    Unfortunately, if I click the bottom-left part of the green field, a simple Touch condition as shown below selects both fields, and the Move function is called with the parameters of the white field, not the green.

    How can I make sure that the correct field intercepts the touch event?


  • If you select both i.e. they are overlapping sprites, shouldn't it run the function with both? Did you check the logging to see what is being passed through, is it data for both 'fields'? You will be able to force one of them to be picked, just wondering if it's an issue because the sprites are overlapping and if both sets of data are passed through at the moment.

  • I've slightly modified to event sheet to get everything logged properly.

    The logs show that both fields are selected. (There is a Field found message for both ids.) But the "Moving to position" message is called only by the "1st" field. Similarly, my `Move` function is called only once with the "1st" field's data.

    For some reason the image of my modified event sheet did not upload. You can find it here:

  • Ok so because it's an issue with overlapping sprites being touched together, before getting too convoluted on the calculations you could try something like this : as green is the priority sprite, ensure that green is at top of z order on the layer, above white. Then with your on touch Fields condition, you can add new condition to pick fields > is on top. Try this first and see if that accomplishes what you wanted which is to pick the green as a priority when on the borders.

  • this won't work for me unfortunately as there is no priority between to white or green, it was just as an example to show my problem.

    Looking at the whole field I have, I have many overlapping sprites, and there is no priority between them (imagine a chess board with non-square fields).

    Is there a way I can detect the color below the touch point? I could try to figure out from that the sprite that I'm interested in. (I have 6 different colors, I know their RGB codes.)

  • Not sure on the RGB thing but surely there must be a priority of tiles, such as when you click one in the corner, which one are you expecting it to use? In your original post you mentioned that it should be passing through green and not white when the bottom corner of the green is clicked. A simpler fix may be to put in invisible borders that when clicked do nothing so you have to clearly click on a section if that doesn't affect the gameplay too much.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • nagyv

    most likely the touch is making contact with both sprites, so both are picked. What I do in cases like this (since there is no way to know which sprite the user intended to touch) is to add a subevent to Pick the Top instance before you call your function. It doesn't really matter which Field is the top one, you just want to make sure only one is selected.

    I guess the other option would be to check the PickedCount and if it is more than one, tell the user be more careful when choosing a move...

  • There is no priority of tiles. You are free to move to both tiles.

    I've been googleing around to figure out how to read the color from the canvas. As it seems that Construct3 uses webgl2 type canvas, this is to work:

    Unfortunately, it does not.

    I've figured out that Touch.X and Touch.Y will give me the correct positions, but still no luck.

    in the preview console I've been trying the following, but in the end I did not get the expected results:


    var a = $("mycanvas") // I don't know where $ come from, but it's defined :)

    var b = a.getContext("webgl2")

    var pixels = new Uint8Array(4)

    b.readPixels(318, 498, 1, 1, b.RGBA, b.UNSIGNED_BYTE, pixels)


    This should set pixels to the rgba values I need, but it's not set. :(

    Any ideas how to read the color from the canvas?

  • I don't think detecting colour resolves the issue, right? You will be detecting the colour of 2 fields and then would still have to decide which is the correct one for the player.

  • can i ask how your objects are created?

    are they created using the canvas plugin? or are you using sprites? tilemaps?

  • I have the solution. In the sprite editor one can define the sprite's collision position. It seems that the collision field is actually the touchable area too.

  • Yes, the collision box is the same area which will interact with your mouse.

    Ok, wasn't sure how you create objects, the way the image showcased was looking i was thinking you drawing the objects with canvas plugin, at which point the detection would have been a bit awkward.

    Awesome then. Have fun! :D

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)