Create Bitmap and make it 50% Transparent on the fly

Author

Message

JackDawson

15

Years of Service

User Offline

Joined: 12th Jul 2011

Location:

Posted: 21st Aug 2012 23:31 Edited at: 21st Aug 2012 23:32

Link

Ok, I been wracking my brain on this and I am just stumped. I am just not seeing how to do this.

+ Code Snippet

sync on
sync rate 60
sync
create bitmap 1,640,480
cls rgb(10,10,10)
sync
get image 1,0,0,640,480,2


SET CURRENT BITMAP 0

set display mode 800,600, 32

BACKDROP ON
color backdrop rgb(150,150,150)
INK RGB(0,255,255)

do
PASTE IMAGE 1,2,2
text 10,10, "Testing"
sync
loop

The first problem I have here is the Image won't paste because it says it doesn't exist.

The other problem is even if I could get the image to show up, how in the world can I alter this code to make the image 50% transparent. I want to see whats going on behind the image while I have text over it.

Bottom line, I am trying to create the Bitmap in an almost black color and then I need to convert to it so that its semi-transparent. Then I need to save and paste it.

Any of this making sense ? Man I am tired.

TorakTu - The Object Designer and SpaceGame
http://toraktu.com

Back to top

Profile PM

miso

16

Years of Service

User Offline

Joined: 16th Jun 2010

Location: Budapest, Hungary, 127.0.0.1

Posted: 21st Aug 2012 23:52

Link

Thats not a complete solution, i just noticed, that this is bigger by 1 pixel in all axis:

get image 1,0,0,640,480,2

should be

get image 1,0,0,639,479,2

No place like 127.0.0.1 .

Back to top

Profile PM

BatVink

Moderator

23

Years of Service

User Offline

Joined: 4th Apr 2003

Location: Gods own County, UK

Posted: 22nd Aug 2012 01:07

Link

First you need a bitmap that is transparent, by doing this before you create the bitmap:

SET BITMAP FORMAT 21

To make a semi-transparent image that you can save, you can use SET ALPHA from IanM's Matrix1 utils. This lets you add the alpha channel data (e.g 128 for 50% transparency).

Finally, save the image as a PNG file to preserve the transparency.

An alternative method if you don't want to use IanMs utils (although this makes you crazy by default) is to load the image into a memblock, and manually wade through the data to set the alpha channel, then make an image from it again.

Back to top

Profile PM Email

James H

19

Years of Service

User Offline

Joined: 21st Apr 2007

Location: St Helens

Posted: 22nd Aug 2012 01:14 Edited at: 22nd Aug 2012 01:16

Link

Quote: "The first problem I have here is the Image won't paste because it says it doesn't exist."

..because your removing it from memory by setting display mode after creating your image

use sprites instead, images transparency color has no alpha value when using colorkey command as an alpha map is generated from the command

use set sprite(transparency must be on for alpha transparency) then use set sprite alpha

grab any images you want and save, then load them as bitmaps if you still require it but afaik bitmaps and images dont have ability to be 50% transparent(maybe Im wrong but I dont see a way as set image colorkey is rgb only), text does though by using this function with ink command(from forums by someone, somewhere);

+ Code Snippet

function argb(r, g, b, a)
    col = a<<24 || r<<16 || g<<8 || b
endfunction col

EDIT nvm, I am wrong

Back to top

Profile PM

Rudolpho

20

Years of Service

User Offline

Joined: 28th Dec 2005

Location: Sweden

Posted: 22nd Aug 2012 02:45

Link

Quote: "An alternative method if you don't want to use IanMs utils (although this makes you crazy by default) is to load the image into a memblock, and manually wade through the data to set the alpha channel, then make an image from it again."

+ Code Snippet

function CreateImage(width as dword, height as dword, colour as dword, img as dword, mem as byte)
    // img = desired image ID (should not be in use)
    // mem = unused memblock ID (will be used temporarily)
    make memblock mem, (width * height * 4) + 12
    // Write Image Memblock header
    write memblock dword mem, 0, width
    write memblock dword mem, 4, height
    write memblock dword mem, 8, 32 // Bit depth
    
    // Write pixels
    for x = 0 to width - 1
        for y = 0 to height - 1
            write memblock dword mem, 12 + (((y * width) + x) * 4), colour
        next y
    next x
    
    // Create our image
    make image from memblock img, mem
    // Delete temporary memblock (we don't need it any longer now that our image has been created)
    delete memblock mem
