Lesson5 前景の基本編

前景について

さて、今回は早速、前回説明をしたレイヤーを利用したプログラミングを行ってみましょう。 今回表示させてみるのは前景というもので、メッセージレイヤーと背景レイヤーの中間にある前景レイヤーを使用します。 背景とは違い前景というものに特に決まったものはありません。文章と背景の間に表示したいものは全て「前景」となります。
しかし何でもといわれてもピンと来ないでしょうから、今回は前景の代表格"立ち絵"を表示させたいと思います。

立ち絵の用意

立ち絵の表示方法は2つあります。それは画像を1枚使用する方法と、2枚使用する方法です。 1枚使用する方法をとる場合には、人物以外の部分が人物に使用されていない色のうち一色で塗られている画像を用意します。 また、2枚画像を使用する方法をとる場合には、人物の書かれた画像と、人物がかかれていない部分を黒く塗りつぶした別の画像(マスク画像)を用意する 必要があります。マスク画像の入手には吉里吉里のフォルダ内のtoolにあるkrkrtpc.exe(/krikiri2/tool/krkrtpc.exe)を使用するのもいいでしょう。
また、立ち絵を制作、入手するのが困難な場合はStudioついんくるで制作した簡易的な立ち絵(こちら→■)を利用してもかまいません。

1枚で表示

はじめに画像を1枚使用した立ち絵(前景)の表示を行ってみましょう。 前景レイヤーに表示させるといっても使用するタグは背景のときに使ったものと変わりません。 下のタグを見てください。

[image storage="tachie01.bmp" layer="0"]

layer="0"とは前回説明したレイヤーで、前景レイヤーのひとつでしたね？ つまり、

画像について命令します(image)、tachie01.bmpを読み込みなさい(storage="tachie01.bmp")。読み込む場所は前景の0にしなさい(layer="0")。

という意味になります。では早速実行してみましょう。(立ち絵が見やすいよう、背景を表示させておくことを推奨します。)

あれっ？私が表示させようとしたtachie01.bmpはどこへ消えてしまったのでしょうか？ 残念なことに目に見える形で現われてくれませんでした。この原因は前景レイヤー自身にあります。 前景レイヤーは普段存在しているけど見えない状態になっています。これを解消するにはvisibleという追加記述を trueとする必要があります。visibleとはレイヤーの可視、不可視を変更する追加記述です。ちなみにこのページには 関係ありませんが、メッセージレイヤーのmessage1もこの追加記述で見える状態にできます。つまりvisibleという追加記述をtrue とすることで、対象となっているレイヤーを見せなさい。と命令することができるのです。 そして修正したソースが下のものです。

このソースを実行すると無事に立ち絵が表示されましたが、なんとも不思議な光景が出来上がってしまいました。 そう、１枚の画像を使用するために用意する画像は背景が塗りつぶさなければならないので、そのまま表示しては立ち絵の背景が表示されてしまうのです。 また、私達は立ち絵に対してどこに表示するかを指定していないのです。これらは次の追加記述で解決することができます。背景の余計な色の部分については keyに消したい色を、場所についてはposに場所を記述するのです。例えば、今回の図に使用している立ち絵の背景はマゼンタという色で、 RGB値ではFF00FFです。KAG3ではこのRGB値を0xFF00FFと書く必要がありますので、key="0xFF00FF"と記述することになります。 そして場所を左に表示すると仮定するとpos="left"とします。これらの詳しい内容はこちらをご覧ください。
では上記の内容を踏まえてソースを修正してみましょう。私のソースはこのようになりました。

これで正常に表示されたと思います。
ここまで紹介した方法を使用するときに気をつけなければならないことがあります。 それは立ち絵の背景の色についてです。実はこの方法は背景の色をしっかりと管理しないと、追加記述keyで 色を指定することができません。また、背景の色と同じ色が立ち絵に含まれていた場合、立ち絵のその部分が消えてしまうのです。 ただ、keyの色指定については便利な書き方があります。key="adapt"と記述すると、画像の頂点の直線上で 使用されている色の中で一番使用されている色が自動的に選ばれます。特殊な事情がなければこの記述を使うといいかも知れません。

2枚で表示

2枚の画像を使用して表示させるためには、マスク画像が必要になります。マスク画像とは表示させる画像のうち、透明にさせたい部分を塗りつぶした 画像のことを言います。マスク画像は256色グレースケールという保存形式を使用しなければならないので注意が必要です。 マスク画像を利用した前傾の表示はタグを記述する面ではとても簡単な話なので、軽い気持ちでいきましょう。

このソースを見てください。

[image storage="tachie02.png" layer="0" visible="true" pos="left"]

先ほどのソースと比べると、追加記述keyによる透明にする色の指定が無なくなっていることが分かると思います。 マスク画像にはこの透明にするという作業を行っていただくわけですが、実は私達がすべきことは何もありません。 KAG3が勝手にマスク画像を読み込んで、処理してくれます。しかし、マスク画像をKAG3に処理させるためにはマスク画像にルールに沿った名前をつける必要があります。 例えば、今回の例で私が使用したtachie02.pngのマスク画像にはtachie02_m.pngと名づける必要があります。 では、早速上記のソースを参考に実行してみてください。私達が何もせずとも画像が表示できることでしょう。

[次へ進む]

Back to the Lesson([top]＞[Lesson]＞[Lesson5 前景の基本編])