 「そーいえばさー」
 「何だ？」
「『はじめに』の『ＫＡＧの魅力』のとこで、『はいやーえんぶれむ』の画像を使ったアドベンチャーゲームみたいな画面が出てきたよねー？」
「それがどうした？」
「この心中日記ではノベルゲームを中心にやってんけど、あーゆー感じの画面を作りたい人もいんと思うんだなーこれが」
「だから？」
「んだからー、あーゆーアドベンチャーゲームみたいなかっこいー画面の作り方も、教えてほしーんだよねー」
「そうだな。今は一休み中だし、ゲームの本筋とは違った説明をしてもいいだろう。それじゃ今回は、アドベンチャーゲーム風の画面を作ってみようか」
「それがいーもん」
「それじゃ、まずは、どんな画面を作るかを決めよう。一口にアドベンチャーゲームと言ってもいろいろあるからね」
「どんなのがあんのかなー？」
「一例だが、こんなのがある」
| ＦＣ版 |
| オホーツクに消ゆ |
サラダの国のトマト姫 |
 |
 |
| ＳＦＣ版 |
| ファミコン探偵クラブ２〜後ろに立つ少女 |
ＺＥＲＯ４チャンプＲＲ |
 |
 |
「すきゃんてぃの好きな『ぜろほーちゃんぷＲＲ』があんねー」
「それはともかくとして、気づいたことはないか？」
「んーと……」
「ぱっと見た感じ、共通する部分に気づかないか？」
「んーと、絵の出てる部分と、文字の出てる部分と、『移動』とか『見る』とかの命令が出てる部分があんみたい。『ぜろほーちゃんぷＲＲ』にわ、顔の絵と、お金と、ボタンがあんけど」
「そういうことだ。これをＫＡＧで行う場合、それぞれをレイヤーに分けて取り扱うと管理が楽になる。方法は人それぞれだけど、基本的にはこんな感じになる」
| 表示内容 |
ＫＡＧのレイヤー |
名称 |
| ゲームの枠や背景 |
背景レイヤー |
base |
| シナリオテキスト |
文字レイヤー |
message0 |
| コマンド群 |
文字レイヤー |
message1 |
| シーン画像 |
前景レイヤー |
0 |
| キャラクター画像 |
前景レイヤー |
1,2 |
「それはわかったけど、具体的にはぜんっぜんっわかんないもん！」
「それじゃ、まずは簡単な例ということで、『オホーツクに消ゆ』みたいな画面をＫＡＧで構築してみよう」
「どーせやんならもっと凝ったもんがやりたいもんねー！」
「それは、基本がマスターできてからだ。デザインに凝る前に、まずはレイヤーの設定と管理ができるようにならないと話にならんぞ」
「わかったもん。んでもなー」
「んでも、何だ？」
「んでもって、実行すんとどーなんのかなー？」
「こんなふうになる」
「し、しまった。前回のへんてこなカーソルが残っていた……」
「なるほどねー。青い方がいつも使ってる文字レイヤー０で、赤い方は文字レイヤー１になんだねー」
「この色は、あくまでも位置合わせのために過ぎない。イメージ通りにきちんと位置が決められたら、色や透明度はゲームコンセプトに合った形に直して構わない」
「つまり、仮置き、ってやつかなー？」
「そういうこと。最初にこのレイアウトをきっちりとやっておかないと、後で泣きを見るぞ」
「んでもって、次わー？」
「次は、シーン画像をロードしてみよう」
「そーだねー」
「二つの文字レイヤーを配置する前に、本来は右と下にある文字レイヤーに見合った画像のサイズを決めておかなければならない。今回の練習では400×340のサイズでＯＫだ」
*start
[layopt layer=message1 page=fore visible=true]\
[position layer=message1 left=470 top=20 width=150 height=340 color=0xFF0000 opacity=128 marginl=5 margint=5 marginr=5 marginb=5]\
[position layer=message0 left=20 top=380 width=600 height=80 color=0x0000FF opacity=128 marginl=5 margint=5 marginr=5 marginb=5]\
[image storage="scene01" layer=0 page=fore visible=true left=20 top=20]\ |
「ふつーに前景レイヤーに読み込んでんぢゃないの？」
「うん。ただ、left=20 と top=20 で、画像の端を文字レイヤーの位置にきちんと合わせてみた。この方がきれいに見えるからね」
「どんな画面になんのかなー？」
「こんなふうになる」
「んー！ 何だか『あどべんちゃーげーむ』っぽくなってきたぢゃんよもー！」
「だろ？」
「 [current] タグはこんなふうに使ってみよう」
*start
[layopt layer=message1 page=fore visible=true]\
[position layer=message1 left=470 top=20 width=150 height=340 color=0xFF0000 opacity=128 marginl=5 margint=5 marginr=5 marginb=5]\
[position layer=message0 left=20 top=380 width=600 height=80 color=0x0000FF opacity=128 marginl=5 margint=5 marginr=5 marginb=5]\
[image storage="scene01" layer=0 page=fore visible=true left=20 top=20]\
[current layer=message0]\
ぼくは郊外の公園にやってきた。さて、どうしようか。
[current layer=message1]\
移動する
見る
話す
叫ぶ
泳ぐ
ナンパする
[s]
|
「変な選択肢だもん！」
「練習だからいいの。これを実行するとこんなふうになる」
「いろいろ変だもんねー！」
「言いたいことはわかるが、ここではここまでにしておくよ。選択肢がパッと出てこないのは [delay] タグで調整すればいいし、[link] と [endlink] を使ってジャンプできるようにしないといけないが、その辺りを作り込むのは皆さんにお任せしよう」
「んー」
「それと、赤い方の文字レイヤーに表示されるコマンド群は、サブルーチンと数値変数、それから [ignore] タグによる分岐を使って管理すると楽かもしれない。でもそれは、ここではやめておく。またいつか、別にＡＶＧを作る『心中日記』を書くことがあったら、そっちで説明させてもらおうと思う」
「んまー、画面はできたからおっけーとしよーかなー」
「お、何だかお前、エラそうだな」
「んでも、壁紙がないとさびしーなー」
「それじゃ、最後に壁紙の読み込みだけやっておこう。640×480のサイズの壁紙を準備して背景レイヤーに読み込んでおけばいい」
*start
[image storage="wallpaper" layer=base page=fore]\
[layopt layer=message1 page=fore visible=true]\
[position layer=message1 left=470 top=20 width=150 height=340 color=0xFF0000 opacity=128 marginl=5 margint=5 marginr=5 marginb=5]\
[position layer=message0 left=20 top=380 width=600 height=80 color=0x0000FF opacity=128 marginl=5 margint=5 marginr=5 marginb=5]\
[image storage="scene01" layer=0 page=fore visible=true left=20 top=20]\
[current layer=message0]\
ぼくは郊外の公園にやってきた。さて、どうしようか。
[current layer=message1]\
移動する
見る
話す
叫ぶ
泳ぐ
ナンパする
[s]
|
「これはすきゃんてぃも知ってんもん！」
「普通に背景画像を読み込むだけだからね。で、二種類の wallpaper.jpg を使ってテストしてみたのが、下の画面だ」
「壁紙によってゲームのイメージも随分変わるから、この辺りはいろいろと試行錯誤してコンセプトに合うデザインをするといいよ」
「そーだねー」
「それじゃ、そろそろ一休みは終わりにして、ノベルゲーム作りに戻ろうか」
「次わ何やんのー？」
「次はテキストを画面に表示させる時の様々な方法や、特殊文字の表示、それと、プレイヤーがシナリオ文章を読む時に必要ないくつかの機能を解説しよう」
「がんばんもん！」
|