endfunction img

Just because

James H's argb function (although it should probably be named rgba seeing to its parameter ordering

) will likely work. It is possible that a and b will have to be inverted, but I think DBPro uses ARGB ordering (as you have there) rather than RGBA.
If you just need a hardcoded colour they're easily written in hexadecimal notation; two digits per channel: colour = 0xaarrggbb.
Note that these values include alpha and will need to have that set, otherwise it defaults to zero yielding a completely transparent colour.

"Why do programmers get Halloween and Christmas mixed up?"

+ Code Snippet

Because Oct(31) = Dec(25)

Back to top

Profile PM Email Website

JackDawson

15

Years of Service

User Offline

Joined: 12th Jul 2011

Location:

Posted: 22nd Aug 2012 04:21 Edited at: 22nd Aug 2012 04:46

Link

First off, thank you all for your help.

OK, I put all your suggestions to use here. Sadly though, it doesn't quit work correctly yet. The picture here shows you that the black box is hidden behind the other box. The grey box is supposed to be transparent by about 50 percent, roughly. But as you can see, the top half of the black box is totally being covered.

Also, SET ALPHA didn't work for me. Kept saying it didn't understand the command. And I do have all the Matrix1 DLLs installed and up to date.

By the way Rudolpho, this was correct ( colour = 0xaarrggbb ) and that function is amazing. Great work on that.

Anyhow, Any other ideas ?

global imgN as integer

sync on
sync rate 60
sync
set display mode 800,600, 32
BACKDROP ON
color backdrop rgb(150,150,150)
SET BITMAP FORMAT 21

//SET ALPHA 7F,127

// colour = 0xaarrggbb ( Black Square )
colour = 0xFF010101
imgN = 1
CreateImage(100,100,colour,imgN,1)

// colour = 0xaarrggbb  ( Light Grey Square - 7F Hex is 127 Decimal which is 50% transparency. )
colour = 0x7FDDDDDD
imgN = 2

CreateImage(500,200,colour,imgN,1)

INK RGB(0,255,255)

do
imgN = 1
PASTE IMAGE imgN,100,150,0
imgN = 2
PASTE IMAGE imgN,2,2,0
text 10,10, "Testing"
sync
loop
end

function CreateImage(width as dword, height as dword, colour as dword, img as dword, mem as byte)
    // img = desired image ID (should not be in use)
    // mem = unused memblock ID (will be used temporarily)
    make memblock mem, (width * height * 4) + 12
    // Write Image Memblock header
    write memblock dword mem, 0, width
    write memblock dword mem, 4, height
    write memblock dword mem, 8, 32 // Bit depth
    
    // Write pixels
    for x = 0 to width - 1
        for y = 0 to height - 1
            write memblock dword mem, 12 + (((y * width) + x) * 4), colour
        next y
    next x
    
    // Create our image
    make image from memblock img, mem
    // Delete temporary memblock (we don't need it any longer now that our image has been created)
    delete memblock mem
endfunction img

+ Code Snippet

global imgN as integer

sync on
sync rate 60
sync
set display mode 800,600, 32
BACKDROP ON
color backdrop rgb(150,150,150)
SET BITMAP FORMAT 21

//SET ALPHA 7F,127

// colour = 0xaarrggbb ( Black Square )
colour = 0xFF010101
imgN = 1
CreateImage(100,100,colour,imgN,1)

// colour = 0xaarrggbb  ( Light Grey Square - 7F Hex is 127 Decimal which is 50% transparency. )
colour = 0x7FDDDDDD
imgN = 2

CreateImage(500,200,colour,imgN,1)

INK RGB(0,255,255)

do
imgN = 1
PASTE IMAGE imgN,100,150,0
imgN = 2
PASTE IMAGE imgN,2,2,0
text 10,10, "Testing"
sync
loop
end

