Selecting transparent icons

Blitz3D Forums/Blitz3D Beginners Area/Selecting transparent icons

Ambicatos(Posted 2006) [#1]
I am working on a game that has some RTS elements. What I want to do is make it so that everytime you create a unit, an icon representing that unit pops up at the bottom of the screen, and you can then select units by clicking or clicking-and-dragging on the icons. Also I would like the icons to be semi-transparent. What is the best way to do this? Is it even possible? Currently the icons are a field in the unit's type, and are created using copyimage. However, I'm not sure whether there is a way to adjust the alpha level of an image. Or to select an image. Maybe I should use sprites instead? Thanks for any help!


Ross C(Posted 2006) [#2]
You can't really, speedly, make images semi-transparent. What you can do, as a trick, is create a checkered pattern of the masked colour across it. From a distance, it will look transparent. Works well at 1024x768 :o)


n8r2k(Posted 2006) [#3]
I am glad someone out there thinks like me, that exactly how i make things appear transparent, works great, takes forever to draw the little pixels though, esp on big pics.


Ross C(Posted 2006) [#4]
You don't really need to draw the pixels. The graphics card should have no speed issues, with masked images :o)


Ambicatos(Posted 2006) [#5]
OK, thanks for the help. Now how do I select the icons? I've been thinking about it, maybe something like this? Assigning four more fields to the unit type that contain the co-ordinates of each icon, then something like:

For u.unit = Each unit
If MouseHit(2) > 0
mx = MouseX()
my = MouseY()
If mx > u\icon_left And mx < u\icon_right And my > u\icon_bottom And my < icon_top
u\picked = True
End If
End If
Next

Or is there a better way to do it?


Rob Farley(Posted 2006) [#6]
rectsoverlap


Ambicatos(Posted 2006) [#7]
Hi again everyone. I have tried implementing the advice you gave me. The checker pattern works pretty nice, even though I can see the checks if I look closely. I made a small checker pattern in Paint, then copied and pasted it repeatedly to get a larger checker pattern. Then I did a masked paste over my icon bmp. So that's that I guess - too bad there's no way to adjust the alpha level of an image.

Anyway, I tried using rectoverlap for selecting the icons, but I am not quite sure how to do it. Could someone give me some more details on this please? (Currently I am using the rectangle picking from the code archives to select on-screen units as opposed to unit icons). Thanks!


Ross C(Posted 2006) [#8]
Well, rectsoverlap, simply check if the two areas you give, overlap in anyway. so:


If RectsOverlap MouseX(), MouseY(), 1, 1,   image_loc_x,  image_loc_y, imagewidth,imageheight then

  ; the cursor is overlapping the image

End If



Like that. You only really want to check the very tip of the cursor, that's why the area area is only 1 x 1. The second area is the actual image/icon, you wish to check. Again, x,y location followed by the width and height of the image.

A small demo: This will create three images, stored using types, and check the cursor against the images areas, if the mouse button is pressed, and delete the images.

Graphics 800,600
SetBuffer BackBuffer()



Type icon
	Field image
	Field x#,y#
End Type

i.icon = New icon
i\image = CreateImage(100,100)
i\x = 10
i\y = 20
SetBuffer ImageBuffer(i\image)
Color 100,250,100
Rect 0,0, ImageWidth(i\image), ImageHeight(i\image)

i.icon = New icon
i\image = CreateImage(10,200)
i\x = 100
i\y = 20
SetBuffer ImageBuffer(i\image)
Color 200,100,10
Rect 0,0, ImageWidth(i\image), ImageHeight(i\image)

i.icon = New icon
i\image = CreateImage(300,200)
i\x = 300
i\y = 200
SetBuffer ImageBuffer(i\image)
Color 10,10,200
Rect 0,0, ImageWidth(i\image), ImageHeight(i\image)


SetBuffer BackBuffer()

While Not KeyHit(1)

	Cls
	
	If MouseHit(1)
		For i.icon = Each icon
			If RectsOverlap( MouseX(), MouseY(), 1, 1,  i\x,i\y, ImageWidth(i\image), ImageHeight(i\image)) Then
				FreeImage i\image
				Delete i.icon
			End If
		Next
	End If
	
	
	For i.icon = Each icon
		DrawImage i\image,i\x,i\y
	Next
	
	Flip
	
Wend
End



mindstorms(Posted 2006) [#9]
that's neat....How do you make it so it works in 3d mode? Would you have to somehow convert the y to z or is there a way to get were the images are drawn to the screen?


big10p(Posted 2006) [#10]
Crikey, if you're doing this in a 3D mode, don't bother with messing with that checker pattern malarkey to simulate alpha transparency, use the real thing.

Make your icons out of sprites and set their transparency with EntityAlpha.


Ross C(Posted 2006) [#11]
Funnily enough, i'm working on something to make 3d quads, hold the same co-ords, as 2d images, so, you merely check the area x,y,width,height on the screen, against the cursors co-ords.

What i did was... Parented a pivot to the top left of the screen. This acts as the origin. Then, anything that's created, parent it to this point, and scale it by a certain factor. Once scaled, you move it like you would a 2d image, and you can check 2d co-ords against it. I use rectsoverlap, but i don't see why you couldn't load the texture in as a sprite, and as an image and do pixel perfect checking.


Here's what i have so far. Everything except the text in the top left, is 3d. This uses single surface quads.

www.rosscrooks.pwp.blueyonder.co.uk/editor1.zip

Mouse button left DRAG = move objects along the X and Z axis
Mouse button middle DRAG = move camera
Mouse button right DRAG = move objects along the Y axis

Click the icons to change their status. I have made the single surface the quads use, pickable, only so the editor doesn't think nothing was selected and de-selects an item.


mindstorms(Posted 2006) [#12]
Ross C: That really neat! Thanks a lot! After reading through the code I think I get how to do it. It might come in usefull someday.


Ambicatos(Posted 2006) [#13]
Wow, thanks a lot! I have now been able to use rectsoverlap() for selecting icons both with single-click and click-and-drag. Problem solved!

PS I am responding to the large post with the code samples. It looks like there have been some posts since then ...


Ambicatos(Posted 2006) [#14]
Wait a second, big10p, should I just be using sprites instead? My game is 3d. And if so, should I use your editor, Ross C, or is that more intended to make 3d quads resemble 2d images and maybe not the fastest way to make sprite icons? I'm just asking, I don't know. Maybe I should make sprites and parent them to the camera and use camerapick() to single-click select them and use rectsoverlap to click-and-drag select them (with its x-position on screen minus half its width for its first co-ordinate)?


Baystep Productions(Posted 2006) [#15]
Sprite HUDS are good for effect like transparency. Plus you can do some hue fun with EntityColor I believe. But remeber that 2D overlays 3D so your whole hud with the bar and everything would have to be on sprites.

There is a code archives entry for updateing a 3d HUD sprite with 2D functions.

But wither way you MAY get a quality issue and sizing problems with it being so close.


Ross C(Posted 2006) [#16]
Ambicatos, that file i posted, for the editor. It's a 3d world editor, well the beginning of one. It's not for creating sprites or anything :o) Basically, it uses rectsoverlap for checking if you have clicked on anything, because...

The quads are scaled in such a way, that, they are positioned on screen, with co-ords that are exactly similar to 2d on-screen positions. So, all you need is the x,y co-ord of the quad in 3d, the height and width and your sorted. No need to use entitypickmode or that.

I only use this, because i am selecting meshes for movement and that. Mainly look at the buttons.bb. The only reason a make the mesh the GUI uses, is so when you click on an icon, the editor doesn't think you have selected something behind the icons.


mindstorms(Posted 2006) [#17]
Ross C, why don't you replace the plane with a simple variable, or is their a specific reason to need a plane?