ScratchプログラムでRPGのマップを生成したい

• まずはマップチップを準備する
• マップデータを作る
• テキストデータかきだし、よみこみ
• マップ生成プログラム
• まとめ

まずはマップチップを準備する

マップチップというのは、マップを構成[こうせい]する1マスあたりの画像[がぞう]のことです。

こういうお城[しろ]とか、草原の画像[がぞう]です。

これを好[す]きなだけ用意します。
今回は、草原・海・森・山・お家[うち]・お城[しろ]など主要[しゅよう]なマップチップを 17種類[しゅるい]用意しました。

今回このサンプルを使って説明[せつめい]していくので
必要[ひつよう]なかたはこの画像[がぞう]をダウンロードしておいてください。

こういう素材[そざい]は、公開している方がたくさんいるので探[さが]しやすいと思います。

素材サイト：ぴぽや
素材サイト：ねくらマップチップ
その他リンク集

素材[そざい]のほとんどはpngやbmpなどの画像[がぞう]形式で
たくさんのマップチップが一つの画像[がぞう]にまとめられていますので
画像[がぞう]分割[ぶんかつ]ソフトなどを使って分割[ぶんかつ]したあと、Scratchにとりこみます。

分割ソフトはPL_ImageConstructorとかがおススメです。

以前「RPGのキャラをプロジェクトに追加しよう」という記事で
ImageSplitterというwebサービスをつかって画像を分割する方法を紹介しています。

今回は、拡大[かくだい]縮小[しゅくしょう]してもキレイになるように
ぴぽやのマップチップをもとに、ベクター画像[がぞう]で作りました。

https://scratch.mit.edu/projects/108698843/

マップデータを作る

マップデータは、何でもいいのですが今回は「CSVデータ」というものを使ってみましょう。
CSVとは「コンマセパレートバリュー」の略[りゃく]で、コンマ（,）で区切られたデータのことです。

たとえば
このマップチップを「１」
このマップチップを「2」
というように、マップチップに数字をわりあてておき

1,1,1,1,1
1,2,2,2,1
1,2,2,2,1

というデータをもとにマップを作ると


このようなマップになるのです。イメージができましたか？

さて、自分でポチポチ数字を打っていくのでも良[よ]いのですが
せっかくなのでなにかツールを使ってみましょう。

フリーソフト「マップエディターQuoyle」というソフトはpng画像[がぞう]を扱[あつか]え、
マップチップを並[なら]べるエディタ機能[きのう]と、テキストデータの書き出し機能[きのう]があります。

ダウンロードして、zipファイルを好[す]きな場所に展開[てんかい]しましょう。
中に「Quoyle.exe」がありますのでこれを起動します。



最初[さいしょ]は、よくわからないウィンドウがでて戸惑[とまど]うかもしれませんが
順番[じゅんばん]に設定[せってい]していきましょう。

まずは「マップデータ設定[せってい]」のアイコンをクリックしてみましょう。




こんな画面が開きます。
今回は、マップチップのサイズが32*32なので
「マップサイズX：15　Y：12」
「チップサイズX：32　Y：32」　に設定[せってい]します。

次にマップチップの画像[がぞう]パスを設定[せってい]します。「参照[さんしょう]」ボタンをクリックして

先ほどダウンロードしておいたmap.pngの画像[がぞう]をえらびます。
ここで、自分で用意した画像[がぞう]を使いたい時はそのマップチップの画像[がぞう]を選[えら]んで下さい。

本体設定[せってい]はとくにいじらなくてもいいですが ウィンドウのサイズなどを決められます。
また、初期化[しょきか]用チップの設定[せってい]を確認[かくにん]しておきましょう。

マップチップの一番左上のマスが空欄[くうらん]になっていますので
これを初期化[しょきか]用チップに設定[せってい]します。0番にしておきます。


設定[せってい]ができたらマップを作ってみましょう。

塗[ぬ]りつぶしモードをえらんで、パレットから草原をクリックします。
配置[はいち]ウィンドウをクリックすると、全体が草原になりました。



つぎに、ペンモードを「ノーマル」にもどして
パレットから水のチップをえらび、海や川にしたい部分をぬっていきましょう。
これで、ベースの地面の部分ができました。


つぎは、木や山などのオブジェクトを置[お]いていきましょう。

オブジェクトは、地面の上に置[お]きたいので、レイヤーを分けましょう。
レイヤーの「追加[ついか]」ボタンを押[お]すと、レイヤーリストに「layer-2」というレイヤーがふえます。
これをクリックして選[えら]ぶと、マップのうえにオブジェクトを重ねることができます。




こんなかんじになりました。
オブジェクトのフチが白くなっていますが
Scratch上で配置[はいち]するときにはなくなりますので、気にしなくても大丈夫[だいじょうぶ]です。


マップデータができたら、いったん保存[ほぞん]しましょう。

ファイルから「名前を付けて保存」をえらんで・・・



名前はなんでもOKです。（拡張子[かくちょうし]が自動でつかないので、○○.qmpのように拡張子[かくちょうし]つきで保存[ほぞん]）
今回は「scratch_world.qmp」としました。

保存[ほぞん]したら、このソフトを終了[しゅうりょう]させましょう。

テキストデータかきだし、よみこみ

作ったマップデータを、テキストデータにコンバート（変換[へんかん]）しましょう。


Quoyleと同じフォルダのなかに「Converter.exe」というファイルがありますので
これをクリックして起動します。