function CreateImage(width as dword, height as dword, colour as dword, img as dword, mem as byte)
    // img = desired image ID (should not be in use)
    // mem = unused memblock ID (will be used temporarily)
    make memblock mem, (width * height * 4) + 12
    // Write Image Memblock header
    write memblock dword mem, 0, width
    write memblock dword mem, 4, height
    write memblock dword mem, 8, 32 // Bit depth
    
    // Write pixels
    for x = 0 to width - 1
        for y = 0 to height - 1
            write memblock dword mem, 12 + (((y * width) + x) * 4), colour
        next y
    next x
    
    // Create our image
    make image from memblock img, mem
    // Delete temporary memblock (we don't need it any longer now that our image has been created)
    delete memblock mem
endfunction img

TorakTu - The Object Designer and SpaceGame
http://toraktu.com

Back to top

Profile PM

BatVink

Moderator

23

Years of Service

User Offline

Joined: 4th Apr 2003

Location: Gods own County, UK

Posted: 22nd Aug 2012 12:03

Link

Quote: "Also, SET ALPHA didn't work for me. Kept saying it didn't understand the command"

You need to assign it to a variable...

global myColour as DWORD
myColour = SET ALPHA(7F,127)

In a memblock, the bytes are in format BGRA

Back to top

Profile PM Email

JackDawson

15

Years of Service

User Offline

Joined: 12th Jul 2011

Location:

Posted: 22nd Aug 2012 12:39 Edited at: 22nd Aug 2012 12:44

Link

Ok, I am trying a combination of how to get SET ALPHA to work. Nothing works. :-|

I also took out that extra 7F in the RGB. It changed everything when I reversed the order. But still wasn't transparent. So I just don't understand the concept of how this works I guess.

Can you show me an example of how to use it ? I am trying to use it with that CreateImage Function that Rudolpho has up there. So far I'm having no luck here.

global imgN as integer
global myColour as DWORD

sync on
sync rate 60
sync
set display mode 800,600, 32
BACKDROP ON
color backdrop rgb(150,150,150)
SET BITMAP FORMAT 21

myColour = SET ALPHA(127,127)

colour = 0x010101
imgN = 1
CreateImage(100,100,colour,imgN,1)

colour = 0xDDDDDD
imgN = 2

CreateImage(500,200,myColour,imgN,1)

INK RGB(0,255,255)

do
imgN = 1
PASTE IMAGE imgN,100,150,0
imgN = 2
PASTE IMAGE imgN,2,2,0
text 10,10, "Testing " + str$(myColour) + " " + str$(colour)
sync
loop
end

function CreateImage(width as dword, height as dword, colour as dword, img as dword, mem as byte)
    // img = desired image ID (should not be in use)
    // mem = unused memblock ID (will be used temporarily)
    make memblock mem, (width * height * 4) + 12
    // Write Image Memblock header
    write memblock dword mem, 0, width
    write memblock dword mem, 4, height
    write memblock dword mem, 8, 32 // Bit depth
    
    // Write pixels
    for x = 0 to width - 1
        for y = 0 to height - 1
            write memblock dword mem, 12 + (((y * width) + x) * 4), colour
        next y
    next x
    
    // Create our image
    make image from memblock img, mem
    // Delete temporary memblock (we don't need it any longer now that our image has been created)
    delete memblock mem
endfunction img

+ Code Snippet

global imgN as integer
global myColour as DWORD

sync on
sync rate 60
sync
set display mode 800,600, 32
BACKDROP ON
color backdrop rgb(150,150,150)
SET BITMAP FORMAT 21

myColour = SET ALPHA(127,127)

colour = 0x010101
imgN = 1
CreateImage(100,100,colour,imgN,1)

colour = 0xDDDDDD
imgN = 2

CreateImage(500,200,myColour,imgN,1)

INK RGB(0,255,255)

do
imgN = 1
PASTE IMAGE imgN,100,150,0
imgN = 2
PASTE IMAGE imgN,2,2,0
text 10,10, "Testing " + str$(myColour) + " " + str$(colour)
sync
loop
end

