Images with Semi-transparency? (StarBlast Game)

[SirCrow]

Is there a relatively simple way to make images have semi-transparency using _LOADIMAGE and/or _PUTIMAGE?  I don't mean areas around an image; I mean actually seeing thru an image.  If it's complicated, I can't do it.  But I'm willing to listen.  Thanks.

BTW, I hope you'll enjoy the latest things I've added to the game, including planetary fly-over, a pesky space ghost, and some nice new scenery.To see where I'd like to have semi-transparent imagery, start a game with F8 and watch the shadows, preferably in Round 2 and above.  The Ghost appears first in Round 3.  Read the help file for more details.

(Sorry, I didn't realise the archive would be so large.)

[SMcNeill]

If it's 32-bit images, just change the alpha level for the image.  ;)

[FellippeHeitor]

If you want all of the image to be semitransparent, use _SETALPHA:

_SETALPHA alphaLevel%, [optional color range], imageHandle&

That will, however, screw with the transparent background an image may contain, as that'll also become semitransparent by the level you specify.

Code: QB64: [Select]

1. file$ = "trashcan.png"
2. SCREEN _NEWIMAGE(800, 600, 32)
3. a& = _LOADIMAGE(file$) 'load it
4.  
5. IF a& = -1 THEN PRINT "Image not found": END
6.  
7. _SETALPHA 100, , a& 'make it semitransparent (100 out of 255)
8.  
9. DO
10.     WHILE _MOUSEINPUT: WEND
11.  
12.     CLS
13.  
14.     'draw something behind it:
15.     FOR i = 1 TO 10
16.         LINE (RND * _WIDTH, RND * _HEIGHT)-STEP(100, 100), _RGB32(RND * 255, 0, RND * 255)
17.     NEXT
18.  
19.     'place the image
20.     _PUTIMAGE (_MOUSEX - _WIDTH(a&) / 2, _MOUSEY - _HEIGHT(a&) / 2), a&
21.  
22.     _DISPLAY
23.     _LIMIT 30
24. LOOP

You can then use _CLEARCOLOR:

Code: QB64: [Select]

1. _CLEARCOLOR _RGBA32(255, 255, 255, 100), a&

The line above added right after _SETALPHA will clear the previously WHITE background that now is at 100 alpha. You'll go according to your imagery.

[johnno56]

I do not mean to be "nit picky", but the request was... "I don't mean areas around an image; I mean actually seeing thru an image."

I too would be interested in knowing if the image could be translucent.

J

[Gets]

That's exactly what they were discussing. Save a 32-bit translucent image in an art program and that translucency will be preserved when loaded in QB64. Setalpha also allows you to dynamically adjust transparency levels; only problem there is that it doesn't work with Hardware accelerated graphics(I think?), in which case just loading a translucent image is the only simple option.

[johnno56]

Ok. I must have mis-understood. My apologies... but I'm still interested... ;)

J

[bplus]

Yes, _CLEARCOLOR really looks interesting, I remember someone asking how to make a background transparent in an image.

[SirCrow]

Is there a relatively simple way to make images have semi-transparency using _LOADIMAGE and/or _PUTIMAGE?

Due to this question, I decided to reopen "The QB64 Edition" in read-only mode so users can still have access to the great content over there.

@SirCrow, you can use _SETALPHA to make images draw in a semi-transparent fashion.

Here is an old demo of mine that uses this command to make a hauntingly-dreamy clock. You can view the code, see a screenshot, and watch the demo in action in YouTube video, all of which are in the post so you don't have to click on things or go offsite. You can see the post at: http://qb64.thejoyfulprogrammer.com/showthread.php?tid=16

Thanks, Walter, and everyone else!  Glad to see there is something that even I can probably handle!
(I only wish I hadn't just wasted time manually blacking out every other column in one of my asteroid shadow images to achieve the translucency.  Didn't like the look of it in the game at all.)

Thanks again.  I'll look into the commands, metas and keywords and get back to you soon!

EDIT:  Just tried it and.....BEAUTIFUL!  Just what the doctor ordered.  My asteroids floating above an alien landscape now have lovely shadows that reveal the ground underneath!  How nice!  Now, what do I do about the ship's shadow?  I made it using DRAW, and I don't see anyway of making that semi-transparent.  Hmm...   In any case, I'm pretty happy with how it is now.  :o)

[johnno56]

I do not know how this is done... But if the ship is drawn than can you not draw the shadow or would it appear too dark? I hope I'm making sense...

J

[SirCrow]

I do not know how this is done... But if the ship is drawn than can you not draw the shadow or would it appear too dark? I hope I'm making sense...

Currently, the ship's shadow is done using DRAW.  Although I've used POINT() to detect the terrain's lightness and adjust the shadow accordingly -- to rather nice effect, I think -- I'd rather it just be translucent like the asteroids' shadows now are.  If there's a way to do it w/ _PUTIMAGE and have it rotate along with the ship, it's likely beyond my skill level.

[SMcNeill]

And a little demo of something similar to Fellippe's demo, but a little more versitile by using _MEMIMAGE...

Code: QB64: [Select]

1. file$ = "trashcan.png"
2. SCREEN _NEWIMAGE(800, 600, 32)
3. b& = _LOADIMAGE(file$) 'load it
4.  
5. IF b& = -1 THEN PRINT "Image not found": END
6.  
7. a& = _COPYIMAGE(b&)
8.  
9.  
10. DO
11.     WHILE _MOUSEINPUT: WEND
12.     IF _MOUSEBUTTON(1) THEN
13.         _FREEIMAGE a&
14.         a& = _COPYIMAGE(b&)
15.         value(changer) = value(changer) + 5: IF value(changer) > 255 THEN value(changer) = 255
16.         AlterIt a&, changer, value(changer)
17.     ELSEIF _MOUSEBUTTON(2) THEN
18.         _FREEIMAGE a&
19.         a& = _COPYIMAGE(b&)
20.         value(changer) = value(changer) - 5: IF value(changer) < 0 THEN value(changer) = 0
21.         AlterIt a&, changer, value(changer)
22.     END IF
23.  
24.  
25.     CLS
26.     k = _KEYHIT
27.     SELECT CASE k
28.         CASE 49 TO 52 '(1-4)
29.             changer = k - 49
30.     END SELECT
31.  
32.  
33.     'draw something behind it:
34.     FOR i = 1 TO 10
35.         LINE (RND * _WIDTH, RND * _HEIGHT)-STEP(100, 100), _RGB32(RND * 255, 0, RND * 255)
36.     NEXT
37.  
38.     'place the image
39.     _PUTIMAGE (_MOUSEX - _WIDTH(a&) / 2, _MOUSEY - _HEIGHT(a&) / 2), a&
40.  
41.     _DISPLAY
42.     _LIMIT 30
43. LOOP
44.  
45.  
46. SUB AlterIt (image, what, newvalue AS _UNSIGNED _BYTE)
47.     '0 = Blue, 1 = Green, 2 = Red, 3 Alpha
48.     STATIC m AS _MEM
49.     m = _MEMIMAGE(image)
50.     x = 0
51.     DO UNTIL x >= m.SIZE
52.         _MEMPUT m, m.OFFSET + x + what, newvalue
53.         x = x + 4
54.     LOOP
55. END SUB

For this, we use the values of 1-4 to specify what we want to screw around with:   Alpha, Red, Green, or Blue values.    Then we use the left and right mouse buttons to alter those values for our image.

If all one wanted was a transparent image, they'd simply change the ALPHA levels only  (to a level of 100, to perfectly duplicate how Felippe's demo worked above).   The main difference here is that we can use AlterIt to also change Red, Green, or Blue levels for the whole image, just as _SETALPHA works to change the Alpha level in the image.   

