アイソメトリックでドットのマップタイルを作りたいけど描き方がわからぬ！という人のための描き方講座です。
こんなマップチップがドット絵で作れるようになるよ。
- 普通のタイル（地面部分）
- 段差タイル（半ブロック）
- 坂道ブロック
- 階段ブロック
- 壁ブロック
- 半分だけ傾斜してるブロック
- 一部だけへこんでるブロック
作り方を知りたいんじゃ！っていう人はもくじの「基本のマップタイルの描き方」の項目から読んでね。
こんな内容だよ
アイソメトリックとは
アイソメトリックとは、簡単に言うと立体的でありながら遠近法（遠くのものが小さく見えて、近くのものが大きく見える）の見え方のしない製図方法のこと。
「パースを揃えて描く方法」とも言ったりします。
アイソメトリックは「アイソメトリック・プロジェクトション（Isometric Projection）」を略した言い方で、日本語では「等角投影法」と呼ばれています。
アイソメトリックの描き方は「直角に交わる3つの軸の角度がそれぞれ120度になるように描く」です。
アイソメトリックは、ゲームはもちろん、ボタンやアイコンなどにも使われることがあります。
用意するもの
アイソメトリックのマップタイルを自作するのにあたって、今回使うツールはこれ。
これが絶対必要！ってわけでないです。参考までに。
- EDGE2（ドット専用のお絵かきソフト）
- Unity（作成したドット素材を実際に使う場所）
- マウスorペンタブ（ドット絵を描くための道具）
ドット専用のお絵かきソフト
ドットイラスト専用のお絵かきソフトは、EDGEやAsprintなどなんでもいいです。
クリップスタジオでも描けないこともないとは思いますが、おすすめはピクセルアート（ドット絵）に特化したイラストソフトです。
今回使用するのはＥＤＧＥ２というドット絵専用のイラスト描画ソフトです。
「上部のメニューバーの～」などの操作方法はＥＤＧＥ２の画面で説明していきます。
Unity
今回作成したマップタイルはunityにインポートしていきます。
unityとは、ゲームを制作するためのソフトです。
ゲーム制作ソフトなので、WOLF RPGエディターとかツクールVX Aceなどなどと同じジャンルのソフトです。
アイソメトリックのマップタイルをインポートする方法はこっちで解説してるので、インポート設定がさっぱり分からぬ！という方はどうぞ。
【初心者向け】アイソメトリックのマップの作り方１：インポートと設定【Unity】
今回は、マップタイルをunityにインポートして、unityで実際に使うことを前提に説明していきます。
unityで使う予定のない人はそこらへんの説明は読み飛ばしてくださいませ。
マウスorペンタブ
今回マップタイルを制作するにあたって、私はマウスを使ってます。
マウスでもペンタブでも、ここはお好みで。
コピペや直線ツールだけでマップタイルを描くことができるのでマウスを使ってますが、キャラクターや木などの丸いもの、複雑なものを描く時はペンタブを使うことが多いです。
マップタイルを描くための準備
マップタイルを描く前に、準備をします。
やることはこのふたつ。
- キャンバスの新規作成
- グリッドの表示設定
とくにグリッドの設定はわりと大事な準備だったりします。
キャンバスを新規作成
新規キャンバスを作成します。
キャンバスのサイズは、とりあえず「ヨコ256×タテ128」で。
もっとタイルを描きたい！となったらあとでサイズを大きくしてunityにインポートしなおしてもいいのかもしれないですが、unity側で試してないのでなんともいえないです。
（これは完全に余談ですけど、なんの根拠もなしにあまり１枚の画像に全てのマップタイルを詰めないほうがいいのか…？とも思ったりする）
あとでキャンバスサイズを大きくしたい場合
あとでキャンバスサイズを大きくしたい場合は、タテにもヨコにも32ピクセルずつ増やしていきます。
というのも、今回作るアイソメトリックのブロックは、１個が32×32のサイズだからです。
ブロック１個単位でキャンバスサイズも広げていくとあとあとめんどくさくないです。
下手にキャンバスサイズを変えてしまうと、あとでunityにインポートした後の「切り分け」の作業がめんどうになるので注意。
ちなみに切り分けとは、１枚の画像の中に複数の素材を詰め込んでいる時に行う必要がある作業です。
１枚の画像内で、どこからどこまでが素材１個分なのかをunityに教えてあげるのです。
グリッドを表示する
キャンバスが作成できたら、グリッドを表示させます。
グリッドは、マップタイルを描く上で目印になる線です。
グリッドがないと、タイルのピクセルがうっかりズレる…なんてことが起こるかもしれません。
上部メニューバーの「表示→グリッド＆編集単位一発変更→登録・編集」からアイソメトリック用のグリッドの登録をします。
設定項目
- 中グリッド：16×16
- 大グリッド：32×32
ラベル名、色はお好みで。
編集単位もお好みで、です。
16×16と32×32にしてもＯＫ。
編集単位を16×16と32×32などのグリッドに合わせた数値にしておくと、32×32ピクセル単位での移動が楽になったりします。
ＯＫボタンを押すと、キャンバスにグリッドが表示されます。
こんなかんじ。
赤、白、黒と線が表示されてます。
これがグリッドです。
それぞれの線の説明をしていきます。
白い線：中グリッド「16×16」
マップタイルを描く時に目印にするためのグリッドです。
このグリッドの表示は必須です。
このグリッドに合わせてアイソメトリックのマップタイルを描いていくからです。
グリッドは一種類しか表示できない！という場合は、「16×16」のグリッドを表示させてください。
そもそもグリッドの表示なんてできないんだけど！という場合は気合いで「16×16」のマスを自作で描いてください。
1ピクセルずつぽちぽち描いていく、をタテヨコ16回ずつやると完成します。
赤い線：大グリッド「32×32」
マップタイルひとつ分を表しています。
赤い線の中に、いっこのマップタイルがくるイメージです。
なので、unityにインポートしたあとはこの赤い線で切り分けします。
大グリッドは表示しなくても問題ないです。表示するかしないかはお好みで。
私は分かりやすくなって助かるので表示しています。
32×32のグリッドを表示しておくと、unityにインポートした時に位置がずれてブロックがぶつ切りになってしまった！直さねば！という現象を回避できます。
（unityにインポート後、32×32で切り分けするため）
黒い線：１ピクセル
黒い線は、「１ピクセル（１マス）」を表しています。
ＥＤＧＥでは、この黒い線はキャンバスを縮小すると見えなくなります。
キャンバスを拡大すると表示されます。
表示、非表示どちらでもお好みでですが、表示しておいたほうが分かりやすいです。
基本のマップタイルの描き方
グリッドが表示できたら、いよいよマップタイルを描いていきます。
まずは基本となるブロックを描きます。
なぜ基本のブロックと呼んでるかというと、坂道や段差ブロックはこの基本のブロックをコピペして描いていくことになるからです。
描き方の流れをざっくりと書くと、こんな感じ。
- 輪郭となる線を引く
- コピペして上下反転し、上面完成
- さらにコピペして、下面も完成させる
- 角から角へと線を引く
- 色を塗って完成！
これだけです。
絶対こうじゃないといけない！ということはないです。
こんな描き方もあるよ～程度にみていただけたら幸い。
立方体の線を引く
まずは直線ツールを使って、線を引いていきましょう。
分かりやすくするために背景に色をつけてます。
水色の線が、描くべき線です。
「ペン」ではなく「直線ツール」で描いていきます。
１と書いてある部分が出発点です。
16×16マスの、一番右上、内側部分になります。
16×16の外側ではなく内側を描き始めとしてください。
次に、２と書いてある辺のところへ向けて線を伸ばします。
この時、「線が２ピクセルずつ」になる位置を探してください。
上の画像の青い線を見ると、それぞれの段差が２ピクセルずつで描かれているのが分かります。
反対側も同じように描く
１本、線が引けたら、反対側も同じように線を引きます。
こんな感じ。
ここまできたら、もうほとんど完成です。
あとは、青い線部分をコピーしてペーストし、上下反転させます。
コピペして上下反転させる
青い線部分をコピーしてペーストし、上下反転させたら、こんな感じの線ができあがります。
黄色い線で囲っている部分がコピーした範囲です。
この部分をコピーし、ペーストして、上下反転させたあと、矢印の位置に置きました。
上下反転は、上部メニューバーの「イメージ→上下反転」もしくは「ペーストした部分を右クリック→上下反転」からできます。
これでマップタイルの上の面が完成！
この部分がキャラクターが歩いたり走ったりする部分になります。
下のマスへとコピペする
立方体のブロックにするために、もう一回コピペ作業をします。
青い線全体をコピーペストして、下のまだ何も描かれていないマスへとそのまま移動させます。
移動させたら、こんな感じになります。
これも先ほどとおなじく、黄色い線で囲った部分をコピペし、矢印の位置へと移動させてます。
これで上の面と下の面が完成！
角の線を引く
角の線を引いて、より立方体らしくしていきます。
引く線は３本。
黄色い矢印が指し示している３本の線を引きました。
一気に立方体っぽくなりましたね！
ちなみに、真ん中の線は左寄りの16×16マスの内側に引きましたが、左寄りでも右寄りでもどっちでもいいです。
どっち寄りに引いても、あとで困ることはないです。
色を塗って完成！
あとは奥の線を消し、立方体に色をつけたら完成です！
アイソメトリックブロックの完成！
線の色は濃い青に変えてます。
線がくっついてて気になる？
これは余談なので読み飛ばしても大丈夫なのですが…。
下の画像で黄色く囲った部分（線が重なってしまう部分）が気になる人もいるかもしれません。
特に左上の線が重なって４マス分にもなっている部分は、気になる人は気になるのではないかなと。
- 線が重なって４マス分もとってるところ（左上の黄色い枠）
- １ピクセル削りたくなる角の直角な線（左下の黄色い枠）
- 中央に引くことができない真ん中の線（中央下の黄色い枠）
これらの線は、直したりせずにそのままで大丈夫です。
というか、そのままにしておいたほうがいいです。
というのも、のちのち段差や階段、坂道を描く時にこの輪郭線に合わせて描くため、輪郭線をへたに直してしまうとunityでマップタイルを並べた時にピクセルが合わずガタガタになりかねないからです。
マップタイルを並べた時のピクセルの兼ね合いを調整できる人はバリバリ線をいじっても大丈夫ですが、分からぬ人はいじらないでそのままにしておくのがベストです。
段差ブロックを描く
基本となるブロックが描けたら、段差ブロックを作るのは簡単です。
コピペ＆移動だけで作れます。
まずは、先ほど描いた基本となるマップタイルをコピーして、隣にそのままペーストします。
次に、コピペしたブロックの「上面」部分を選択します。
黄色い枠で囲った部分です。
サイズでいうと16×32です。
選択したら、８ピクセル分、下方向に移動させます。
移動させるとこんな感じに。
これで段差ブロックは完成！
なぜ「８ピクセル」なのかというと、今回は高さ16ピクセルでアイソメトリックのブロックを作ってるからです。
16を２で割ると８になります。
なので段差ブロックは、基本となるブロックのちょうど半分の高さになるということです。
８ピクセルだけ下方向に移動させることで、unity上でマップを描画するときに違和感なくマップタイルを敷き詰めることができます。
このあと階段ブロックも作成していきますが、めんどうな場合はこの段差ブロック（ハーフブロック）でも階段のように扱えたりします。
マインクラフトでいうハーフブロックと同じイメージです。
坂道を描く
では、次に坂道を描いていきます。
はじめに、一番最初に作成した基本となるブロックをコピーしてペーストします。
下のは基本となるブロックをコピペした画像。
位置はどこでもいいです。
今回は段差ブロックの隣にペーストしました。
コピペできたら、ブロックを削っていきます。
今回は大体45度くらいの角度の階段を作っていきます。
以下はざっくりと削った図。
あとで調整するのでざっくり削ってあればＯＫです。
（正直、削る工程は必須ではないですが、分かりやすいのでおすすめ）
ポイントは、黄色い枠で囲ってある箇所。
この黄色い枠で囲ってある部分を直線ツールで結びます。
なので、この線は消さないように注意！（消しちゃっても描きなおせばＯＫですが）
削れたら、線を引きます。
黄色い線が、新しく引いた線です。
ちょっと分かりづらいかもなのであえて黄色い線で引いてみました。
この線は、傾斜を表す線です。
反対側も、同じように傾斜の線を引いていきます。
まずは削ります。
こんな感じ。
削っただけですが、もうなんとなく坂道っぽく見えてきましたね。
ここでもポイントなのは、輪郭線を消さないこと。
削るのは内部の線や色だけです。
そして、線を引きます。
黄色い線が、引いた線です。
これに色を塗れば坂道ブロックの完成！
色を塗って、コピペして左右反転させれば右向き左向きの坂道ブロックの完成です。
後ろ向き坂道ブロックを描く
このままでは前に向いている坂道ブロックしかないので、後ろ向きの坂道ブロックも作ります。
まずは基本のブロックをコピペして持ってきましょう。
坂道ブロックではないので注意！
以下は基本のブロックをコピペしてきた図。
左下にもってきました。
坂道ブロックを作った時と同じ手順です。
まずは削っていきます。
削りました。
大事なのは黄色い枠で囲った部分！
特に右下と真ん中の黄色い枠内が重要です。
この２カ所を基準に線を引くからです。
左上の黄色い枠は、輪郭となる角の線なので削りすぎないように慎重に…の意味で大事です。
線を引いていきます。
黄色い線が今引いた線です。
これで完成！
あとは、コピペして左右反転させれば坂道の背面の左右どちらも完成です。
坂道ができあがりました！やったね。
並べた時の違和感を確認する
完成したはいいけど、いざ並べてみたらどこか違和感が…？
といった現象を回避するための確認方法です。
まず、こんな感じにコピペして並べます。
次に、「上になっている坂道ブロック」を下方向に８ピクセル移動させます。
この画像では左側にある坂道ブロックですね。
８ピクセル移動させると、こんな感じになります。
これが、実際にunityでマップを作成したときの見え方です。
このままだと、坂道ブロックを並べた時の線が２重になってしまっています。
縮小すれば気にならないぜ！という場合はこのままでもＯＫです。
私は気になるので、この２重線になる現象を修正します。
まず、坂道ブロックの傾斜、外側に向いている輪郭線を全て選択し、１ピクセル分前方に移動させます。
上の画像でいうと、→の方向です。
上の画像はずらしたあとの状態。
次に、ピクセルをずらした分、加筆修正します。
加筆修正した状態の画像です。
上の画像ではグリッドからずれてますが、これで32×32マスにおさまっています。
これで２重線になる現象が直っているはずです。
加筆修正した坂道ブロックをもうひとつコピペして、８ピクセルだけ下にずらして確認して見ましょう。
じゃん！
先ほどとちがい、もう坂道ブロックが隣り合ってる部分の線が２重になっていません！
この線の重なり具合が気に入らぬ！という場合は１ピクセルずつ手直ししてもいいと思います。
加筆修正したこの坂道ブロックで上書きしておきましょう。
修正した坂道ブロックがこちら。
修正前と比べると、傾斜部分の外側の輪郭線が１ピクセル分前方に増えているのがわかります。
階段を描く
階段ブロックを作っていきます。
先ほど作成した段差ブロックでも階段のように見せることはできますが、階段ブロックも作っておくと表現の幅が広がるのでおすすめです。
まずは段差ブロックをコピペしてもってきます。
上の画像では、坂道ブロックの隣にもってきてみました。
コピペする場所はどこでもいいです。
段差ブロックは、基本となるブロックの高さを８ピクセルだけ低くしたブロックです。
次に、段差ブロックの上面を選択肢、４ピクセル分下に移動させます。
黄色い線で囲った部分あたりを選択範囲にします。
立方体の上面の輪郭線が選択範囲内に入っていればＯＫです。
選択する時は、四角形の選択ツールよりも投げ縄ツールがおすすめ。
下に４ピクセル移動させたのが上の画像です。
これで、８ピクセルの高さだったものを、さらに半分の高さにしました。
基本となるブロックの高さは16ピクセルなので、４分の１の高さです。
４分の１の高さのこのブロックが、階段の段差１ステップ分になります。
次に、この４ピクセルの高さのブロックをコピペして、上に重ねてください。
こんな感じです。
下と上のブロックの輪郭線がきれに重なる位置に重ねると良いです。
そしたら、上に重ねたブロックを以下のように移動させます
- 右方向に４ピクセル
- 上方向に２ピクセル
移動させると、こんな感じになります。
階段っぽくなりましたね！
低めの階段を作りたい場合は、この時点で終わりにしても良きです。
今回は普通の階段ブロックを作るので、「４ピクセルの高さのブロックをコピペ→右と上に移動させる」をあと２回ほど繰り返していきます。
もしくは、今作った２段の階段ブロックをコピペすればらくちんです。
上のは２段の階段ブロックをコピペした画像。
これを右方向に４ピクセル、上方向に２ピクセル移動させると…。
階段がほぼ完成です！やったー！
あとは仕上げです。
まず、36×36のサイズに収まるように削っていきます。
削るのは、上の画像で切り離されている２カ所です。
上の画像では赤い線で36×36に区切られているので、赤い線からはみ出している部分を削ります。
次に、一番上の面に線を引きます。
黄色い線が今引いた線です。
黄色い線が輪郭線になるので、外側のいらない青い色を消し、いらぬ線を消したり引いたりしたら完成！
これをそのままコピペして、左右反転させれば右向き左向きの両方の階段ブロックが出来上がりです。
今回は４段の階段ブロックを作りましたが、調整して３段や２段の階段ブロックを作ることもできます。
壁を作る
壁として使えるブロックを作っていきます。
まずは基本となるブロックをコピペ！
コピペしたら、右側の面の輪郭線を含むように選択していきます。
黄色く塗られている面が右側の面と呼んでるカ所です。
黄色い線で囲った部分をざっくりと選択範囲に含んでいきます。
右側の面の輪郭線が選択範囲内に含まれていればＯＫです。
選択できたら、以下のように移動させていきます。
- 左方向に４ピクセル
- 上方向に２ピクセル
移動させると、こんな感じの見た目になります。
次に、反対側も同じように縮めていきます。
右の面と向かい合う、奥の輪郭線を選択範囲に入れます。
黄色い線で囲った部分です。
これも、奥の輪郭線さえ選択範囲内に含まれていればＯＫです。
選択できたら、先ほどと同じように移動させていくのですが、今回は左と上ではなく右と下方向に移動させていきます。
以下のように移動させてください。
- 右方向に４ピクセル
- 下方向に２ピクセル
移動させると、こんな感じの見た目になります。
これで壁の完成です！
位置を調整
このままでは「基本ブロックの中央に配置されている壁」になってしまうので、位置を調整します。
このように、右と下の輪郭線を36×36グリッドに接するように移動させれば、手前側にある壁になります。
逆に、左と上の輪郭線を36×36グリッドに接するように移動させれば、奥側にある壁になります。
それぞれを基本ブロックの上に並べてみると、こんな感じ。
左から、
- 中央に位置する壁
- 手前に位置する壁
- 奥に位置する壁
になってます。
なめらかな壁を作る
半分削れたようなブロックを作っておくことで、直角ではない、なめらかな壁を表現することも可能です。
先ほど作った壁ブロックと組み合わせることで、こんな感じの壁が作れます。
では描いていきましょう。
まずは先ほど作った「奥側にある壁」をコピペします。
上の画像はコピペしてきた図です。
手前側にある壁でも作れますが、今回は奥にある壁で作っていきます。
次に、段差ブロック（高さ８ピクセル）をさらに半分の高さ（４ピクセル）にしたブロックを下部にもってきます。
上の画僧は高さ４ピクセルのブロックを持ってきた図です。
こんな感じに、壁ブロックの下部に置いてください。
私は、段差ブロックを持ってきて、上面を選択し、４ピクセル下に移動させるやり方で持ってきました。
４ピクセルの高さのブロックは、階段ブロックを作った時に使ったものです。
階段ブロックを作った時のものが残って入れば、それを持ってきてもＯＫです。
次に、角から角へ線を引きます。
上のは線を引いた図です。
あとは、いらない線を消して、色を塗れば完成！
じゃん！
傾斜している部分をもう少し減らして、垂直になっている部分を増やしたい場合は、４ピクセルの高さのブロックではなく段差ブロック（高さ８ピクセル）のブロックで描くといい感じになります。
一部だけへこんだブロックを描く
基本ブロックの応用編です。
基本ブロックの一部だけがへこんでいるブロックを描いていきます。
まずは基本となるブロックをコピペしてもってきましょう。
コピペしたら、こんな感じで線を引きます。
黄色い線が、今引いた線です。
ひし形のような形になってますね。
線が引けたら、ひし形の下部（黄色い線ではない線の部分）をまるまる選択範囲に含んでください。
そして、下に８ピクセル下げます。
下に８ピクセル下げた図です。
黒と白の線で囲まれてる部分が、選択範囲です。
移動できたら、ひし形の両端の線を結び合わせていきます。
必要な線を書き足して、色を塗ったら完成！
基本ブロックの一部がへこんでいるブロックが完成しました。
マップタイル素材の完成！
そんなこんなで、マップタイル素材の完成です！
- 基本ブロック
- 段差ブロック
- 坂道ブロック
- 階段ブロック
- 壁ブロック
- 半傾斜ブロック
- へこみブロック
上記の、合計７種類のブロックを描きました。
あとはこの画像をunityにインポートして、切り分けなどの設定をすればマップを描くだけです。
unityのインポートと設定方法はこっちで説明しています。
【初心者向け】アイソメトリックのマップの作り方１：インポートと設定【Unity】
ドットでアイソメトリックなゲームを作りたい人のお役にたてたらさいわい！
