さて、今回は早速、前回説明をしたレイヤーを利用したプログラミングを行ってみましょう。
今回表示させてみるのは前景というもので、メッセージレイヤーと背景レイヤーの中間にある前景レイヤーを使用します。
背景とは違い前景というものに特に決まったものはありません。文章と背景の間に表示したいものは全て「前景」となります。
しかし何でもといわれてもピンと来ないでしょうから、今回は前景の代表格"立ち絵"を表示させたいと思います。
立ち絵の表示方法は2つあります。それは画像を1枚使用する方法と、2枚使用する方法です。
1枚使用する方法をとる場合には、人物以外の部分が人物に使用されていない色のうち一色で塗られている画像を用意します。
また、2枚画像を使用する方法をとる場合には、人物の書かれた画像と、人物がかかれていない部分を黒く塗りつぶした別の画像(マスク画像)を用意する
必要があります。マスク画像の入手には吉里吉里のフォルダ内のtoolにあるkrkrtpc.exe(/krikiri2/tool/krkrtpc.exe)を使用するのもいいでしょう。
また、立ち絵を制作、入手するのが困難な場合はStudioついんくるで制作した簡易的な立ち絵(こちら→■)を利用してもかまいません。
Tipkrkrtpc.exeとは画像フォーマットコンバーターというソフトウェアで、吉里吉里に同梱されているフリーソフトです。 これを利用することで、画像を様々な形式に変更することができます。詳しい使い方はここでは紹介しませんが、 容易に使えると思います。 |
はじめに画像を1枚使用した立ち絵(前景)の表示を行ってみましょう。 前景レイヤーに表示させるといっても使用するタグは背景のときに使ったものと変わりません。 下のタグを見てください。
[image storage="tachie01.bmp" layer="0"]
|
画像について命令します(image)、tachie01.bmpを読み込みなさい(storage="tachie01.bmp")。読み込む場所は前景の0にしなさい(layer="0")。 |
あれっ?私が表示させようとしたtachie01.bmpはどこへ消えてしまったのでしょうか?
残念なことに目に見える形で現われてくれませんでした。この原因は前景レイヤー自身にあります。
前景レイヤーは普段存在しているけど見えない状態になっています。これを解消するにはvisible
という追加記述を
true
とする必要があります。visible
とはレイヤーの可視、不可視を変更する追加記述です。ちなみにこのページには
関係ありませんが、メッセージレイヤーのmessage1もこの追加記述で見える状態にできます。つまりvisible
という追加記述をtrue
とすることで、対象となっているレイヤーを見せなさい。と命令することができるのです。
そして修正したソースが下のものです。
[image storage="tachie01.bmp" layer="0" visible="true"]
|
このソースを実行すると無事に立ち絵が表示されましたが、なんとも不思議な光景が出来上がってしまいました。
そう、1枚の画像を使用するために用意する画像は背景が塗りつぶさなければならないので、そのまま表示しては立ち絵の背景が表示されてしまうのです。
また、私達は立ち絵に対してどこに表示するかを指定していないのです。これらは次の追加記述で解決することができます。背景の余計な色の部分については
key
に消したい色を、場所についてはpos
に場所を記述するのです。例えば、今回の図に使用している立ち絵の背景はマゼンタという色で、
RGB値ではFF00FFです。KAG3ではこのRGB値を0xFF00FFと書く必要がありますので、key="0xFF00FF"
と記述することになります。
そして場所を左に表示すると仮定するとpos="left"
とします。これらの詳しい内容はこちらをご覧ください。
では上記の内容を踏まえてソースを修正してみましょう。私のソースはこのようになりました。
[image storage="tachie01.bmp" layer="0" visible="true" key="0xFF00FF" pos="left"]
|
これで正常に表示されたと思います。
ここまで紹介した方法を使用するときに気をつけなければならないことがあります。
それは立ち絵の背景の色についてです。実はこの方法は背景の色をしっかりと管理しないと、追加記述key
で
色を指定することができません。また、背景の色と同じ色が立ち絵に含まれていた場合、立ち絵のその部分が消えてしまうのです。
ただ、key
の色指定については便利な書き方があります。key="adapt"
と記述すると、画像の頂点の直線上で
使用されている色の中で一番使用されている色が自動的に選ばれます。特殊な事情がなければこの記述を使うといいかも知れません。
Tip
立ち絵に使用する画像にαチャネル(透明情報)が含まれている場合は追加記述 |
2枚の画像を使用して表示させるためには、マスク画像が必要になります。マスク画像とは表示させる画像のうち、透明にさせたい部分を塗りつぶした 画像のことを言います。マスク画像は256色グレースケールという保存形式を使用しなければならないので注意が必要です。 マスク画像を利用した前傾の表示はタグを記述する面ではとても簡単な話なので、軽い気持ちでいきましょう。
このソースを見てください。
[image storage="tachie02.png" layer="0" visible="true" pos="left"]
|
key
による透明にする色の指定が無なくなっていることが分かると思います。
マスク画像にはこの透明にするという作業を行っていただくわけですが、実は私達がすべきことは何もありません。
KAG3が勝手にマスク画像を読み込んで、処理してくれます。しかし、マスク画像をKAG3に処理させるためにはマスク画像にルールに沿った名前をつける必要があります。
例えば、今回の例で私が使用したtachie02.pngのマスク画像にはtachie02_m.pngと名づける必要があります。
では、早速上記のソースを参考に実行してみてください。私達が何もせずとも画像が表示できることでしょう。
Tip表示させる画像とマスク画像の形式は同じものである必要はありません。例えばhogehoge.bmpとhogehoge_m.jpg を使用しても結果は変わりません。Studioついんくる側で制作した立ち絵のうち、マスク画像を使用したものは*.pngと*.jpgの組み合わせで提供されていますので 試してみるといいでしょう。 |
[次へ進む]
Back to the Lesson([top]>[Lesson]>[Lesson5 前景の基本編])