Hi all!
I try to put a PNG-picture on the screen, but want the ie. "red" color to become transparent. The following code shows the picture, but without transparent color:
pic=png_load("065A.png");
put (0,pic,50,50);
I drew the picture (black figure on red background) on mtpaint with a palette of 8 colors and saved with "transparent index". My WIZ recognizes the transparent color automatically for instance as icon.
I found the topic "color transparente" in the spanish forum, but I am neither familiar with the spanish language nor I have much knowledge with graphics (palette, rgb, 8/16/32-bit, ...).
TIA
deetee
If you want to replace the transparent color to red, you need to replace the transparent (0,0,0) with red after display picture.
If you aren't on 32 bits color mode, transparent colour is always color 0 (number 0 on your palette if 256 colours, or pure black on 16bits mode, RGB=(0,0,0)).
On 32 bits mode, you have alpha channel, so you can use any colour, but if you don't want to get a collision, you must use pure black colour instead (RGBA=(0,0,0,0)).
If you use FPGEdit, it will get your alpha channel on 16 bits FPG and put it transparent if alpha is under 50%, but it will round your values, so be carefull not to use RGB(0,0,1) as non-transparent black, use RGB(0,0,5).
And not, you can't define the transparent colour.
if your image is a png 8 bits color file you only need the color red in the fist position of your palette with an image manipulator program like GIMP or Photoshop. It's do that BennuGD uses ,indirectly, the index 0 like transparent color.
Wow - thanks for this fast reply.
If I understand you right - I should redraw my picture with 16 bit (65536 colors), use the color with the index 0 as transparent color and save it with transparent=0.
By the way - the code from my last mail doesn't work on my WIZ (no picture was shown) - I guess it is the missing path to the PNG. What is the right solution? - "../065A.png" doesn't work either.
Regards
deetee
depend of your directory tree and the information of your run script. Can you put this information here?
On my WIZ all files (*.prg, *.png) reside in:
mnt/sd/game/bgd-kee/
but
pic=png_load("mnt/sd/game/bgd-kee/065A.png");
does not work either.
deetee
try with
pic=png_load("/mnt/sd/game/bgd-kee/065A.png");
and what is the information of your .gpe?
please:
1) what bennu version use you
2) what depth video mode
3) what plataform
4) complete source code + graphics that show your problem
thanks.
in wiz, take special care on upper and lower case on filenames.
Hi all!
Thanks for all help - that's great. Unfortunately I haven't got any success. ???
I drew (with mtpaint) 5 pictures (darkgrey character "A" with yellow edges on black background) with 2, 3, 4, 8 and 16 bits (which means: 4, 8, 16, 256 and 65536 colors) with black (=transparent) on Index 0 (first color) and saved as PNG with transparency index = 0.
* The graphics are shown on my WINDOWS-PC but without transparency.
* My WIZ doesn't show any graphic. The green square shows "double" (x/y-shifted). After trying to escape (MENU-key) the WIZ crashes and I have to reboot.
My code is:
import "mod_text";
import "mod_key";
import "mod_joy";
import "mod_string";
import "mod_proc";
import "mod_mouse";
import "mod_map";
import "mod_screen";
const
KEY_UP=0; KEY_UPLEFT= 1; KEY_LEFT=2; KEY_DOWNLEFT=3;
KEY_DOWN=4; KEY_DOWNRIGHT=5;
KEY_RIGHT=6; KEY_UPRIGHT=7;
KEY_MENU=8; KEY_SELECT=9; KEY_L=10; KEY_R=11;
KEY_A=12; KEY_B=13; KEY_X=14; KEY_Y=15;
KEY_VOLUP=16; KEY_VOLDOWN=17; KEY_CLICK=18;
KEY_LAST=19;
end
function byte key_query()
begin
if (joy_getbutton(0,KEY_UP)) return KEY_UP;
elseif(joy_getbutton(0,KEY_UPLEFT)) return KEY_UPLEFT;
elseif(joy_getbutton(0,KEY_LEFT)) return KEY_LEFT;
elseif(joy_getbutton(0,KEY_DOWNLEFT)) return KEY_DOWNLEFT;
elseif(joy_getbutton(0,KEY_DOWN)) return KEY_DOWN;
elseif(joy_getbutton(0,KEY_DOWNRIGHT)) return KEY_DOWNRIGHT;
elseif(joy_getbutton(0,KEY_RIGHT)) return KEY_RIGHT;
elseif(joy_getbutton(0,KEY_UPRIGHT)) return KEY_UPRIGHT;
elseif(joy_getbutton(0,KEY_MENU)) return KEY_MENU;
elseif(joy_getbutton(0,KEY_SELECT)) return KEY_SELECT;
elseif(joy_getbutton(0,KEY_L)) return KEY_L;
elseif(joy_getbutton(0,KEY_R)) return KEY_R;
elseif(joy_getbutton(0,KEY_A)) return KEY_A;
elseif(joy_getbutton(0,KEY_B)) return KEY_B;
elseif(joy_getbutton(0,KEY_X)) return KEY_X;
elseif(joy_getbutton(0,KEY_Y)) return KEY_Y;
elseif(joy_getbutton(0,KEY_VOLUP)) return KEY_VOLUP;
elseif(joy_getbutton(0,KEY_VOLDOWN)) return KEY_VOLDOWN;
elseif(joy_getbutton(0,KEY_CLICK)) return KEY_CLICK;
else return(0); end
end
process main()
private
int escape=0, was_clicked=0, mx=0;
string str1="", str2="";
int square, pic1, pic2, pic3, pic4, pic5;
begin
repeat
str1="WIZ-Key:"+itoa(key_query())+" Character: "+chr(ascii)+" "+itoa(ascii);
write_string(0,320/2,200/2,4,&str1);
if((was_clicked==1) && (! mouse.left))
str2="x:"+itoa(mouse.x)+" y:"+itoa(mouse.y);
write_string(0,320/2,240/2,4,&str2);
mx=mouse.x;
end;
was_clicked = mouse.left;
square=new_map(300,220,16);
map_clear(0,square,rgb(0,255,0));
put(0,square,160,120);
pic1=png_load("A02.png");
put(0,pic1,20,20);
pic2=png_load("A03.png");
put(0,pic2,70,70);
pic3=png_load("A04.png");
put(0,pic3,120,120);
pic4=png_load("A08.png");
put(0,pic4,170,170);
pic5=png_load("A16.png");
put(0,pic5,280,170);
if(key(_ESC) or joy_getbutton(0,KEY_MENU) or (mx>300)) escape=1; end
frame;
until(escape);
let_me_alone();
end
My gpe-File (I took it from galaxian) is:
#!/bin/sh
unset OS_ID
## Is important set first bgd-runtime folder
LD_LIBRARY_PATH_BAK=$LD_LIBRARY_PATH
PATH_BAK=$PATH
LD_LIBRARY_PATH=../bgd-runtime:$LD_LIBRARY_PATH
PATH=../bgd-runtime:$PATH
### For use Wiz games on Caanoo uncomment the next lines
#OS_ID=8
#export OS_ID
echo 2 > /proc/cpu/alignment
for prg in *.prg; do
name=`basename $prg .prg`
bgdc $prg
bgdi $name
done
sync
LD_LIBRARY_PATH=$LD_LIBRARY_PATH_BAK
PATH=$PATH_BAK
cd /usr/gp2x
exec /usr/gp2x/gp2xmenu
all files reside in the directory:
/mnt/sd/game/bgd-kee
and I'm working with bennu bgd-1.0.0RC17(r165) on WIZ-firmware 1.2.1.
I didn't set the video depth in my bennu program - should I? and how?
Thanks for any help/suggestion.
deetee
PS: Attached you find my first 4 small graphics (should be some kind of transparent touchscreen key).
Note 1: all your attached images are 32 bits colors deph (or dont have a standard format, because GIMP open it as 32 bits).
Note 2: png format does not suport 16 bits color deph files, only can use "indexed(2,3,4,5,6,8 bits)", 24 bits mode (without transparencies) and 32 bits mode (with transparencies).
Note 3: BennuGD does not use the transparent information of a indexed png. (you dont need put transparent as index 0).
Note 4: you can not do the load_png in a loop because alwais are using new memory and never you are free it.
Note 5: you must free the memory loaded wit load_png using unload_map.
Note 7: If you need use a black color different to transparen you need anoter black color different of index 0 in your palette, or use another color (different to black) in your index 0
Note 6: yo can use xput, if you need change the kind of how mix the transparent color information.
Try this example. .
import "mod_text";
import "mod_key";
import "mod_joy";
import "mod_string";
import "mod_proc";
import "mod_mouse";
import "mod_map";
import "mod_screen";
import "mod_say";
import "mod_video";
const
KEY_UP=0; KEY_UPLEFT= 1; KEY_LEFT=2; KEY_DOWNLEFT=3;
KEY_DOWN=4; KEY_DOWNRIGHT=5;
KEY_RIGHT=6; KEY_UPRIGHT=7;
KEY_MENU=8; KEY_SELECT=9; KEY_L=10; KEY_R=11;
KEY_A=12; KEY_B=13; KEY_X=14; KEY_Y=15;
KEY_VOLUP=16; KEY_VOLDOWN=17; KEY_CLICK=18;
KEY_LAST=19;
end
function byte key_query()
begin
if (joy_getbutton(0,KEY_UP)) return KEY_UP;
elseif(joy_getbutton(0,KEY_UPLEFT)) return KEY_UPLEFT;
elseif(joy_getbutton(0,KEY_LEFT)) return KEY_LEFT;
elseif(joy_getbutton(0,KEY_DOWNLEFT)) return KEY_DOWNLEFT;
elseif(joy_getbutton(0,KEY_DOWN)) return KEY_DOWN;
elseif(joy_getbutton(0,KEY_DOWNRIGHT)) return KEY_DOWNRIGHT;
elseif(joy_getbutton(0,KEY_RIGHT)) return KEY_RIGHT;
elseif(joy_getbutton(0,KEY_UPRIGHT)) return KEY_UPRIGHT;
elseif(joy_getbutton(0,KEY_MENU)) return KEY_MENU;
elseif(joy_getbutton(0,KEY_SELECT)) return KEY_SELECT;
elseif(joy_getbutton(0,KEY_L)) return KEY_L;
elseif(joy_getbutton(0,KEY_R)) return KEY_R;
elseif(joy_getbutton(0,KEY_A)) return KEY_A;
elseif(joy_getbutton(0,KEY_B)) return KEY_B;
elseif(joy_getbutton(0,KEY_X)) return KEY_X;
elseif(joy_getbutton(0,KEY_Y)) return KEY_Y;
elseif(joy_getbutton(0,KEY_VOLUP)) return KEY_VOLUP;
elseif(joy_getbutton(0,KEY_VOLDOWN)) return KEY_VOLDOWN;
elseif(joy_getbutton(0,KEY_CLICK)) return KEY_CLICK;
else return(0); end
end
process main()
private
int escape=0, was_clicked=0, mx=0;
string str1="", str2="";
int square, pic1, pic2, pic3, pic4,pic4b, pic5,pic6;
begin
// set_mode(320,240,8);
square=new_map(300,220,16);
map_clear(0,square,rgb(0,255,0));
pic1=png_load("A02.png");
pic2=png_load("A03.png");
pic3=png_load("A04.png");
pic4=png_load("A08.png");
pic4b=png_load("A08bis.png");
pic5=png_load("A24.png");
pic6=png_load("A32.png");
repeat
str1="WIZ-Key:"+itoa(key_query())+" Character: "+chr(ascii)+" "+itoa(ascii);
write_string(0,320/2,200/2,4,&str1);
if((was_clicked==1) && (! mouse.left))
str2="x:"+itoa(mouse.x)+" y:"+itoa(mouse.y);
write_string(0,320/2,240/2,4,&str2);
mx=mouse.x;
end;
was_clicked = mouse.left;
put(0,square,160,120);
put(0,pic1,20,20);
put(0,pic2,70,70);
put(0,pic3,120,120);
put(0,pic4,170,170);
put(0,pic4b,170,100);
put(0,pic5,280,170);
put(0,pic6,280,210);
if(key(_ESC) or joy_getbutton(0,KEY_MENU) or (mx>300)) escape=1; end
frame;
until(escape);
unload_map(0,square);
unload_map(0,pic1);
unload_map(0,pic2);
unload_map(0,pic3);
unload_map(0,pic4);
unload_map(0,pic4b);
unload_map(0,pic5);
unload_map(0,pic6);
let_me_alone();
end
the example images continue here.
Quote from: deetee on November 08, 2010, 12:51:58 PM
Hi all!
Thanks for all help - that's great. Unfortunately I haven't got any success. ???
I drew (with mtpaint) 5 pictures (darkgrey character "A" with yellow edges on black background) with 2, 3, 4, 8 and 16 bits (which means: 4, 8, 16, 256 and 65536 colors) with black (=transparent) on Index 0 (first color) and saved as PNG with transparency index = 0.
* The graphics are shown on my WINDOWS-PC but without transparency.
* My WIZ doesn't show any graphic. The green square shows "double" (x/y-shifted). After trying to escape (MENU-key) the WIZ crashes and I have to reboot.
My code is:
import "mod_text";
import "mod_key";
import "mod_joy";
import "mod_string";
import "mod_proc";
import "mod_mouse";
import "mod_map";
import "mod_screen";
const
KEY_UP=0; KEY_UPLEFT= 1; KEY_LEFT=2; KEY_DOWNLEFT=3;
KEY_DOWN=4; KEY_DOWNRIGHT=5;
KEY_RIGHT=6; KEY_UPRIGHT=7;
KEY_MENU=8; KEY_SELECT=9; KEY_L=10; KEY_R=11;
KEY_A=12; KEY_B=13; KEY_X=14; KEY_Y=15;
KEY_VOLUP=16; KEY_VOLDOWN=17; KEY_CLICK=18;
KEY_LAST=19;
end
function byte key_query()
begin
if (joy_getbutton(0,KEY_UP)) return KEY_UP;
elseif(joy_getbutton(0,KEY_UPLEFT)) return KEY_UPLEFT;
elseif(joy_getbutton(0,KEY_LEFT)) return KEY_LEFT;
elseif(joy_getbutton(0,KEY_DOWNLEFT)) return KEY_DOWNLEFT;
elseif(joy_getbutton(0,KEY_DOWN)) return KEY_DOWN;
elseif(joy_getbutton(0,KEY_DOWNRIGHT)) return KEY_DOWNRIGHT;
elseif(joy_getbutton(0,KEY_RIGHT)) return KEY_RIGHT;
elseif(joy_getbutton(0,KEY_UPRIGHT)) return KEY_UPRIGHT;
elseif(joy_getbutton(0,KEY_MENU)) return KEY_MENU;
elseif(joy_getbutton(0,KEY_SELECT)) return KEY_SELECT;
elseif(joy_getbutton(0,KEY_L)) return KEY_L;
elseif(joy_getbutton(0,KEY_R)) return KEY_R;
elseif(joy_getbutton(0,KEY_A)) return KEY_A;
elseif(joy_getbutton(0,KEY_B)) return KEY_B;
elseif(joy_getbutton(0,KEY_X)) return KEY_X;
elseif(joy_getbutton(0,KEY_Y)) return KEY_Y;
elseif(joy_getbutton(0,KEY_VOLUP)) return KEY_VOLUP;
elseif(joy_getbutton(0,KEY_VOLDOWN)) return KEY_VOLDOWN;
elseif(joy_getbutton(0,KEY_CLICK)) return KEY_CLICK;
else return(0); end
end
process main()
private
int escape=0, was_clicked=0, mx=0;
string str1="", str2="";
int square, pic1, pic2, pic3, pic4, pic5;
begin
repeat
str1="WIZ-Key:"+itoa(key_query())+" Character: "+chr(ascii)+" "+itoa(ascii);
write_string(0,320/2,200/2,4,&str1);
if((was_clicked==1) && (! mouse.left))
str2="x:"+itoa(mouse.x)+" y:"+itoa(mouse.y);
write_string(0,320/2,240/2,4,&str2);
mx=mouse.x;
end;
was_clicked = mouse.left;
square=new_map(300,220,16);
map_clear(0,square,rgb(0,255,0));
put(0,square,160,120);
pic1=png_load("A02.png");
put(0,pic1,20,20);
pic2=png_load("A03.png");
put(0,pic2,70,70);
pic3=png_load("A04.png");
put(0,pic3,120,120);
pic4=png_load("A08.png");
put(0,pic4,170,170);
pic5=png_load("A16.png");
put(0,pic5,280,170);
if(key(_ESC) or joy_getbutton(0,KEY_MENU) or (mx>300)) escape=1; end
frame;
until(escape);
let_me_alone();
end
My gpe-File (I took it from galaxian) is:
#!/bin/sh
unset OS_ID
## Is important set first bgd-runtime folder
LD_LIBRARY_PATH_BAK=$LD_LIBRARY_PATH
PATH_BAK=$PATH
LD_LIBRARY_PATH=../bgd-runtime:$LD_LIBRARY_PATH
PATH=../bgd-runtime:$PATH
### For use Wiz games on Caanoo uncomment the next lines
#OS_ID=8
#export OS_ID
echo 2 > /proc/cpu/alignment
for prg in *.prg; do
name=`basename $prg .prg`
bgdc $prg
bgdi $name
done
sync
LD_LIBRARY_PATH=$LD_LIBRARY_PATH_BAK
PATH=$PATH_BAK
cd /usr/gp2x
exec /usr/gp2x/gp2xmenu
all files reside in the directory:
/mnt/sd/game/bgd-kee
and I'm working with bennu bgd-1.0.0RC17(r165) on WIZ-firmware 1.2.1.
I didn't set the video depth in my bennu program - should I? and how?
Thanks for any help/suggestion.
deetee
PS: Attached you find my first 4 small graphics (should be some kind of transparent touchscreen key).
1) 32bits png are loaded as 16bits in 16bit screen mode (set_mode)
2) in your sample/fix your forget delete_text for the writes
for transparent png, you need set alpha channel on the png from your graphic editor.
I found the problem, pnginfo (of pngtool) sais that your format is:
A02.png...
Image Width: 60 Image Length: 44
Bitdepth (Bits/Sample): 8
Channels (Samples/Pixel): 3
Pixel depth (Pixel Depth): 24
Colour Type (Photometric Interpretation): RGB
Image filter: Single row per byte filter
Interlacing: No interlacing
Compression Scheme: Deflate method 8, 32k window
Resolution: 0, 0 (unit unknown)
FillOrder: msb-to-lsb
Byte Order: Network (Big Endian)
Number of text strings: 0 of 0
You are using three channels (24 bits depht), and it seems that Bennugd does not support transparent color in this kind of png. mtpaint seems that yes.
For 8 bits (or any indexed png) you need a png with this format.
A08.png...
Image Width: 60 Image Length: 44
Bitdepth (Bits/Sample): 8
Channels (Samples/Pixel): 1
Pixel depth (Pixel Depth): 8
Colour Type (Photometric Interpretation): PALETTED COLOUR (59 colours, 0 transparent)
Image filter: Single row per byte filter
Interlacing: No interlacing
Compression Scheme: Deflate method 8, 32k window
Resolution: 2835, 2835 (pixels per meter)
FillOrder: msb-to-lsb
Byte Order: Network (Big Endian)
Number of text strings: 0 of 0
A02.png...
Image Width: 60 Image Length: 44
Bitdepth (Bits/Sample): 2
Channels (Samples/Pixel): 1
Pixel depth (Pixel Depth): 2
Colour Type (Photometric Interpretation): PALETTED COLOUR (4 colours, 0 transparent)
Image filter: Single row per byte filter
Interlacing: No interlacing
Compression Scheme: Deflate method 8, 32k window
Resolution: 2835, 2835 (pixels per meter)
FillOrder: msb-to-lsb
Byte Order: Network (Big Endian)
Number of text strings: 0 of 0
Quote from: SplinterGU on November 08, 2010, 06:07:20 PM
...
1) 32bits png are loaded as 16bits in 16bit screen mode (set_mode)
2) in your sample/fix your forget delete_text for the writes
3) for transparent png, you need set alpha channel on the png from your graphic editor.
In my example you can see that:
* the point 1 is not correct of all, 32 bits png in 16 bit screen mode round its alpha channel to 0 or 255.
* the point 3 is not neccesarily so, if you use alpha channel in png file you see forced to use 32 bits, and it is not neccesary, you can use "indexed" png (<=8 bits depth) knowing that Bennu uses the first color of your indexed palette as transparent because alwais is the 0.
In the "A08bis.png" file you can see that the first color of the palette is the RED and bennu uses it as transparent to draw it.
dcelso, again...
bennugd support transparent on png, you need use channel alpha, alpha < 128 are bits transparent.
in index color, 0 is transparent.
Quote from: SplinterGU on November 08, 2010, 10:32:15 PM
dcelso, again...
bennugd support transparent on png, you need use channel alpha, alpha < 128 are bits transparent.
in index color, 0 is transparent.
¿?no entiendo, es justo lo que dije.
entonces entendi mal... :D
;)
Hi all!
Thanks for all helpful hints and codes/pictures (DeCelso) - and also thanks for the "spanish language lessons" (due to your smilies I guess I didn't start some guru-dispute).
DeCelso's graphics are working - especially A032.png seems to be very universal (even transparent on windows-photo-viewer).
On my WIZ there is no crash any more (this was my bad memory handling). A08bis.png was shown transparent, A24 and A32 are not shown at all. Instead I got a second green background-rectangle (300x220, starting at ~280,170) - seems to be caused by pic5 (A24).
So I have to ...
* ... resolve how to make working PNGs (like A08bis or A32) with mtpaint.
* ... resolve why (instead of the second PNG) another shifted green background rectangle occurs (on my WIZ).
Till soon - thanks so far
deetee
Yes! - it is working.
I took DeCelso's A32.png and edited it with mtpaint - then I saved without changing the transparent preferences. Even reducing the palette to 4 or 16 colors works. As I am not a specialist regarding graphics, channels etc. - it is working (even on my WIZ). Thank you DeCelso for putting this magic in my PNG.
Only one point has to be clarified:
* What causes the second green background rectangle? I guess I did something bad with the WIZ/bennu graphic memory?
TIA
deetee
Sorry for this "triple-reply" but I think I solved the last point now.
I forget to unload one map - this seems to cause memory problems.
So my final piece of code is:
process main()
private
int escape=0, was_clicked=0, mx=0;
string str1="", str2="";
int square, pic6;
begin
// set_mode(320,240,8);
square=new_map(300,220,16); map_clear(0,square,rgb(0,255,0));
pic6=png_load("gfx/new3.png");
repeat
str1="WIZ-Key:"+itoa(key_query())+" Character: "+chr(ascii)+" "+itoa(ascii);
write_string(0,320/2,200/2,4,&str1);
if((was_clicked==1) && (! mouse.left))
str2="x:"+itoa(mouse.x)+" y:"+itoa(mouse.y);
write_string(0,320/2,240/2,4,&str2);
mx=mouse.x;
end;
was_clicked = mouse.left;
put(0,square,160,120);
put(0,pic6,50,50);
if(key(_ESC) or joy_getbutton(0,KEY_MENU) or (mx>300)) escape=1; end
frame;
until(escape);
unload_map(0,pic6);
let_me_alone();
end
Thank you all for your help - without it - I would have given up.
deetee
Ok, perhaps your kind of PNGs may be that in next versions of bennugb runs well, I sent to SplingerGU a fix code suggestion to support them.
Thanks to you for share it.
Quote from: DCelso on November 09, 2010, 02:48:33 PM
Ok, perhaps your kind of PNGs may be that in next versions of bennugb runs well, I sent to SplingerGU a fix code suggestion to support them.
Thanks to you for share it.
I waiting fix, I can't add "if (... depth == 16 ... )" where is "else" in the original code, how you suggest.