A Polygon shape for a button

[ebi1]

Hi all.,

I want to make a small and simple game for kids, where they need to compare between different shapes of polygons.
So in this game, there will be a button, loading different Polygons, with transparent background.
i REALLY preffer it will be with the Animated GIF of RxLib, because it's very easy to work with, and sometimes i do need small animations.

I want the button's shape to be exactly like the polygon's shape, so the button will not have the transparent part of the glyph.

How can i make a button look exactly like the polygon glyph i have?

I dont mind if it will be a TBitBtn or a TButton with RxLib's Animated GIF component.

sorry for my broken english, and MANY MANY thanks for your kind help

[Duoas]

If you are going to be using buttons with pixel images (like a GIF) you will need to do pixel-hit testing yourself.

Use the OnMouseDown event's X and Y values (which are relative to the button) to index a pixel in the image. Check that pixel's color against the transparent color to see if the user has clicked outside or inside the button's image.

Hope this helps.

[ebi1]

thanks for the reply Duoas

i'm not a programer, Delphi is just a small hobby of mine.
i dont know nothing about "pixel-hit".
i just want the button with an image on it, to be in the exact shpe of the polygon image.
and i need the button to do the job of fitting the polygon.

if that is what you were talking about, can you give me a good example code plase?

thanks again

[Duoas]

Take a look in the documentation for the TCanvas.Pixels property. (Your button has a canvas). Also look at the OnMouseDown event.

[ebi1]

but i dont need the OnMouseDown event.
i need the button to get the polygon's shape before we click it
thanks

[Duoas]

I think I understand. You want the actual button itself to have the same shape as the polygon?

You'll have to create a region and assign it to your button.
See the MS Regions documentation.
It isn't particularly hard or even complex, but the trick is knowing how to create the region to begin with.

A GIF or other image is a raster-format: a bunch of lines of pixels.
A region is a vector-format: a list of points that connect lines.

So the trick will be knowing what list of points to use to create the region for each image. You will probably have to spend some time with an image editor to draw lines as an outline around your image and take note of the pixel coordinates of each end of a line. Don't save the changes to the image, but take that list of points and use it to create the regions for each button.

Sorry there isn't a simpler way to do this. The only two options are to have a square button that ignores clicks outside a specific area, or to reshape the button with a region.

Hmm, of course, you could just forget the buttons and use a TPaintBox on the form. Draw all your 'buttons' in the paint box, and when the user gives an OnMouseDown on the form decide whether or not the X,Y coordinate is in any one of the 'buttons' you drew. That's the third way.

Yoinks!

[ebi1]

Thanks for your time and reply Duoas.

I know about raster and vector graphics, and you'r right, that's exactly what i ment.
But isn't there a way to make the program "see" only a part of the button?

Let's say, if we tell the program(or component) to "see" everything that has a different color then pixel(0,0) - the transparent color?
Maybe even scan the image and set the region pixel by pixel, so we will have a long list of vectorial "lines".

thanks again

[Duoas]

> Maybe even scan the image and set the region pixel by pixel, so we will have a long list of vectorial "lines".
That is actually non-trivial to implement. But there do exist algorithms to do it. I have never had the need (or desire) to try it, so I can't really point you anywhere useful other than Google. (Sorry.)

For simple bitmapped buttons, I will often just use a TImage and the transparent color of the bitmap. If hit-testing is required, the OnMouseDown event can be used to see whether pixel[ X, Y ] is the transparent color or not. That really is the simplest way to do it.

Good luck! :)

[ebi1]

WOW
i'm SO sorry for not returning to this post for almost a YEAR...
i totaly forgot about it...

Duoas, your last comment is PERFECT for what i need.
i really forgot about the transparent thing in the TImage.

MANY thanks for your help
(and sorry again for not closing this post)