Alpha Image overlay
Blitz3D Forums/Blitz3D Beginners Area/Alpha Image overlay
| ||
| Im a new convert to Blitz3d from Darkbasic. Firstly, only in the single evening after buying Blitz I've noticed vast improvements (and speed and stability) from Darkbasic. One thing I've been trying to do since I began various tests is to lay an image with an alpha map (created in Photoshop 7) over everything else that's occuring in the window including 3D and bitmapped background texture. I've seen several posts about alpha maps but I'd really like to see the syntax in action. Simply put, all I need to do is replace the mouse cursor with an image of a bubble. This obviously is more opaque near the edge and transparent at the center, with highlited area. What's the best way to approach this kind of problem? Keep in mind again that I'm brand new to the syntax. Thanks in advance for any help. |
| ||
| What's wrong with creating a sprite using your bubble as the texture and using EntityAlpha on it? I suppose this would affect the entire image which isn't what you want though? |
| ||
| Use LoadTexture to load the texture. Look in the help file and you will see that there is a flag to specify that the image has an alpha map with it. Both TGA and PNG supprot alpha maps, though older versions of phootshop sometimes have problems exporting PNG properly. Then create a sprite with createsprite() and change it's size and position with the appropriate sprite commands which will be right there alongside it in the help file. Then use EntityTexture to apply the texture to the sprite entity. Use EntityFX to set the sprite to full bright and no fog. And finally, set EntityOrder ... to a positive value greater than 0 I believe, to make it draw in front of everything else in the scene. |
| ||
| . |
| ||
| I tried to accomplish what DarkLight wanted but I had trouble figuring out the method. Sswift, you stated " Look in the help file and you will see that there is a flag to specify that the image has an alpha map with it. Both TGA and PNG supprot alpha maps". I ususally use PSP4 and I don't see any options in there to create an alpha map for the image (you make it sound like there are TWO images included in one file). How would one go about doing this? |
| ||
| Simple. In photoshop, on the layers palette, down near the bottom there is a little square with a grey background and I beleive, a white circle in the middle. That creates a mask for the current layer. That is one kind of alpha channel. Delete your background layer and you should see whatever it is you're making on a checkered background that represents transparency. Another way that some versions of photoshop have used is if you go to the channels pallete, you can create a new channel down at the bottom by clicking the little sheet of paper. This will automatically be made into an alpha channel. Unfortunately, I can't tell you which one to use, it varies from version to version. There's even a THIRD alpha channel in photoshop which is normally hidden... If you make a new layer, it has no alpha channel, and no alpha mask, yet it is transparent until you draw on a particular area, and if you erase an area, that area becomes transparent. This I think can also be exported... It behaves as a layer mask. If you have an active layer mask I think it overrides this transparency. And the alpha channel is I think an alpha channel for the entire image, but I forget. So just try the first method of making a layer and clicking the alpha mask button. Oh and to edit that mask, you'll see two thumbnails for the layer. Click the left one to edit the colors, and click the right to edit the mask. All transforms will affect only the mask when you have it selected. That includes stuff like blur, and brightness/contrast. |
| ||
| I tried loading some of my PNG's with transparency in PS7, and when I do, I notice that there's no layer mask or alpha channel. So what you might try is simply deleting your background layer and selecting those areas of your image you want transparent and then clearing them. Or if you want more control, make a layer mask as described above, edit that to your liking, and then right click it's thumbnail when you're all set with your pic and select set that to the selection, and then you can clear the stuff you don't want that way. |
| ||
| Oh, and they're not two images. It's just one image with an extra "channel". RGB is 3 channels + A for alpha. Each texture you load in Blitz has those 4 channels, even if you don't use the alpha channel. |
| ||
| Thanks for the help sswift. That DID work. The only problem is that I was hoping to do this in a more 2D manner since I had wanted to eventually make various transparent overlays as well as reliable placement on the screen either in a static or dynamic manner such as replacing the mouse cursor. Any ideas? |
| ||
| Look in the Code Archives/3D - Graphics for Pixies by skidracer. This is a good start for using sprites for 2D overlays. This specific example replaces the mouse cursor with an image. In my experience, using sprites and parenting them to the camera (to simulate a 2D HUD, for example) is much faster than using the 2D commands over the 3D world. |
| ||
| "Any ideas?" Yeah, see that first link in my sig. Swift GUI. It allows you to easily create "2D" overlays in 3D. For exmaple, you could create a GUI_Sprite and then place that at 320x240, and whatever resolution you're in it's top left corner would be in the center of the screen. All coordinates are realtive to 640x480 in the system. The system also allows you to set the order GUI_Objects are drawn in, it supports alpha just like I showed you above with sprites... It will detect for you if the mouse has moved onto or off of any GUI_Object... like a button you make out of a sprite, or a bunch of text. Speaking of text, the system also allows you to do fast fonts that you can have automaitcally wrap. The fonts are single surface meshes with a texture. Much faster than trying to draw with regular 2d fonts in 3D in blitz. And better looking too. And lastly the system supports "data bars" and "data arcs" which are like straight and curved bar graphs that you can use as life bars or speedometers and their length and color can change dpeending on what value you put in. And you speciy the min and max values and the length of the bar or arc. It's not free of course, but it is realtively cheap. |
| ||
| I sorted it out. Thanks sswift for the suggestion but I suppose it was more an intelllectual puzzle than anything else. (wanted to sort out Blitz conventions for myself). By the way, I'm an artist (3d as well) primarily, and am willing to donate aforementioned skills in return for technical knowledge. Feel free to view my previous work through Turbosquid at : http://www.turbosquid.com/HTMLClient/Search/Index.cfm?FuseAction=ProcessSmartSearch&istIncAuthor=DarkLight &blAuthorExact=y&intMediaType=-1&stgBoolean=l&blExternal=TRUE |
| ||
Get your original image. Extract the alpha channel. Save it as a separate image. Then...
original=loadimage("yourimage.bmp")
alpha=loadimage("alphachannel.bmp")
DrawAlphaImage original,0,0,alpha
Function DrawAlphaImage(image,px,py,alphaimage)
; AlphaBlit Function by Simon Harrison (simon@...)
w=ImageWidth(image)
h=ImageHeight(image)
gw=GraphicsWidth()
gh=GraphicsWidth()
; clip
x0=px:y0=py
If x0<0 w=w+x0 x0=0
If y0<0 h=h+y0 y0=0
If x0+w>gw w=gw-x0
If y0+h>gh h=gh-y0
If w<=0 Or h<=0 Return
x1=x0+w-1
y1=y0+h-1
; x0=px:y0=py
; x1=px+w-1
; y1=py+h-1
ibuffer=ImageBuffer(image)
abuffer=ImageBuffer(alphaimage)
gbuffer=GraphicsBuffer()
LockBuffer ibuffer
LockBuffer abuffer
LockBuffer gbuffer
For y=y0 To y1
For x=x0 To x1
alpha=ReadPixelFast(x-px,y-py,abuffer) And 255
If alpha>1
rgb0=ReadPixelFast(x-px,y-py,ibuffer)
rgb1=ReadPixelFast(x,y,gbuffer)
bit=$80
rgb=0
While bit>1
rgb0=(rgb0 Shr 1) And $7f7f7f
rgb1=(rgb1 Shr 1) And $7f7f7f
If (alpha And bit) rgb=rgb+rgb0 Else rgb=rgb+rgb1
bit=bit Shr 1
Wend
WritePixelFast x,y,rgb
EndIf
Next
Next
UnlockBuffer gbuffer
UnlockBuffer ibuffer
UnlockBuffer abuffer
End Function
Since you wanted to do it in a "2D-way", there ya go. Its heavy on the resources so BackBuffer()/Flip and don't use it for moving animated sprites. ;) +BlackD |
   |