【Level4】ドット絵で道を描こう!【ドット絵講座】
ゲームのマップデザインで使えるドット絵講座。今回は簡単に道を描く方法をご紹介していきます。あつ森のマイデザインやマイクラのテクスチャパック制作にも使えるかもしれませんね。
ドット絵で道を描く方法
さて今回のドット絵講座は、マップなどで使える”道”を描いてみましょう。
屋外マップで使える道、主に街や村などの外観で使え、RPGでもアクションでも万能に使えます。
今回は、道をより簡単に描けるテクニックと合わせてご紹介していきます。
道を作ってみよう!
1. グリッドを決める
まずはお馴染みのグリッドを敷くところから。
今回も24×24でやっていきます。サイズはご自分が使いたいサイズで作った方が良いですが、練習の場合は小さい方が誤魔化しが効きます。
背景色は目に優しいパステルブルーやパステルグリーンなどを使いましょう。白や黒、減食は長時間の作業で目が疲れますし、同化しやすいのでなるべく被らない色で淡い色を使うのがオススメです。
2. マスクを作る
さてここからが道づくりの基礎であり、簡単に描く最大のポイントです。
それは道のマスクを先に作っておくという事。簡単に言えば単色シルエットのようなもので、この上に作った絵を重ねることで形をそのままに様々なデザインに変えることができます。
まずは図のように余白を少し持たせたままの正角丸四角形を描きます。正四角形だと角が尖ってしまっているのでタイルとしてはOKでも道としては整い過ぎています。なので角を丸めて、道として使えるようにしておきます。
次に、この角丸四角形を凸凹の不ぞろい状態にします。道は真っすぐだと不自然なので、凸凹にすることでより自然な感じにすることができます。
ブラシでランダムに1ドット付け足します。中央部分は2ドットの部分を作ると膨らんだ感じになります。不ぞろいに作る事が大事なので、整えてはいけません。
図のように凸凹になったら完成です。このマスクは今後道を作る際の全てのガイドになるものなので、この段階で道っぽいものを作っておきましょう。尚、このマスクは手を加えることはありません。
3. 地面タイルを作る
さて、いよいよ道を作ります。といっても、道の原型は既に完成しているので、ココからは地面タイルを作る事になります。
まずは24×24を1マス塗りつぶします。
次に、そこに地面を描きます。今回はまず土を描いてみます。
尚、地面は以前解説したものを転用しています。気になる方はコチラをご覧ください。
地面タイルが完成したら、それを3×3マスで並べます。
そうしたら、先ほど作った道のマスクの上に重ね、下のマスクレイヤーに重ねます。
Photoshopであればマスク機能で、他のドット絵制作ソフトであれば、選択範囲を作った後、はみだし部分を削除します。
図のようになれば完成です。
プラスアルファとして、描いた道を選択範囲で囲み、1px拡張します。次に、新規レイヤーを作り、選択範囲を黒で塗りつぶします。最後に、塗りつぶしたレイヤーを下に持ってきて、透明度を落とせば影の完成。
こうすることで、ベースタイルに道を重ねた際の境界線に影が落ちるので、立体感が生まれます。以下の画像がその状態です。
ベースとなる草タイルの上に道を敷きましたが、境界に若干の影が落ちるので立体感が出ているのが分かると思います。
土以外にも地面を作ってみましょう。レンガ、芝生の3種類になりました。
このマスクを使った道づくりを覚えておけば、地面タイルさえ作れば道を簡単に作る事ができるようになります。
1つ1つ道に仕上げていると非常に手間なので、大幅な時短ですね。
4. 道の曲がり角を作る
さて、道が完成しましたが、何かが足りません。そう、曲がり角です。
実際に使う事を想定した場合、道の曲がり角がないと道を曲げることができません!こいつは困った!
…というわけで、まずは道マスクを2つコピーして、図のように重ねます。すると、曲がり角が作れます。
角部分ができたら、そのマスを選択してコピーします。
お次はコピーしたものをペーストし、4つ角になるように並べます。左右反転や上下反転で対応します。
実際に使った場合のプレビューはこんな感じ。これで道を曲げることができるようになりましたね。
あとは、この角マスクを使って地面タイルを貼り付けます。
境界の影部分は1px拡張した後塗りつぶすまでは同じですが、はみだし部分がありますのでカットします。
図のように隅っこをカットします。タイルのグリッドを表示しながらやるとはみだしが分かりやすいです。
あとは透明度を下げて完成です。
5. 完成
このように道ができました!
今回作った道のマスクを一度でも作ってしまえば、あとは地面タイルさえ用意すればいくらでも道が量産できます。
石畳や木目など、様々な地面タイルの作り方は次の機会に解説していくとしましょう。
また、今回の道作りは「あつまれどうぶつの森」のマイデザイン・島クリエイトや、マインクラフトのリソースパック作りにも応用できます。是非ドット絵が必要となる色々な場面で使ってみてください。
次回もお楽しみに!
ゲーム制作講座まとめはコチラ
参考価格:¥11,760 円/年(税別)(執筆時調べ)
本格派、筆者利用のソフト。Photoshopのみを利用する場合、フォトプランの利用が単体プランよりも安く使えます。年払い、月払いともに980円ですので、使用の状況に合わせて選んでください。
「ドット絵」の関連記事
- 誰でも描ける!ドット絵講座~まとめ~ 28,812ビュー
- 簡単?難しい?ドット絵を描いてみたいと思うアナタに 27,212ビュー
- 【Level3】岩や氷をドット絵で描くコツと手順【ドット絵講座】 19,110ビュー
- 【Level3】ドット絵の立体感を出す方法。色々な立体を描いてみよう【ドット絵講座】 19,040ビュー
- ドット絵が劇的に上手くなる5つの方法【ドット絵講座】 15,459ビュー
- 【Level1】ドット絵で描くグラデーションの付け方【ドット絵講座】 15,330ビュー
- 【Level1】アイコンやUI周りで活躍!ドット文字の描き方【ドット絵講座】 12,139ビュー
- 【Level1】綺麗に見える曲線の描き方【ドット絵講座】 11,832ビュー
- 【Level5】クォータービューマップで部屋を作ってみよう【ドット絵講座】 9,329ビュー
- ドット絵を描くのにオススメのソフト 8,795ビュー
- 【Level2】ボタンをドット絵で色々な形にする方法【ドット絵講座】 8,041ビュー
- 【Level2】単色(1bit)で描いてデフォルメ力を鍛えよう!【ドット絵講座】 7,931ビュー
- 【Level1】ドット絵の線と図形の描き方~超基礎編~ 7,869ビュー
- 【Level4】簡単!アクションゲームのマップをドットで作ろう!【ドット絵講座】 7,457ビュー
- 【Level4】ドット絵で2Dのマップタイルを作ろう【ドット絵講座】 7,359ビュー
- 【Level4】ドット絵で道を描こう!【ドット絵講座】 7,287ビュー
- 【Level4】クォータービューのマップタイルの描き方【ドット絵講座】 6,375ビュー
- 【Level2】ドット文字を応用して”ネオンサイン”を描いてみよう!【ドット絵講座】 5,711ビュー
- 資料写真は縮小して使え!【ドット絵講座】 5,501ビュー
- ドット絵を描くのに向いている人 5,165ビュー
コメントを残す