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