98 lines
10 KiB
HTML
98 lines
10 KiB
HTML
<?xml version="1.0" encoding="UTF-8"?>
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
|
|
<!-- generated by to_html.pl from DispLayer.xml -->
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
<title>前景を表示しよう</title>
|
|
<meta name="author" content="W.Dee" />
|
|
<meta http-equiv="Content-Style-Type" content="text/css" />
|
|
<meta http-equiv="Content-Script-Type" content="text/javascript" />
|
|
<link href="browser.css" type="text/css" rel="stylesheet" title="吉里吉里関連リファレンス用標準スタイル" />
|
|
<link href="mailto:[email protected]" rev="Made" />
|
|
<link href="index.html" target="_top" rel="Start" title="トップページ" />
|
|
</head>
|
|
<body>
|
|
<h1><a id="id34" name="id34">前景とは</a>
|
|
</h1><div class="para"><div>
|
|
前景とは・・・要するに、人物の立ちポーズなど、背景とメッセージの間に表示されるものです。KAG では標準で 3 つまで重ね合わせて表示できます ( カスタマイズすればもっと重ね合わせて表示できます )。<br />
|
|
<br />
|
|
前景は、人物などの形に画像を切り取って表示するために、マスクあるいはカラーキーという手法を使います。KAG では、マスクを使って前景を表示する方法と、カラーキーを使って画像を表示する方法の両方、PNG や ERI や TLG5/TLG6 画像のように画像そのものにアルファチャネルや透過情報を含むことができる場合はその画像固有の方法を用いて透過させることができます。<br />
|
|
</div></div>
|
|
<h1><a id="id35" name="id35">カラーキーを使った前景</a>
|
|
</h1><div class="para"><div>
|
|
カラーキーとは、透明になるべき部分を特定の一色で塗りつぶし、その色の部分が透明になる、というものです。<br />
|
|
これは画像が フルカラーの場合と 256 色や 16 色の場合で少々扱いが違います。<br />
|
|
<br />
|
|
フルカラーの場合は、つまり「つかわなさそー」な色を「<a id="id36" name="id36" class="targanchor"><dfn>抜き色</dfn></a>」( カラーキー ) として、透明にしたい部分をそれで塗るわけです。使われなさそうな色としては、真マゼンダ (r,g,b)=(255,0,255) や、真緑 (r,g,b)=(0,255,0) がよく使われるようです。<br />
|
|
でもそうするとマゼンダや緑を表現したい場合はどうするの？ということになりますが、(r,g,b)=(254,0,255) や (r,g,b)=(0,254,0) という色を使えば KAG では別の色として処理されるので OK です。<br />
|
|
<br />
|
|
256 色の画像や 16 色の画像では、ある一つの<a id="id37" name="id37" class="targanchor"><dfn>パレットインデックス</dfn></a>を「透明色」として使います。このパレットインデックスで塗りつぶされた部分が透明になるのです。<br />
|
|
<br />
|
|
<br /><div class="note"><div class="notehead"><span class="noteheadspan">Note</span></div>
|
|
PNG などの画像形式の場合は保存時に<a id="id38" name="id38" class="targanchor"><dfn>透明色</dfn></a>(カラーキー)を指定できるようなソフトがありますが、そのようなソフトで出力された PNG 画像も扱うことができます。</div><br />
|
|
<br />
|
|
<br /><div class="descimg"><img width="48" height="12" alt="ButtonGlyphImageList.png" src="ButtonGlyphImageList.png" /><br />抜き色の例</div><br /></div></div>
|
|
<h1><a id="id39" name="id39">マスクを使った前景</a>
|
|
</h1><div class="para"><div>
|
|
KAG では、普通の前景画像とは別に、マスク画像と呼ばれるものを用意して、そのマスク画像に従って前景画像を切り抜くようにして表示することができます。<br />
|
|
<br />
|
|
<a id="id40" name="id40" class="targanchor"><dfn>マスク画像</dfn></a>は、前景画像と同じサイズの 256 階調グレースケールの画像で、輝度がそのまま「不透明度」を示します。つまり、輝度 0 の部分は「全く透明」で輝度 255 の部分は「全く不透明」です。128 ぐらいのところは「半分程度の透明」ということとなります。表示されるべき部分が白くて、透明な部分は黒いという画像になります。<br />
|
|
マスク画像は必ず 256 階調のグレースケール ( 256 色画像 ) で保存してください。フルカラーや16色で保存すると正常に表示されません。<br />
|
|
マスク画像は不透明度を保持する画像ですが、これに対して前景画像は色の情報を保持する画像となります。この場合の前景画像をとくに<a id="id41" name="id41" class="targanchor"><dfn>メイン画像</dfn></a>と呼んでいます。<br />
|
|
<br /><div class="note"><div class="notehead"><span class="noteheadspan">Note</span></div>
|
|
PNGやERI、TLG5/TLG6 形式の画像の場合は、一つの PNG/ERI/TLG5 ファイル内に<a id="id42" name="id42" class="targanchor"><dfn>アルファチャネル</dfn></a> ( つまるところのマスク画像 ) を含めることができます。<br />
|
|
そういう画像を出力できるソフト ( PNG では GIMP 等 ) をお持ちの方は、それを使えばマスクファイルを別に用意する必要はありません。また、吉里吉里 SDK 付属の画像フォーマットコンバータを用いればこれらの画像形式の変換を簡単に行うことができます。</div><br />
|
|
<br />
|
|
マスク画像は、メイン画像のファイル名に _m をつけた名前で保存します。たとえばメイン画像が hogehoge.png であれば、そのマスク画像は hogehoge_m.png となります。この、メイン画像とマスク画像の分離した形式をメイン/マスク分離形式と呼んでいます。<br />
|
|
<br />
|
|
マスク画像を使う利点は、前景を重ね合わせるときに自由に不透明度を指定できるのと、適切に処理したマスク画像とメイン画像を使えば、重ね合わせるときに、その縁をきれいにアンチエイリアスのかかった状態で重ね合わせることができると言うことです。<br />
|
|
<br /><div class="descimg"><img width="312" height="380" alt="ayari.png" src="ayari.png" /><img width="312" height="380" alt="ayari_m.png" src="ayari_m.png" /><br />マスク例 ( 左がメイン、右がマスク )</div><br /></div></div>
|
|
<h1><a id="id43" name="id43">前景を表示しよう</a>
|
|
</h1><div class="para"><div>
|
|
では、これに従って適当な画像を用意してください ( 画像は各自でご用意願います... )。まず、カラーキーを使った前景の表示方法から・・・。<br />
|
|
|
|
<br />
|
|
<code class="bq">[image storage="bg0" page=fore layer=base]<br />
|
|
[wait time=200]<br />
|
|
*start|スタート<br />
|
|
[cm]<br />
|
|
<em>[image layer=0 page=fore storage="as" visible=true key=0xff00ff left=340 top=100]</em><br />
|
|
こんにちは。<br />
|
|
</code>
|
|
<br />
|
|
|
|
太字で示されている部分が前景画像を表示している部分です。<a id="id44" name="id44" class="targanchor"><dfn>image</dfn></a> タグは、<a target="main" class="jump" href="DispBase.html">背景を表示しよう</a> でも出てきました。画像を読み込むためのタグです。layer に 0 として、前景レイヤの 0 番を指定しています。<br />
|
|
ここで、 key という属性があります。key 属性は、抜き色を指定するための属性です。このように 0xRRGGBB という形式で 16 進数で抜き色を指定すると、RR(赤) GG(緑) BB(青)で塗られた部分を抜き色として透明にします。たとえば、key=0xff00ff では (r,g,b)=(255,0,255) つまり真マゼンダの部分を抜き色として透明にするという指定になります。もし、key=255 と指定すると、key には 255 で示されたパレットインデックスがカラーキーになります。詳しくは <a target="main" class="jump" href="Tags.html">タグリファレンス</a> を参照してください。<br />
|
|
<br />
|
|
storage="as" としてありますが、これは as という名の画像を読み込むという指令です。拡張子は指定しなくてかまいません。この場合は as という名のファイルのうち、読み込み可能な画像を自動的に探して読み込みます。<br />
|
|
<br />
|
|
visible=true としているのは、KAG の前景レイヤは、標準では全部非表示なので、ここで表示する設定にしないと表示されないのです。<br />
|
|
<br />
|
|
left=340 top=100 としているのは、前景レイヤの左端位置と上端位置を指定しています。前景レイヤは、image タグで読み込むときに表示位置を指定できます。<br />
|
|
<br /><div class="note"><div class="notehead"><span class="noteheadspan">Note</span></div>
|
|
PNG 画像中の表示オフセット指定は無視されます。</div><br />
|
|
<br />
|
|
また、マスク画像を使うとなると以下のような指定の仕方になります。<br />
|
|
|
|
<br />
|
|
<code class="bq">[image storage="bg0" page=fore layer=base]<br />
|
|
[wait time=200]<br />
|
|
*start|スタート<br />
|
|
[cm]<br />
|
|
<em>[image layer=0 page=fore storage="asm" visible=true left=340 top=100]</em><br />
|
|
こんにちは。<br />
|
|
</code>
|
|
<br />
|
|
|
|
といっても key 属性が無いだけですね。<br />
|
|
この例の場合、読み込まれる画像は asm_m という名の画像がマスク画像として、asm という名の画像がメイン画像として読み込まれます。<br />
|
|
<br />
|
|
PNG のように画像中にアルファチャネル情報やカラーキーを持つことのできる画像形式を用いる場合は上記の例と同じで、key 属性を指定する必要はありません。<br />
|
|
<br /><div class="descimg"><img width="325" height="265" alt="LayerDisplayed.jpg" src="LayerDisplayed.jpg" /><br />実行結果</div><br /></div></div>
|
|
<script type="text/javascript" charset="UTF-8" src="documentid.js" ></script>
|
|
<script type="text/javascript" charset="UTF-8" src="postcontent.js" ></script>
|
|
</body>
|
|
</html>
|