先ほど作ったマップデータ「○○.qmp」ファイルをこの画面にドラッグ＆ドロップするか
「QMPファイルを開く」から、開きます。

保存[ほぞん]先は、デフォルトがQuoyleのフォルダになっています。
保存[ほぞん]先を変[か]えたい時は、「保存[ほぞん]先」ボタンからえらびます。

変換[へんかん]形式を「txt形式」にします。

さいごに「コンバート開始」のボタンをおすと、変換[へんかん]してくれます。


変換[へんかん]がおわったら、できたファイルを開いてみましょう。
qmpファイルと同じ名前.txtで保存されています。


テキストの中身はこんなかんじです。
このままだと、文字データも入っているので
マップデータのみにしていきましょう。


まず、レイヤー１のデータ部分だけを選択[せんたく]し
右クリック→「コピー」します。（Ctrl+CでもOK）




コピーしたら、「ファイル」→「新規[しんき]」をえらんで



「右クリック」→「貼[は]り付[つ]け」（Ctrl+VでもOK）
で、コピーしたデータをはりつけます。

はりつけたら、「ファイル」→「名前を付けて保存」で保存しましょう。
ファイル名は何でもいいですが
地面のデータだとわかるようにしましょう。
今回は「map.txt」としました。

同じ要領[ようりょう]で、今度は、レイヤー２のデータも
あたらしいファイルにコピーして保存しましょう。
こちらはオブジェクトのデータですので「obj.txt」としました。

データができたら、Scratchにデータを読[よ]み込[こ]んでみましょう。
まず、データを保存[ほぞん]しておくリストを用意します。

今回は、マップとオブジェを別々[べつべつ]に作ったのでふたつ用意しました。
読[よ]み込[こ]みたいリストにチェックをいれて
ステージに表示[ひょうじ]させておきましょう。



ステージに表示[ひょうじ]させた「マップデータ」のリストを右クリックし
「読[よ]み込[こ]み」というメニューをクリックします。


先ほど作った「map.txt」をえらびます。


こんなかんじで取[と]り込[こ]まれます。
１２行目の最後[さいご]のコンマがないので、ここで追加[ついか]しておきます。
（map.txtのほうで最後[さいご]のコンマを入れると、取[と]り込[こ]みのときにカラム指定モードになってしまうので
こうしてます。プログラムのほうで例外[れいがい]処理[しょり]を入れてもいいかと思います。）


マップデータを追加[ついか]したいとき（２枚目[まいめ]以降[いこう]のマップをリストに追加[ついか]したいとき）は
map.txtのほうにマップデータを追加[ついか]して、 再度[さいど]Scratch上で取[と]り込[こ]みという処理[しょり]になります。
（前のリストに追加[ついか]で取[と]り込[こ]みはできない）

オブジェのほうも同じように、取[と]り込[こ]みをしましょう。

マップ生成プログラム

データができたら、いよいよマップを配置していきましょう。

こちらのプロジェクトから
スクリプトの中身をみてみましょう。
https://scratch.mit.edu/projects/108698843/#editor


描画[びょうが]の順番[じゅんばん]は、マップ→オブジェクトです。
マップのスクリプトがこんなかんじ

定義[ていぎ]ブロックをつかっています。
変数[へんすう]「i」がタテ方向のループを担当[たんとう]
変数[へんすう]「ｊ」がヨコ方向のループを担当[たんとう]しています。


コンマがくるまでは変数「コスチューム」のなかにデータをためていき
コンマがきたら、コスチュームをかえてスタンプしています。


この定義[ていぎ]ブロックは、オプションの 「画面を再描画[さいびょうが]せずに実行する」にチェックを入れておきます。

こうすると定義[ていぎ]ブロックの処理[しょり]が終わるまでは再描画[さいびょうが]されないので
マップの描画[びょうが]が一瞬[いっしゅん]で終わります。


オブジェの描画[びょうが]も、マップとほとんど同じです。


オブジェの場合は、スタンプしない部分（データが0のところ）があるので
「0じゃなければスタンプ」のようにしています。

さらに例外[れいがい]処理[しょり]として、コスチュームがお城[しろ]だった場合
（これはスタンプする素材[そざい]がベクターなのでできることですが）
ちょっと大きくしてスタンプしています。
塔[とう]も大きくしてもいいかもしれませんね。

マップ→オブジェの順番[じゅんばん]に描画[びょうが]できるように
「0秒まつ」でオブジェのほうの描画[びょうが]を少し遅[おく]らせています。

これで旗[はた]を押[お]して実行してみましょう。

キレイに表示することができました。

表示[ひょうじ]がずれてしまうときは、データの１２行目の最後[さいご]にコンマが入っているか
ループの回数がおかしくないか、列と行をまちがえていないか
など確認してみて下さい。

まとめ

今回は、CSVデータを作る→読んでいく方法[ほうほう]を紹介[しょうかい]しましたが

マップ画像[がぞう]をステージ分用意するのと
マップチップをデータ通りに並[なら]べていくのと、どちらの方法[ほうほう]がいいかは
そのゲーム次第[しだい]です。

マップが少なければ、大きい画像[がぞう]１枚[まい]を表示[ひょうじ]する方がいいでしょうし
たとえば主人公が動くのにあわせてマップが動くようなゲームの時は
マップチップのほうが描画[びょうが]しやすいですね。


自分が作りたいゲームにあわせて工夫してみて下さいね。