アイソメトリックでドットのマップタイルを作りたいけど描き方がわからぬ！という人のための描き方講座です。
講座の前編である「基本となるブロックの描き方」の続きになります。
こんな内容だよ
段差の描き方
「段差ブロック」の描き方
基本となるブロックが描けたら、段差ブロックを作るのは簡単です。
コピペ＆移動だけで作れます。
まずは、先ほど描いた基本となるマップタイルをコピーして、隣にそのままペーストします。
次に、コピペしたブロックの「上面」部分を選択します。
黄色い枠で囲った部分です。
サイズでいうと16×32です。
選択したら、８ピクセル分、下方向に移動させます。
移動させるとこんな感じに。
これで段差ブロックは完成！
なぜ「８ピクセル」なのか
なぜ「８ピクセル」なのかというと、今回は高さ16ピクセルでアイソメトリックのブロックを作ってるからです。
16を２で割ると８になります。
なので段差ブロックは、基本となるブロックのちょうど半分の高さになるということです。
８ピクセルだけ下方向に移動させることで、unity上でマップを描画するときに違和感なくマップタイルを敷き詰めることができます。
このあと階段ブロックも作成していきますが、めんどうな場合はこの段差ブロック（ハーフブロック）でも階段のように扱えたりします。
マインクラフトでいうハーフブロックと同じイメージです。
坂道の描き方
では、次に坂道を描いていきます。
「坂道ブロック」の描き方
はじめに、一番最初に作成した基本となるブロックをコピーしてペーストします。
下のは基本となるブロックをコピペした画像。
位置はどこでもいいです。
今回は段差ブロックの隣にペーストしました。
コピペできたら、ブロックを削っていきます。
今回は大体45度くらいの角度の階段を作っていきます。
以下はざっくりと削った図。
あとで調整するのでざっくり削ってあればＯＫです。
（正直、削る工程は必須ではないですが、分かりやすいのでおすすめ）
ポイントは、黄色い枠で囲ってある箇所。
この黄色い枠で囲ってある部分を直線ツールで結びます。
なので、この線は消さないように注意！（消しちゃっても描きなおせばＯＫですが）
削れたら、線を引きます。
黄色い線が、新しく引いた線です。
ちょっと分かりづらいかもなのであえて黄色い線で引いてみました。
この線は、傾斜を表す線です。
反対側も、同じように傾斜の線を引いていきます。
まずは削ります。
こんな感じ。
削っただけですが、もうなんとなく坂道っぽく見えてきましたね。
ここでもポイントなのは、輪郭線を消さないこと。
削るのは内部の線や色だけです。
そして、線を引きます。
黄色い線が、引いた線です。
これに色を塗れば坂道ブロックの完成！
色を塗って、コピペして左右反転させれば右向き左向きの坂道ブロックの完成です。
「後ろ向き坂道ブロック」の描き方
このままでは前に向いている坂道ブロックしかないので、後ろ向きの坂道ブロックも作ります。
まずは基本のブロックをコピペして持ってきましょう。
坂道ブロックではないので注意！
以下は基本のブロックをコピペしてきた図。
左下にもってきました。
坂道ブロックを作った時と同じ手順です。
まずは削っていきます。
削りました。
大事なのは黄色い枠で囲った部分！
特に右下と真ん中の黄色い枠内が重要です。
この２カ所を基準に線を引くからです。
左上の黄色い枠は、輪郭となる角の線なので削りすぎないように慎重に…の意味で大事です。
線を引いていきます。
黄色い線が今引いた線です。
これで完成！
あとは、コピペして左右反転させれば坂道の背面の左右どちらも完成です。
坂道ができあがりました！やったね。
並べた時の違和感の修正方法
完成したはいいけど、いざ並べてみたらどこか違和感が…？
といった現象を回避するための確認方法です。
まず、こんな感じにコピペして並べます。
次に、「上になっている坂道ブロック」を下方向に８ピクセル移動させます。
この画像では左側にある坂道ブロックですね。
８ピクセル移動させると、こんな感じになります。
これが、実際にunityでマップを作成したときの見え方です。
このままだと、坂道ブロックを並べた時の線が２重になってしまっています。
縮小すれば気にならないぜ！という場合はこのままでもＯＫです。
私は気になるので、この２重線になる現象を修正します。
まず、坂道ブロックの傾斜、外側に向いている輪郭線を全て選択し、１ピクセル分前方に移動させます。
上の画像でいうと、→の方向です。
上の画像はずらしたあとの状態。
次に、ピクセルをずらした分、加筆修正します。
加筆修正した状態の画像です。
上の画像ではグリッドからずれてますが、これで32×32マスにおさまっています。
これで２重線になる現象が直っているはずです。
加筆修正した坂道ブロックをもうひとつコピペして、８ピクセルだけ下にずらして確認して見ましょう。
じゃん！
先ほどとちがい、もう坂道ブロックが隣り合ってる部分の線が２重になっていません！
この線の重なり具合が気に入らぬ！という場合は１ピクセルずつ手直ししてもいいと思います。
加筆修正したこの坂道ブロックで上書きしておきましょう。
修正した坂道ブロックがこちら。
修正前と比べると、傾斜部分の外側の輪郭線が１ピクセル分前方に増えているのがわかります。
さらに階段・壁のブロックも作りたい方はコチラもどうぞ。
