How to check if free-shaped image has been clicked?

MGlolenstine

Ok, so I'm trying to make a board game, which is made of small parts like the one below . So, I need vertices, so I can check if the mouse is inside of the image when it's clicked.

Is there any other way I can check if transparent(not 100% transparent, but only parts of it) has been clicked. Without vertices. I wanted vertices because I could check it with raytracing.

quark

Ray tracing is good for 3D but this is a 2D image.

If you have loaded this bitmap (with alpha e.g. png, gif) into a PImage then you can check the transparency at pixel position with

if(image.alpha.get(x,y) == 0){
  // Transparent
}

You can change == 0 to something like < 1 to take some anti-aliasing into account

MGlolenstine

Well the thing is that the playing board is made out of many of those. Now I need to tell them apart... which one was clicked... How would I do that?

prince_polka

Can you send the piece in a transparent file?
And one more piece would be nice.

And if you already have them as polygons, the list of vertices would be nice.

MGlolenstine

Well... I can send you links... And no, I don't have vertices. http://mglolenstine.xyz/map/1.png http://mglolenstine.xyz/map/2.png http://mglolenstine.xyz/map/3.png

prince_polka

thank you

Chrisir

You could make a copy of every tile.

Make each of the tiles in one solid color, each tile has a unique color

Now when you place the tiles simultaneously place the copy on an invisible PGraphics pg (same size as your window)

On mousePressed do a get (mouseX,mouseY) on the pg and use the color you receive to determine the tile (because the color of the copy is unique)

MGlolenstine

Thank you!

Chrisir

Use paint or photoshop for coloring the copies

MGlolenstine

Will GIMP do?

Chrisir

Sure

Chrisir

Probably you can write a sketch in processing for that too

;-)

MGlolenstine

true :D

jeremydouglass

If the original tiles are separate image files and they are transparent then you can also generate the color copies automatically without GIMP.

1. load tile 1
2. for each pixel in tile 1, if not transparent, draw color 1 onto map.
3. repeat for tile 2 / color 2... etc. for each tile

Chrisir

what's the name of the game?

MGlolenstine

Hmm... So I need to rotate and move the invisible image as well as the visible one? They need to cover eachother... right?

Chrisir

That's true exact match of tile and its copy

The trick is the unique color to be Associated with each tile

MGlolenstine

I haven't put much thought in what the game should be called... :D

Chrisir

Did you draw the tile?

MGlolenstine

Ok, yet another question... I don't really understand this part... "On mousePressed do a get (mouseX,mouseY) on the pg and use the color you receive to determine the tile (because the color of the copy is unique)" I do understand everything but how can I check for color? I can't check the color on the visible layer... I can't check color on invisible image, because it has been moved and rotated...

Chrisir

Look at this

https://processing.org/reference/PGraphics.html

place the unique copies on the pg using pg.image(.....

store the colors that you can match them to your tiles

use pg.get(mouseX,mouseY) to get the color

Let's say you have <255 tiles

Then you could work only with gray

MGlolenstine

Wait... so PGraphics is just a secondary "canvas" which isn't rendered?

Chrisir

Yeah - it's invisible

Hence we can use the unique colors but the user doesn't see it

But since all positions are the same as on the visible game board we can look up the colors and from there the tiles (which needs a software link from the int color to the tile ID, so something like an array with the color int as index and the tile ID as content)

MGlolenstine

Thanks! It's working now! How can I tag this thread as solved? Is "Answered" next to the name enough?

Chrisir

Yeah, it's marked as answered already- you can see it in the overview of all discussions

MGlolenstine

Thank you all for help!

Chrisir

Well done!