さて、前章の文字の表示に関するタグについては理解できましたでしょうか？　次に、この章では、画像の表示に関するタグについてやっていきます。

　KAG で画像を扱う場合、"レイヤ" という概念を理解する必要があります。Photoshop などの画像処理ソフトを使ったことがある方には、"レイヤー" と言った方が、分かりやすいかもしれません。

　それでは、このレイヤの概念について、簡単な説明をしておきましょう。
　例えば今、机の上に１枚の写真を置いたとしましょう。そして、その上に別の写真をかさねて置きます。さて、これがずばり、レイヤの概念です。ちょっと分かりにくいですね。具体例を挙げて考えてみましょう。まず、机の上に置いた１枚目の写真は、砂浜の写真だったとします。そして、その上にかさねた２枚目の写真は、人物の切り抜き写真でした。この２枚がかさなっているのを見ると、人物が砂浜に立っているように見えます。これがつまり、「２枚のレイヤを使って、砂浜に立っている人物を表現した」ことになります。特に難しいことはありませんよね。レイヤというのはもともと、layer つまり "層" という意味です。何枚もかさねた写真を横からみたら、枚数分の層になっていることが分かります。

　KAG では、この１枚目（砂浜）のレイヤを "背景レイヤ"、２枚目（人物）のレイヤを "前景レイヤ" と呼びます。前景レイヤは、３枚目、４枚目……と、何枚でも使うことができます。

　また、文字を表示するための "メッセージレイヤ" というのも存在しますが、これについては、別の章で述べます。

　さて、前節では、レイヤの概念および KAG のレイヤには、

・背景レイヤ
・前景レイヤ
・メッセージレイヤ

の３つが存在することを話しました。

　それでは、この３つの内、"背景レイヤ" を実際に KAG で表示させてみましょう。
　まず、背景レイヤには、サイズに関するルールがあります。それは、"クライアントサイズと同じサイズにしなければならない" というルールです。クライアントサイズというのは、下図の領域のサイズのことです。


クライアントサイズ
　KAG のデフォルトでは、このサイズは、640×480 となっています。このサイズは、前述の Config.tjs ファイルによって決められています。つまり、Config.tjs によってクライアントサイズを変更した場合は、そのサイズに合わせた画像を背景レイヤとして読み込む必要があります。

　今回は、クライアントサイズを変更せずに、背景レイヤを表示させてみましょう。それではまず、"背景レイヤの表示" という名前でプロジェクトフォルダを作り、吉里吉里で実行できるようにしておきます。

　それから、640×480 のサイズの画像を用意します。画像の用意が面倒な場合は、この画像（←右クリックで "対象をファイルに保存"）をご使用ください。ちなみに、KAG で読み込める画像形式については、「KAG ドキュメント」→「画像形式について」に書かれています。ご自分で用意する場合には、この画像形式について注意が必要です。また、その場合のファイル名は "bgimage" としておいてください。拡張子については、KAG で読み込める形式であれば、何でも構いません。
　さて、用意した画像ファイルを置く場所についてですが、プロジェクトフォルダ（"kirikiri2/背景レイヤの表示" フォルダのこと。以下略）内にあるフォルダであれば、どのフォルダに置いても構いません。

画像
しかし、「KAG ドキュメント」→「準備をしよう」→「フォルダの説明」にも書かれている通り、背景画像であれば、"bgimage" フォルダに入れるのが一般的です。

　さて、あとは背景レイヤに画像を読み込むためのシナリオファイルを書くだけです。色々な説明をする前に、ひとまず、シナリオファイル（"kirikiri2/背景レイヤの表示/scenario/first.ks" ファイルのこと。以下略）に、

@image storage=bgimage layer=base

と書いて、実行してみてください。すると、背景レイヤに画像が表示されるはずです。


背景レイヤに画像が表示された
　真ん中にある黒い四角形が気になると思いますが、これが先ほど述べたメッセージレイヤというものです。ここに、文字が描画されていくわけです。KAG のデフォルトでは、メッセージレイヤはこのように黒く半透明になっています。これを変更する方法については、後で述べます。とりあえず、「システム」→「メッセージを消す」メニューを選ぶか、右クリックをすることで、一時的にメッセージレイヤを消すことができます。

画像
　さて、それでは、タグの説明をしておきましょう。まず、KAG で画像を読み込むためには、image というタグを使います。image タグには、たくさんの属性があるため、別の節を設けて説明しますが、ここでは、storage 属性と layer 属性を説明しておきます。まず、storage 属性は、"読み込みたい画像を指定するための属性" です。タグリファレンス を見れば分かる通り、拡張子（.bmp, .jpg, .png など）は省略することができます。また、layer 属性は、"画像を読み込むレイヤを指定するための属性" です。レイヤというのは、前節でやりましたね。背景レイヤを指定するためにはこの属性に "base" を指定します。つまり、

@image storage=bgimage layer=base

というのは、"bgimage という画像ファイルを背景レイヤとして読み込め" という命令だったわけです。

　もし、背景レイヤの表示が上手くいかなかった場合、


などの可能性があります。もう一度ゆっくり挑戦してみてください。

　今回は、"前景レイヤ" を KAG で表示させてみましょう。

　まず、前述の通り、前景レイヤは複数の枚数を使うことができます。前景レイヤの数を決めるには、laycount というタグを使います。このタグの layers 属性に使いたい枚数を指定します。例えば、前景レイヤを５枚使いたい場合には、

@laycount layers=5

とします。layers 属性に指定する値は、動作の速度などにも関わるので、必要な枚数分だけにした方が良いです。

　前景レイヤを表示するには、背景レイヤと同じく、image タグを使います。対象とするレイヤを決めるには、layer 属性に 0 以上の整数を指定します。layer 属性に指定する値は、

１枚目の前景レイヤ → 0
２枚目の前景レイヤ → 1
３枚目の前景レイヤ → 2

となります。つまり、0 から始まることに注意が必要です。ちなみに、新しく作った前景レイヤは、非表示状態になっているので、visible 属性に true を指定して、表示させる必要があります。

　それでは、早速やってみましょう。まずはやはり、画像を用意する必要があります。画像の用意が面倒な場合は、この画像（←右クリックで "対象をファイルに保存"）をご使用ください。

　画像の用意ができたら、シナリオファイルを、例えば、

@image storage=fgimage layer=0 visible=true

とすれば、１枚目の前景レイヤに fgimage という画像を読み込んで、表示することができます。

画像
　この前景レイヤと前節でやった背景レイヤを同時に表示させるには、

@image storage=bgimage layer=base @image storage=fgimage layer=0 visible=true

などとします。

画像

　さて、前節の画像の表示では、キャラクターの背景部分が表示されていました。

　これを透明にするには、「カラーキー」を使う方法、「αチャンネル」を使う方法、「マスク画像」を使う方法があります。次節からは、これらの方法について、それぞれ説明していきます。

　まずは、カラーキーを使う方法です。
　KAG には、画像を読み込む際にその中の一色を透明にする機能があります。早速やってみましょう。

　カラーキーは、image タグで画像を読み込む際に指定します。image タグの key 属性に、透明にしたい色を 0xRRGGBB 形式で指定 * します。例えば、

@image layer=base storage=bgimage
@image layer=0 storage=fgimage visible=true key=0xffffff

とすれば、前景レイヤ１の白色の部分を透明にすることができます。

画像
　しかし、この方法では、２色以上の透明化や、半透明などの表現はできません。このような場合には、次から述べるαチャンネルやマスク画像の方法を使います。

　KAG では、αチャンネルつきの画像を扱うことができます。