Transparent Color

[deetee]

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:

Code Select Expand

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

[FreeYourMind]

If you want to replace the transparent color to red, you need to replace the transparent (0,0,0) with red after display picture.

[Drumpi]

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.

[DCelso]

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.

[deetee]

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

[DCelso]

depend of your directory tree and the information of your run script. Can you put this information here?

[deetee]

On my WIZ all files (*.prg, *.png) reside in:

mnt/sd/game/bgd-kee/

but

Code Select Expand

pic=png_load("mnt/sd/game/bgd-kee/065A.png");

does not work either.

deetee

[DCelso]

try with

Code Select Expand


pic=png_load("/mnt/sd/game/bgd-kee/065A.png");

and what is the information of your .gpe?

[SplinterGU]

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.

[SplinterGU]

in wiz, take special care on upper and lower case on filenames.

[deetee]

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:

Code Select Expand

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:

Code Select Expand

#!/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).

[DCelso]

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. .

Code Select Expand


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


[DCelso]

the example images continue here.

[SplinterGU]

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:

Code Select Expand

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:

Code Select Expand

#!/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

[SplinterGU]

for transparent png, you need set alpha channel on the png from your graphic editor.