アイソメトリックでドットのマップタイルを作りたいけど描き方がわからぬ！という人のための描き方講座です。
マップタイルの基本ブロックとなるタイルの描き方は下記の「基本編」で説明しています。
こんな内容だよ
階段の描き方
階段ブロックを作っていきます。
「階段ブロック」の描き方
「前編で作成した段差ブロック」でも階段のように見せることはできますが、階段ブロックも作っておくと表現の幅が広がるのでおすすめです。
まずは段差ブロックをコピペしてもってきます。
上の画像では、坂道ブロックの隣にもってきてみました。
コピペする場所はどこでもいいです。
段差ブロックは、基本となるブロックの高さを８ピクセルだけ低くしたブロックです。
次に、段差ブロックの上面を選択肢、４ピクセル分下に移動させます。
黄色い線で囲った部分あたりを選択範囲にします。
立方体の上面の輪郭線が選択範囲内に入っていればＯＫです。
選択する時は、四角形の選択ツールよりも投げ縄ツールがおすすめ。
下に４ピクセル移動させたのが上の画像です。
これで、８ピクセルの高さだったものを、さらに半分の高さにしました。
基本となるブロックの高さは16ピクセルなので、４分の１の高さです。
４分の１の高さのこのブロックが、階段の段差１ステップ分になります。
次に、この４ピクセルの高さのブロックをコピペして、上に重ねてください。
こんな感じです。
下と上のブロックの輪郭線がきれに重なる位置に重ねると良いです。
そしたら、上に重ねたブロックを以下のように移動させます
- 右方向に４ピクセル
- 上方向に２ピクセル
移動させると、こんな感じになります。
階段っぽくなりましたね！
低めの階段を作りたい場合は、この時点で終わりにしても良きです。
今回は普通の階段ブロックを作るので、「４ピクセルの高さのブロックをコピペ→右と上に移動させる」をあと２回ほど繰り返していきます。
もしくは、今作った２段の階段ブロックをコピペすればらくちんです。
上のは２段の階段ブロックをコピペした画像。
これを右方向に４ピクセル、上方向に２ピクセル移動させると…。
階段がほぼ完成です！やったー！
あとは仕上げです。
まず、36×36のサイズに収まるように削っていきます。
削るのは、上の画像で切り離されている２カ所です。
上の画像では赤い線で36×36に区切られているので、赤い線からはみ出している部分を削ります。
次に、一番上の面に線を引きます。
黄色い線が今引いた線です。
黄色い線が輪郭線になるので、外側のいらない青い色を消し、いらぬ線を消したり引いたりしたら完成！
これをそのままコピペして、左右反転させれば右向き左向きの両方の階段ブロックが出来上がりです。
今回は４段の階段ブロックを作りましたが、調整して３段や２段の階段ブロックを作ることもできます。
壁の描き方
壁として使えるブロックを作っていきます。
「壁ブロック」の描き方
まずは基本となるブロックをコピペします。
基本となるブロックの描き方は「アイソメトリックタイル素材の描き方・基本編」にて解説しています。
コピペしたら、右側の面の輪郭線を含むように選択していきます。
黄色く塗られている面が右側の面と呼んでるカ所です。
黄色い線で囲った部分をざっくりと選択範囲に含んでいきます。
右側の面の輪郭線が選択範囲内に含まれていればＯＫです。
選択できたら、以下のように移動させていきます。
- 左方向に４ピクセル
- 上方向に２ピクセル
移動させると、こんな感じの見た目になります。
次に、反対側も同じように縮めていきます。
右の面と向かい合う、奥の輪郭線を選択範囲に入れます。
黄色い線で囲った部分です。
これも、奥の輪郭線さえ選択範囲内に含まれていればＯＫです。
選択できたら、先ほどと同じように移動させていくのですが、今回は左と上ではなく右と下方向に移動させていきます。
以下のように移動させてください。
- 右方向に４ピクセル
- 下方向に２ピクセル
移動させると、こんな感じの見た目になります。
これで壁の完成です！
位置を調整
このままでは「基本ブロックの中央に配置されている壁」になってしまうので、位置を調整します。
このように、右と下の輪郭線を36×36グリッドに接するように移動させれば、手前側にある壁になります。
逆に、左と上の輪郭線を36×36グリッドに接するように移動させれば、奥側にある壁になります。
それぞれを基本ブロックの上に並べてみると、こんな感じ。
左から、
- 中央に位置する壁
- 手前に位置する壁
- 奥に位置する壁
になってます。
「なめらかな壁」の描き方
半分削れたようなブロックを作っておくことで、直角ではない、なめらかな壁を表現することも可能です。
先ほど作った壁ブロックと組み合わせることで、こんな感じの壁が作れます。
では描いていきましょう。
まずは先ほど作った「奥側にある壁」をコピペします。
上の画像はコピペしてきた図です。
手前側にある壁でも作れますが、今回は奥にある壁で作っていきます。
次に、段差ブロック（高さ８ピクセル）をさらに半分の高さ（４ピクセル）にしたブロックを下部にもってきます。
上の画僧は高さ４ピクセルのブロックを持ってきた図です。
こんな感じに、壁ブロックの下部に置いてください。
私は、段差ブロックを持ってきて、上面を選択し、４ピクセル下に移動させるやり方で持ってきました。
４ピクセルの高さのブロックは、階段ブロックを作った時に使ったものです。
階段ブロックを作った時のものが残って入れば、それを持ってきてもＯＫです。
次に、角から角へ線を引きます。
上のは線を引いた図です。
あとは、いらない線を消して、色を塗れば完成！
じゃん！
傾斜している部分をもう少し減らして、垂直になっている部分を増やしたい場合は、４ピクセルの高さのブロックではなく段差ブロック（高さ８ピクセル）のブロックで描くといい感じになります。
マップタイルの描き方・応用編
基本ブロックの応用編です。
基本ブロックの一部だけがへこんでいるブロックを描いていきます。
「一部だけへこんだブロック」の描き方
まずは基本となるブロックをコピペしてもってきましょう。
コピペしたら、こんな感じで線を引きます。
黄色い線が、今引いた線です。
ひし形のような形になってますね。
線が引けたら、ひし形の下部（黄色い線ではない線の部分）をまるまる選択範囲に含んでください。
そして、下に８ピクセル下げます。
下に８ピクセル下げた図です。
黒と白の線で囲まれてる部分が、選択範囲です。
移動できたら、ひし形の両端の線を結び合わせていきます。
必要な線を書き足して、色を塗ったら完成！
基本ブロックの一部がへこんでいるブロックが完成しました。
合計７種類マップタイル素材の完成！
そんなこんなで、マップタイル素材の完成です！
- 基本ブロック
- 段差ブロック
- 坂道ブロック
- 階段ブロック
- 壁ブロック
- 半傾斜ブロック
- へこみブロック
上記の、合計７種類のブロックを描きました。
あとはこの画像をunityにインポートして、切り分けなどの設定をすればマップを描くだけです。
unityのインポートと設定方法はこっちで説明しています。
ドットでアイソメトリックなゲームを作りたい人のお役にたてたら幸い！