function CreateImage(width as dword, height as dword, colour as dword, img as dword, mem as byte)
    // img = desired image ID (should not be in use)
    // mem = unused memblock ID (will be used temporarily)
    make memblock mem, (width * height * 4) + 12
    // Write Image Memblock header
    write memblock dword mem, 0, width
    write memblock dword mem, 4, height
    write memblock dword mem, 8, 32 // Bit depth
    
    // Write pixels
    for x = 0 to width - 1
        for y = 0 to height - 1
            write memblock dword mem, 12 + (((y * width) + x) * 4), colour
        next y
    next x
    
    // Create our image
    make image from memblock img, mem
    // Delete temporary memblock (we don't need it any longer now that our image has been created)
    delete memblock mem
endfunction img

TorakTu - The Object Designer and SpaceGame
http://toraktu.com

Back to top

Profile PM

WLGfx

18

Years of Service

User Offline

Joined: 1st Nov 2007

Location: NW United Kingdom

Posted: 22nd Aug 2012 12:54

Link

When you're passing "colour" to the CreateImage functions use 0x7fRRGGBB... The 7f will set the alpha on the pixels.

Mental arithmetic? Me? (That's for computers) I can't subtract a fart from a plate of beans!
Warning! May contain Nuts!

Back to top

Profile PM Email Website

JackDawson

15

Years of Service

User Offline

Joined: 12th Jul 2011

Location:

Posted: 22nd Aug 2012 12:57 Edited at: 22nd Aug 2012 13:23

Link

Thank you WGLfx. Yea I thought it was 0xaarrggbb as Rudolpho had suggested in the first place. I'll try again.

EDIT UPDATE :
WGLfx, YOU sir are a God !

To everyone, thank you all for your help. This is the end working result.

SET BITMAP FORMAT 21

global imgN as integer
global colour as DWORD

sync on
sync rate 60
sync
set display mode 800,600, 32
BACKDROP ON
color backdrop rgb(150,150,150)

//Set the bottom Box colour here.
colour = 0x020202
imgN = 1
CreateImage(100,100,colour,imgN,1)

//Set the top transparent Box colour here.
colour = 0xDDDDDD
imgN = 2

CreateImage(500,200,colour,imgN,1)

INK RGB(0,255,255)

do
imgN = 1
PASTE IMAGE imgN,100,150,0
imgN = 2
PASTE IMAGE imgN,2,2,1
text 10,10, "Testing " + str$(colour)
sync
loop
end

function CreateImage(width as dword, height as dword, colour as dword, img as dword, mem as byte)
    // img = desired image ID (should not be in use)
    // mem = unused memblock ID (will be used temporarily)
    make memblock mem, (width * height * 4) + 12
    // Write Image Memblock header
    write memblock dword mem, 0, width
    write memblock dword mem, 4, height
    write memblock dword mem, 8, 32 // Bit depth
    
    // masks out the old alpha channel and sets the new alpha channel
    colour = ( colour AND 0xffffff ) OR 0x7f000000
    
    // Write pixels
    for x = 0 to width - 1
        for y = 0 to height - 1
            write memblock dword mem, 12 + (((y * width) + x) * 4), colour
        next y
    next x
    
    // Create our image
    make image from memblock img, mem
    // Delete temporary memblock (we don't need it any longer now that our image has been created)
    delete memblock mem
endfunction img

+ Code Snippet

SET BITMAP FORMAT 21

global imgN as integer
global colour as DWORD

sync on
sync rate 60
sync
set display mode 800,600, 32
BACKDROP ON
color backdrop rgb(150,150,150)

//Set the bottom Box colour here.
colour = 0x020202
imgN = 1
CreateImage(100,100,colour,imgN,1)

//Set the top transparent Box colour here.
colour = 0xDDDDDD
imgN = 2

CreateImage(500,200,colour,imgN,1)

INK RGB(0,255,255)

do
imgN = 1
PASTE IMAGE imgN,100,150,0
imgN = 2
PASTE IMAGE imgN,2,2,1
text 10,10, "Testing " + str$(colour)
sync
loop
end

function CreateImage(width as dword, height as dword, colour as dword, img as dword, mem as byte)
    // img = desired image ID (should not be in use)
    // mem = unused memblock ID (will be used temporarily)
    make memblock mem, (width * height * 4) + 12
    // Write Image Memblock header
    write memblock dword mem, 0, width
    write memblock dword mem, 4, height
    write memblock dword mem, 8, 32 // Bit depth
    
    // masks out the old alpha channel and sets the new alpha channel
    colour = ( colour AND 0xffffff ) OR 0x7f000000
    
    // Write pixels
    for x = 0 to width - 1
        for y = 0 to height - 1
            write memblock dword mem, 12 + (((y * width) + x) * 4), colour
        next y
    next x
    
    // Create our image
    make image from memblock img, mem
    // Delete temporary memblock (we don't need it any longer now that our image has been created)
    delete memblock mem
endfunction img

TorakTu - The Object Designer and SpaceGame
http://toraktu.com

Back to top

Profile PM

spooky

23

Years of Service

User Offline

Joined: 30th Aug 2002

Location: United Kingdom

Posted: 22nd Aug 2012 13:46

Link

Another way using simple commands is:

+ Code Snippet

sync on : sync rate 60
set bitmap format 21

create bitmap 1,640,480
col as dword

a=0
col = rgb(255,0,0) + (16777216*a)
box 0,0,256,256,col,col,col,col
get image 1,0,0,256,256,2

a=200
col = rgb(0,255,0) + (16777216*a)
box 0,0,256,256,col,col,col,col
get image 2,0,0,256,256,2

a=127
col = rgb(0,0,255) + (16777216*a)
box 0,0,256,256,col,col,col,col
get image 3,0,0,256,256,2

set current bitmap 0
delete bitmap 1

ink rgb(255,255,255),0

do
   cls rgb(255,255,255)
   paste image 1,0,0,1
   paste image 2,100,100,1
   paste image 3,200,200,1
   text 0,0,"HELLO"
   sync
loop

basically the set bitmap format command only works on bitmaps created AFTER the command, so will not work on default bitmap 0, so you have to create one first.

Then you can use the box commmand and paste in fudged colour values that have a transparency value embedded with a homemade rgba command.

Boo!

Back to top

Profile PM Website

JackDawson

15

Years of Service

User Offline

Joined: 12th Jul 2011

Location:

Posted: 22nd Aug 2012 14:25

Link

That is flawless. Very cool. Thank you Spooky !!!

TorakTu - The Object Designer and SpaceGame
http://toraktu.com

Back to top

Profile PM

WLGfx

18

Years of Service

User Offline

Joined: 1st Nov 2007

Location: NW United Kingdom

Posted: 22nd Aug 2012 14:36

Link

Either way, using an image you can use a transparent texture for aesthetically pleasing visuals. And you can select areas where you do not want transparency, ie the borders.

Mental arithmetic? Me? (That's for computers) I can't subtract a fart from a plate of beans!
Warning! May contain Nuts!

Back to top

Profile PM Email Website

BatVink

Moderator

23

Years of Service

User Offline

Joined: 4th Apr 2003

Location: Gods own County, UK

Posted: 22nd Aug 2012 15:15

Link

Quote: "And you can select areas where you do not want transparency, ie the borders
"

I wrote two tutorials many years ago that animate transitions using image memblocks and masks. They are worth reading to understand image memblocks, and to get really nifty with your transparency if you want to (they don't have to be animated)

http://www.thegamecreators.com/pages/newsletters/newsletter_issue_32.html#9

http://www.thegamecreators.com/pages/newsletters/newsletter_issue_33.html#12

and here's the competition that ran with it...

http://forum.thegamecreators.com/?m=forum_view&t=61126&b=1

Back to top

Profile PM Email

JackDawson

15

Years of Service

User Offline

Joined: 12th Jul 2011

Location:

Posted: 22nd Aug 2012 20:20

Link

That is brilliant. Thank you for sharing this batvink.

TorakTu - The Object Designer and SpaceGame
http://toraktu.com

Back to top

Profile PM

Sorry your browser is not supported!

DarkBASIC Professional Discussion / Create Bitmap and make it 50% Transparent on the fly