2016年10月7日

【鼈口飴】見取り図裏側 1/2


こんにちは、しげまろです。
涼しくなって過ごしやすくなってきましたね。
万年暖かいお茶を好んで飲んでいる私にとっては、なかなかいい季節になってきました。

さて、今回は鼈口飴のマップ(見取り図)をどうやって作ったかについて書こうと思います。
HANDはマップ本来の役割を果たせていませんでした。鼈口飴のマップでは二の舞にならないように、うーがと相談しながら作っていきました。
使用したツールは「RPGツクールVX Ace」です。
どなたかの参考になればと思います。

■マップの作り

主人公がマップアイコンの前で決定ボタンを押すと、マップ専用のマップへ移動します。


こんな感じでマップが表示されますが、まぁ、結構情報が多いですね。

このマップには、以下の機能が実装されています。
・矢印キーによるマップの移動
・エンターによるマップ切り替わり
・Xキーによる元画面への遷移
・鍵を開ける前と後のアイコンの変更
・鬼灯を食べる前と後のアイコンの変更
・薬を使った前と後のアイコン変更
・主人公のアイコン点滅

鼈口飴のマップはすべてイベントにて制御しています。
このようにいろいろな画像が表示されていますが、これはすべて「ピクチャの表示」を使っています。

ちょっとマップ制御の裏側を見てみましょう。

こんな感じでかなりシンプルです。イベントは3つ使っています。
お気づきの通り、マップの背景は「遠景」として設定しています。

では左上のイベントの中身を見てみます(めっちゃ汚いですね!)。

結構ごちゃごちゃしているので、はじめから説明してきましょう。

■画像の設置

①ガイドの設置

始めに、マップの切り替えを行っても表示の変わらない、マップ上部を表示します。
これは画像の一番上に表示したいので、ピクチャの番号は一番大きくしておきます。
次に、マップ下部の位置ガイドです。このピクチャ番号は二番目に大きくしておきます(マップ切り替えによる、ガイド画像の変更は後程説明します)。

そうすると、こんな感じになりますね。


②マップの設置

メインのマップの設置をします。これは鍵や鬼灯の下に来るように一番下のピクチャ番号にしてください。
イベントのスクリプトに以下を書いて表示しています。
$mx = -15
$my = -120
$map_page = "entrance"
n="2500_MAP_" + $map_page
screen.pictures[3].show(n,0,$mx,$my,100,100,255,0)
$mx, $my はマップの位置、n には表示する画像名を格納しています。
はじめの1, 2行では $mx, $myに、マップの初期位置を設定しています。
$map_page には "entrance" が代入されていますね。
その後、"2500_MAP_" + $map_page を n に代入しているので、
ここで表示したい画像名は、「2500_MAP_entrance」ということです。

③鍵・鬼灯・薬アイコンの設置

鍵・鬼灯アイコンを設置します。
鍵は鍵を開ける前後、鬼灯は食べる前後にアイコンが変化するので、
初期化する際はすでに鍵が開いているか、鬼灯が食べられているか、薬は使われているかの確認をします。

・鬼灯
n="1900_鬼灯"
x = $mx + 521
y = $my + 389
a = $game_variables[81]==0 ? n + "2" : n
screen.pictures[5].show(a,0,x,y,100,100,255,0)
n に画像の共通の名前を入れています。
x, y には、各鬼灯アイコンの初期位置を入れています(521, 389 という値はマップの位置からの距離です)。

その後、表示する画像名を設定するのですが、ここで鬼灯を食べたかどうかを判定します。
(鬼灯を食べる判定は "$game_variables[81]==0"の部分ですね)
ここでは鬼灯食べ終わっている場合は後ろに 2 を足してあげています。
最後に、マップと同じように、ピクチャ表示を行っています。
正直なところ、a に代入する処理はそのまま show() の中の a の部分に入れれば良いのですが、いかんせん、イベントのスクリプトに書ける幅が狭いので……(あと、 a とか n とかめっちゃ適当な変数名使っていてスマンです)。

鍵と薬も大体同じです。

④主人公アイコンの設置

最後に主人公アイコンを載せる……のですが、点滅する処理を入れるときに一緒に説明します。
(表示させるだけなら、これまでのピクチャ表示と同じです)


以上のピクチャの表示は、イベントの「自動実行」により行います。
ピクチャ表示終了後は、セルフスイッチでページを切り替えます。

ここまでの処理で見た目上はマップとして出来上がります。
しかしながら、マップが画面をはみ出した場合は、矢印キーでマップを動かしたいですね。

ということで、矢印キーによる移動を実装してきます。

■画像の移動

キー入力はさっきの画像表示後に受け付けるので、同じイベントの次のページに設定することにしましょう。キー入力を受け付ける必要があるので、イベントのトリガーを「並列処理」に設定します。


ループ+ウェイトの処理については、以下を参考にしています。
並列処理を使おう - ペンギンの寝床様


方向キーの入力

まずは受け入れるキーの設定ですね。
条件分岐で、対象のキーが押下されているとき処理がされるように設定します。

ここで、条件に当てはまらない場合を設定せずそれぞれ受け付けている理由は、マップの斜め移動を許すためです。方向キー同時押しによる干渉をさせたくない場合は、条件に当てはまらない場合にチェックを入れて分岐させましょう。

さて、それぞれのキー押下した場合の中の処理が記載されています。
一番上の処理に着目してみましょう。条件分岐の中に、左キーを押下したとき $mx に 10 足す処理を行っています。

これだけですと、単純に $mx に 10 足しているということになりますが、ボタン押下処理の後にピクチャ描画処理があります。
n="2500_MAP_" + $map_page
screen.pictures[3].show(n,0,$mx,$my,100,100,255,0)
上記の $mx, $my はマップの位置です。
つまり、 $mx に 10 足すということは、マップ画像をx軸方向に +10 するという意味になります。
このように、各キーそれぞれに移動したい方向に距離を足した後、画像を表示すればキーに寄る画像移動が可能になります。

しかし、このままの処理ですと方向キーを押下していないにも関わらず、何度もピクチャの描画されてしまいます。できれば、ピクチャの表示されている座標と、$mx, $my の値が異なる場合のみ再描画したいですね。

ということで、こんな風に分岐処理を入れてあげます。

あらかじめ、「■画像の設置」の時点で、画像位置($mx, $my と同じ値)を $temp_x, $temp_y に格納しておきます。そして、元の位置($temp_x, $temp_y)から $mx, $my の値が変わっているか判定をします。
値が変わっている場合はピクチャを再描画し、その時の $mx, $my の値をまた $temp_x, $temp_y へ格納しておきます。
こうすることで、値が変わったときだけピクチャ表示を実行することができます。

同様に、方向キーによりアイコン画像も移動するので、マップ表示の位置にアイコン表示処理を入れます。

とりあえず、ここまでで方向キーによりマップが移動するという機能は実装できました。
次はマップの切り替えと主人公アイコンの点滅、Xキーによる元画面への遷移について書きます。


(しげまろ)