前景とは・・・要するに、人物の立ちポーズなど、背景とメッセージの間に表示されるものです。KAG では標準で 3 つまで重ね合わせて表示できます ( カスタマイズすればもっと重ね合わせて表示できます )。

　前景は、人物などの形に画像を切り取って表示するために、マスクあるいはカラーキーという手法を使います。KAG では、マスクを使って前景を表示する方法と、カラーキーを使って画像を表示する方法の両方、PNG や ERI や TLG5/TLG6 画像のように画像そのものにαチャネルや透過情報を含むことができる場合はその画像固有の方法を用いて透過させることができます。

　カラーキーとは、透明になるべき部分を特定の一色で塗りつぶし、その色の部分が透明になる、というものです。
　これは画像が フルカラーの場合と 256 色や 16 色の場合で少々扱いが違います。

　フルカラーの場合は、つまり「つかわなさそー」な色を「抜き色」( カラーキー ) として、透明にしたい部分をそれで塗るわけです。使われなさそうな色としては、真マゼンダ (r,g,b)=(255,0,255) や、真緑 (r,g,b)=(0,255,0) がよく使われるようです。
　でもそうするとマゼンダや緑を表現したい場合はどうするの？ということになりますが、(r,g,b)=(254,0,255) や (r,g,b)=(0,254,0) という色を使えば KAG では別の色として処理されるので OK です。

　256 色の画像や 16 色の画像では、ある一つのパレットインデックスを「透明色」として使います。このパレットインデックスで塗りつぶされた部分が透明になるのです。

　KAG では、普通の前景画像とは別に、マスク画像と呼ばれるものを用意して、そのマスク画像に従って前景画像を切り抜くようにして表示することができます。

　マスク画像は、前景画像と同じサイズの 256 階調グレースケールの画像で、輝度がそのまま「不透明度」を示します。つまり、輝度 0 の部分は「全く透明」で輝度 255 の部分は「全く不透明」です。128 ぐらいのところは「半分程度の透明」ということとなります。表示されるべき部分が白くて、透明な部分は黒いという画像になります。
　マスク画像は必ず 256 階調のグレースケール ( 256 色画像 ) で保存してください。フルカラーや16色で保存すると正常に表示されません。
　マスク画像は不透明度を保持する画像ですが、これに対して前景画像は色の情報を保持する画像となります。この場合の前景画像をとくにメイン画像と呼んでいます。



　マスク画像は、メイン画像のファイル名に _m をつけた名前で保存します。たとえばメイン画像が hogehoge.png であれば、そのマスク画像は hogehoge_m.png となります。この、メイン画像とマスク画像の分離した形式をメイン/マスク分離形式と呼んでいます。

　マスク画像を使う利点は、前景を重ね合わせるときに自由に不透明度を指定できるのと、適切に処理したマスク画像とメイン画像を使えば、重ね合わせるときに、その縁をきれいにアンチエイリアスのかかった状態で重ね合わせることができると言うことです。

　では、これに従って適当な画像を用意してください ( 画像は各自でご用意願います... )。まず、カラーキーを使った前景の表示方法から・・・。

[image storage="bg0" page=fore layer=base]
[wait time=200]
*start|スタート
[cm]
[image layer=0 page=fore storage="as" visible=true key=0xff00ff left=340 top=100]
こんにちは。

　太字で示されている部分が前景画像を表示している部分です。image タグは、背景を表示しよう でも出てきました。画像を読み込むためのタグです。layer に 0 として、前景レイヤの 0 番を指定しています。
　ここで、 key という属性があります。key 属性は、抜き色を指定するための属性です。このように 0xRRGGBB という形式で 16 進数で抜き色を指定すると、RR(赤) GG(緑) BB(青)で塗られた部分を抜き色として透明にします。たとえば、key=0xff00ff では (r,g,b)=(255,0,255) つまり真マゼンダの部分を抜き色として透明にするという指定になります。もし、key=255 と指定すると、key には 255 で示されたパレットインデックスがカラーキーになります。詳しくは タグリファレンス を参照してください。

　storage="as" としてありますが、これは as という名の画像を読み込むという指令です。拡張子は指定しなくてかまいません。この場合は as という名のファイルのうち、読み込み可能な画像を自動的に探して読み込みます。

　visible=true としているのは、KAG の前景レイヤは、標準では全部非表示なので、ここで表示する設定にしないと表示されないのです。

　left=340 top=100 としているのは、前景レイヤの左端位置と上端位置を指定しています。前景レイヤは、image タグで読み込むときに表示位置を指定できます。



　また、マスク画像を使うとなると以下のような指定の仕方になります。

[image storage="bg0" page=fore layer=base]
[wait time=200]
*start|スタート
[cm]
[image layer=0 page=fore storage="asm" visible=true left=340 top=100]
こんにちは。

　といっても key 属性が無いだけですね。
　この例の場合、読み込まれる画像は asm_m という名の画像がマスク画像として、asm という名の画像がメイン画像として読み込まれます。

　PNG のように画像中にα情報やカラーキーを持つことのできる画像形式を用いる場合は上記の例と同じで、key 属性を指定する必要はありません。