【HSPプログラミング講座#22】多重ループと配列を組み合わせてマップをスプライトで表示する

今回のＨＳＰ言語プログラミング講座は、配列変数の中に入っているマップデータを、多重ループで取り出してスプライト表示させる内容です。　通常のマップデータは数字の塊でなので、◯◯の画像の番号が何番なのかわかりにくいですよね。　今回はこのあたりも工夫して、実際の画面に表示されるマップの映像がイメージしやすいように作っていきます。

その前に、前回までのおさらいをしてから進めていきましょう！

二次元配列の動きを確認する

しばらく二次元配列をやっていなかったので、おさらいをしていきたいと思います。　プログラムの内容としては以下のようなことをします。

１，二次元配列を宣言（準備）する
２，配列変数に値を入れる
３，配列変数に入っている値を確認する

それではレッツ！プログラミングぅ～！！

１行目は配列変数の宣言です。　変数の名前は「map_data」にしました。　横５マス、縦３マスの箱をイメージしてくださいね。

３行目から５行目では配列の中に数字を入れています。　ただ今まで使ったことのない書き方をしているので困惑している人がいるかも知れないので、丁寧に説明していきます。

３行目の、

map_data(0,0) = 10,11,12,13,14

は何をしているかと言うと、横５マス、縦３段の箱をイメージしてください。　その箱の１段目（１番上の段）にある５マスの箱に、順番に10,11,12,13,14の数字を入れています。

もし１行ずつ書いた場合には、

map_data(0,0) = 10
map_data(1,0) = 11
map_data(2,0) = 12
map_data(3,0) = 13
map_data(4,0) = 14

という感じになります。　これを省略して書いたのが３行目です。　４行目と５行目も同じことなので、説明は不要ですかね。

７行目から２４行目までは、単純に配列の中身を表示しているだけです。　本当は多重ループを使って表示しても良かったのですが、頭が混乱しないようにシンプルに１行ずつ書きました。

実行結果は下図のとおりです。

ここまでは配列変数の使い方についてのおさらいをしました。

配列変数をマップに見立てて、スプライトで表示する

それでは本題に入っていきますが、ここでやっていることは「HSPプログラミング講座#20」の「RPGマップ表示してみよう」のときに作ったプログラムを改造して、配列変数を使いマップデータを入れる作業と、多重ループを使って配列変数の中身（マップデータ）を取り出して一気にスプライト表示させています。

これをうまく活用できれば、とても大きなマップデータを視覚的に表現することができると思いますよ。

今回のプログラムは長いので気合を入れて読んでください（笑）

今回のプログラムでは変数がたくさん出現するので、変数の中に入っている数字を意識しながら読み進めて行ってくださいね。

工夫しているのが２１行目から２８行目までの変数の名前ですね（笑）　この変数に入れている数字は、あとでキャラクタ番号としても利用していますからね。

そしてこの変数名を利用して、更に工夫しているのが３５行目から３８行目までの配列変数です。　この配列変数に入れる値は、数字の代わりに変数を使っているので、実際に表示されるマップイメージが湧きやすいと思います。

５４行目から６２行目が今回のプログラムのメイン部分になります。　そして少しややこしくて難しく感じると思います。

まず２重ループしているところは問題ないと思いますが、５回ループを４セット行っていますね。　コレは当然マップの横５マス、縦４マスに合わせているからですよ。

そして「es_set」が一番の難しいろころかもしれません。　４つのパラメータ全てに変数が割り当てられているため、解読しにくくなっていますね。　まず第１パラメータの「sss変数」はスプライト番号を順番に割り当てるための変数です。　５７行目の「sss++」という命令でsss変数の中身の数字が１増えます。なのでループを繰り返す度に１ずつ増えます。　この命令は「 sss = sss + 1 」を省略した命令です。

「 es_set 」の第２パラメータの「xxx変数」はスプライトのｘ座標の位置を指定しています。　１枚のマップチップが６４ドットなので、５８行目でループするたびに６４ドットずらした次の座標をいれています。　この５回のループが終わって、ループを抜けた６０行目で、xxx変数の値を０に戻しているのは、次に回ってくる５回ループのときに、また画面の左側から配置するためですからね！

「 es_set 」の第３パラメータの「yyy変数」はスプライトのy座標の位置を指定しています。　５回のループが終わって、次の下の段の画面を描き始めるときに６１行目でｙ座標に６４ドット分を足していますね。

「 es_set 」最後の第４パラメータは「キャラクタ番号」を指定するところです。　配列変数に入れた「草」とか「山」とかのアレです。 forループで使っている「iとj変数」の変数の移り変わりを見事に利用しています。　i変数が０～４に、j変数が０～３に変化する動きを利用して横５列、縦４段の中身を取り出しています。　ココが大事なポイントなのでしっかり理解してくださいね。

それでは実行結果を見てみましょう！

いかがでしょうか？　配列変数のイメージ通りのマップが表示できましたね。　マップ作成を楽にすることができるので、使ってみてくださいね！

まとめ

今回のプログラミング講座は、二次元配列をうまく利用して、マップのｘ座標とｙ座標に見立てて表現してみました。　またその二次元配列を２重ループを利用して、変数の移り変わりもうまく利用しながらマップデータをキレイに表示することができました。

このようなテクニックを利用することで、巨大なマップでも配列変数の個数と、ループの回数を調整するだけで表現できてしまうので、プログラムがとんでもなく長くなるのを防ぐことができます。

一方でプログラムが複雑になるので「解読が難しくなる」という欠点があります。　プログラマーの中には複雑にするのが得意（笑）な人がいますが、プログラムが大きくなればなるほど、沢山の人達で作り上げていくことになるので、他人にも解読しやすいプログラムにするよう心がけましょう！