Studio ついんくる ||Lesson-Lesson4 レイヤー超入門編||

Lesson4 レイヤー超入門編

レイヤーの使用

今から説明しようとしているレイヤーですが、皆さんはもう使用したことがあります。 前回のソースを思い出してみてください。
[image storage="hogehoge.jpg" layer="base"]
表示させる場所を背景と命令した部分に"layer"と書かれています。 レイヤーとは英語で"層"を意味する単語です。あれ?前回"層"なんて使いましたっけ? 実は知らぬ間に使っていたのです。実はKAG3で表示されるものは全て層になって表示させているのです。

Tip

レイヤーとは画像処理ソフトでよく目にする機能です。 アドビ社のPhotoShopなどが良い例でしょう。 レイヤーの説明など必要ない!という方も多いと思いますが、ここではKAG3のレイヤーの使用方法を お伝えすることになるので、是非お付き合いください。

どんな層なのか?

さて"層"と聞いてもここまで何の意識もせずに文字や背景の表示を行ってきましたし、 いきなり『アレは全て層だったんだ!』といわれて納得できるはずもありません。 そこで左図を見てみてください。6枚の層が確認できると思います。 これがKAG3の標準の状態です。さて私達が表示してきた層はどこの部分なのでしょうか? 私達が文字を表示させた部分は、緑の部分でメッセージレイヤーと呼ばれる層のうち、message0と呼ばれるものです。 このメッセージレイヤーにはもうひとつ同じものが用意されています。図で言う水色の層です。先ほどのmessage0に対してmessage1 と呼ばれます。メッセージレイヤーは命令により自由な数に調節することができます。ちなみにmessage1は標準では存在するけど見えない状態 にされているので存在に気づかなかったのは当然です。
また、私達が背景を表示させた部分はどこなのでしょうか?図の黒い層がそれに当たり、背景レイヤーとされる部分です。 上で示した前回のソースにあるlayer="base"からも分かるようにbaseと呼ばれます。 そのほかに、まだ使用したことの無い前景レイヤーがあり、奥の紫色の層から手前に012と呼ばれています。 前景レイヤーもメッセージレイヤーと同じようにその枚数を自由に調整することができます。


レイヤーの活用

さて、次にそれぞれのレイヤーが受け持つ役割について説明しましょう。 先ほど、レイヤーの種類に背景レイヤー前景レイヤーメッセージレイヤー の3種類が出てきました。これらにはそれぞれ別の役割があって存在しています。では下の表を見てください。
名前役割備考
背景レイヤー背景画像を表示させます。常に1枚のみ存在しているレイヤーです。ソースの中ではbaseと呼ばれます。
前景レイヤー背景画像の上に画像を表示させます。具体的には立ち絵を表示させるレイヤーで、枚数は自由に変更できます。ソースの中では画面奥から0、1、2...と呼ばれます。
メッセージレイヤー文字を表示させます。枚数は自由に変更できます。ソースの中では画面奥からmessage0、message1、message3...と呼ばれます。
この表で、上にあるものは実際では奥に表示され、下にあるものは手前に表示されます。また、不要なレイヤーをむやみに使用することは 完成したプログラムの動作上お勧めしません。レイヤーの数は常に自分が必要な数に調節しておくべきです。

Tip

紙を3枚用意してください。なるべく光が通るものがいいです。 1枚目にあなたの家を描いてください。2枚目にあなたを描いてください。1枚目の上にそれを重ねてください。 さらに3枚目にはあなたの名前を書いてください。それも2枚目の上に重ねてください。 3枚とも重ねられたら、その3枚の紙を太陽にすかして見てください。 3つの絵が1つの絵に変わりました。その一枚一枚の紙がレイヤーです。
今は1が一番下に、2が真ん中に3が一番上に重なっています。その順番は命令によって変更することができます。 それについてはlayoptタグをご覧ください。

レイヤーの表と裏

ここまではレイヤーの種類について説明してきました。そしてそれらのレイヤーには表と裏のページがあります。 表は私達が背景や文字を表示させていたページです。では裏のページとはどこを指しているのでしょう? 実は私達は裏のページを覗くことはできません。だた、レイヤーの一つ一つに表と裏のページが存在していることだけを 覚えておいてください。また、ここではレイヤーに関するタグを説明しません。ひとまずこのページではレイヤーが存在する ということを理解しておくだけでかまわないでしょう。次第にレイヤーを利用したプログラミングを行うことになります。

[次へ進む]

Back to the Lesson([top]>[Lesson]>[Lesson4 レイヤー超入門編])