アイソメトリックでドットのマップタイルを作りたいけど描き方がわからぬ！という人のための描き方講座です。
こんなマップチップがドット絵で作れるようになるよ。
- 普通のタイル（地面部分）
- 段差タイル（半ブロック）
- 坂道ブロック
- 階段ブロック
- 壁ブロック
- 半分だけ傾斜してるブロック
- 一部だけへこんでるブロック
作り方を知りたいんじゃ！っていう人はもくじの「基本のマップタイルの描き方」の項目から読んでね。
こんな内容だよ
アイソメトリックとは
アイソメトリックとは、簡単に言うと立体的でありながら遠近法（遠くのものが小さく見えて、近くのものが大きく見える）の見え方のしない製図方法のこと。
「パースを揃えて描く方法」とも言ったりします。
アイソメトリックは「アイソメトリック・プロジェクトション（Isometric Projection）」を略した言い方で、日本語では「等角投影法」と呼ばれています。
アイソメトリックの描き方は「直角に交わる3つの軸の角度がそれぞれ120度になるように描く」です。
アイソメトリックは、ゲームはもちろん、ボタンやアイコンなどにも使われることがあります。
用意するもの
アイソメトリックのマップタイルを自作するのにあたって、今回使うツールはこれ。
これが絶対必要！ってわけでないです。参考までに。
- EDGE2（ドット専用のお絵かきソフト）
- Unity（作成したドット素材を実際に使う場所）
- マウスorペンタブ（ドット絵を描くための道具）
ドット専用のお絵かきソフト
ドットイラスト専用のお絵かきソフトは、EDGEやAsprintなどなんでもいいです。
クリップスタジオでも描けないこともないとは思いますが、おすすめはピクセルアート（ドット絵）に特化したイラストソフトです。
今回使用するのはＥＤＧＥ２というドット絵専用のイラスト描画ソフトです。
「上部のメニューバーの～」などの操作方法はＥＤＧＥ２の画面で説明していきます。
Unity
今回作成したマップタイルはunityにインポートしていきます。
unityとは、ゲームを制作するためのソフトです。
ゲーム制作ソフトなので、WOLF RPGエディターとかツクールVX Aceなどなどと同じジャンルのソフトです。
アイソメトリックのマップタイルをインポートする方法はこっちで解説してるので、インポート設定がさっぱり分からぬ！という方はどうぞ。
今回は、マップタイルを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でマップタイルを並べた時にピクセルが合わずガタガタになりかねないからです。
マップタイルを並べた時のピクセルの兼ね合いを調整できる人はバリバリ線をいじっても大丈夫ですが、分からぬ人はいじらないでそのままにしておくのがベストです。
応用編：階段・坂道の描き方
これでマップタイルの全ての基本となるブロックを用意することができました。
あとは、この基本のブロックから応用させて、階段や坂道などを作っていきます。
