クリエイティブを楽しむ新メディア 牛の歩みで更新中!クリエイティブを楽しむ新メディア 牛の歩みで更新中!
ドット絵ライブラリー
ドット絵でマップを描こう(前編)
2024年2月11日(日曜日)

今回は、箱やモンスターといった単品イラスト的なドット絵ではなくマップ作りに挑戦します!

"微妙な角度"でマップを描く!

しかも今回描くのは、よく2Dゲームでよく見かける直角タイプ(ドラクエ1~6など)でも、斜め45度タイプ(FFTやタクティクスオウガ、フロントミッション等)でもありません。記事タイトルを見てお気づきのように、なんと言っていいのかよくわからない"微妙角度"(概ね22.5度)のマップです。

この微妙角度のドット絵は、これまでも『ひまわり』や『百人一首』、『ファミコンのカセット』などを描いてきたのですが……

なぜこの角度で描くかというと、真正面から描く絵は立体感を出せなくて面白味に欠けやすく、45度では絵の顔の部分が"あさって"の方向を向いてしまうからです。両方の間を取って「ほぼ前方を向かせつつ、立体感も出したい」というわけ。わがままですね!

ちなみにこの角度のドット絵には元ネタがあります。それが、こちら。

昔のプログラミングツール『Visual Basic』に使われていたアイコンです。ん……でも、あらためて今見直してみると下のラインが一定でなかったり、左上が1ドット飛び出していたりで何かちょっとヘンですね。

とはいえ基本的には"左から右へ向かって横に4ドット進む"→"下に1ドット降りる"という法則性のラインになっていて、昔からずっとこのアイコンの角度がいいなと思っていたわけです。

1. タイルのテンプレートを作成

さて、まずはマップに敷き詰めるタイル(マップチップ)のテンプレートを作成していきます。

細かい手順①②③

① 4-4-4-4で計16ドットの斜め線を引きます。
② その両端から右上に向けて8ドットぶん斜め線(1-1-1…)を引きます。
③ 上端同士を4-4-4-4で結んで、できあがった面を塗りつぶします。

うーん。描いてはみたものの、これで良いのか悪いのか。これだけ見てもわかりませんね。

2. 試しに並べてみる

タイルを正しく描けたか確認するために、3x3に並べてテストしてみましょう。

えい!

テストで3x3に並べてみましたが……。
オゥ……失敗。タイルとタイルの間に隙間ができてしまいました。

3. タイルを修正

タイルを修正する必要があることはわかりました。でも、どう直したらいいんでしょう? 何が悪いのか、すぐにわからないのが斜め視点のドット絵の難しいところです。

よく考えて、問題点を見極めなければいけません。

逆に問題ないのは、外周のラインは横4-4-4…と縦1-1-1…でキレイにつながっていることです。ということは「ラインの位置が悪い」ということでしょうか?

というわけで、ラインの位置を見直してみることにします。横に並べたタイル同士に隙間ができるということは、面全体を今より横に広げる必要があるはずですから、えーっと……

修正の流れ①②③

① 元のタイルです。
② 左ラインの外に、明色でもう1本ラインを足します。
③ ついでに下のラインも同じ明色にして、見分けやすくします。

以上のように、左ラインを横に移動させるかたちで面を広げてみました。これでいいのでしょうか?

4. 再びテスト

では、この修正版タイルを使ってもう一度テストしてみます。

おりゃっ。

もう一度3x3に並べてテスト。

はい、今回は成功です!

ついでに、上にこれまで描いたドット絵を乗せてみましょう。

ファミコンのカセットは側面の角度(視点の高さ)が少し違うので微妙に違和感がありますが、このタイルで大丈夫そうですね。住宅やビルなどを配置すれば地図にできそうです。巨大カセットのある町にも住んでみたいところですけどね!

ところで、わざわざ苦労して立体感を出せる視点にしたのですから、地面の高さも表現したいものです。

そこで次回は、タイルを立体化していくことにします!

(つづく)

仲川正紀
誰得ドット絵芸人を名乗る野良編集者。にちよう企画班でも、文章を書いたりドット絵を描いたりしていますよ。
https://twitter.com/hiponama
https://www.facebook.com/msk.nakagawa
https://note.com/hpnm/
コメントを記入

メールアドレスが公開されることはありません。 が付いている欄は必須項目です