マップチップとは(プログラムでマリオを作る第10回)

マップチップの概念説明

ゲームの背景とオブジェクトを描画するためにマップチップと呼ばれる概念を使用します。
今回は、概念の解説をします。

動画の解説

今回は、マップチップを使った背景の描画をしたいので、その概念説明をします。
2Dゲームの背景ですが、一枚絵で描画するのでなく、マップチップと呼ばれる
パーツを配置することにより一枚の背景を描画します。

マップチップ画像に遷移する

使用するマップチップはこの画像になります。
これらのパーツを並べて一枚の絵にして描画します。

描画ツールの説明

マップチップを表示するためのツールとして、macでは、
Tiledというツールがあるので、今回はこれを利用します。

まず、新しいファイルを選択して、ファイルを作成します。
サイズは640*480にします。

Tileの大きさを32 * 32にして、幅20 * 高さ15にします。
出力形式をcsvにします。

次に、マップチップの読み込みを行います。

新しいタイルのセットをクリックして、パスに先ほどの画像をセットします。
すると、画像が表示されるので、これを使ってマップを作っていきます。

マップを作る

こんな感じでマップを作ったら次にセーブをします。
ファイルから名前をつけてエクスポートを選択します。

すると、csvという拡張子の形式でファイルを保存することができます。
stageという名前で保存します。

csvの中身に関しての説明

先ほど作ったcsvの中身を見ていきます。

みるとわかるようにcsvファイルは文字列ごとにカンマで区切られた形式になります。
この数値がマップチップの番号になっています。

ゲームで背景を描画する時は、この番号を元にしてマップチップの位置を切り抜いて描画していきます。

実際Tileを見て見ると、左下に番号が振ってあるのがわかると思いますが、
これが、csvファイルに記載された番号になっています。

一番左上のマップチップには、0が振ってあり左上から右下までが0から加算される
形で番号が振り当てられています。

次回はこの番号を使用してマップチップの描画をしたいと思います。