[FellippeHeitor]

That's neat!

[SirCrow]

First of all, thanks for all the help with code samples and such.

Secondly, I hate that the archive is so large, due mainly to all the BG images;  sorry 'bout that.

There are a few nice improvements to the game, but mainly I'm posting because I need more help with transparency.  I can't figure out why my SHIP's shadow is just black and not at all transparent.  Please have a look and find the image handle Ship_Shade& in lines such as _SETALPHA 120, , Ship_Shade&.  The shadow is drawn onto that 49 x 49 image.  Thanks very much!
J

[johnno56]

I do not profess to know QB64 well so please do not laugh at my suggestions...

I looked at you code and you are drawing the ship's shadow 'on the fly' (no pun intended). So, I have to assume that, if you change the colour of the shadow then THAT colour, no mater where it exists on the screen, will be changed as well. Would that be a fair assumption?

You have, as far as "I" can see, one of three options. 1. No shadow or 2. Use a "unique" colour for the shadow or 3. Create a 49x49 semi transparent shadow sprite and pre load it at startup.

I am not familiar with QB's draw commands. Otherwise I would recreate it using Gimp and modify the alpha of the sprite.

When I mentioned 'unique' I did not mean that if the shadow colour is _rgb32(0,0,0) then change it to _rgb32(1,1,1). Perhaps start with a dark gray _rgb32(32,32,32). (poor example as you use random 'grey') But you get what I mean, right?

Also another thing in regards to colour... You have setup your program screen as 32 bit, yet the ONLY references to RGB32 exist on lines 487 and 517 (grey) and all others are RGB

I experimented on the Asteroids shadows. Firstly, although your screen is 32 bit, all but one of the Asteroid shadows colour mode was 'indexed' and not RGB. Copied all Asteroid shadows. Modified all of them to a mode of RBG and reduced their opacity to 70%. Ran the program. Bingo! translucent shadows! Square shaped. But translucent none the less. I cannot explain why the shadow is a square. I will attempt to attach the asteroids. Obviously use them to test a proof of concept... lol  unless you want to use square asteroids... lol

I hope I'm making sense... It's 0840 and I haven't had my coffee yet...

J

ps: Threw together a crude ship shadow from a screen capture. It's set to 70% opacity...

[johnno56]

After using the new shadow images and commenting out the SETALPHA's and the CLEARCOLOR's for the Asteroids, all of the asteroid shadows, presented normally. Correct shape with 70% opacity.... COOL!! (Because it's a game, I will not get into the several reasons as to why all of the asteroids should crash and burn... lol)  Now for the ship...