【Level5】クォータービューマップで部屋を作ってみよう【ドット絵講座】

2020/10/27

J.Stone

ドット絵講座、今回はいよいよクォータービューマップ作りの実践編として、部屋・内装を作っていきたいと思います。画像に合わせて模写をしながら、立体視を鍛えてコツを掴んでいきましょう。

クォータービューの描き方～実践編

さて、前回はクォータービューの初歩的な描き方を紹介しましたが、今回はいよいよ実践編です。
横スクロール、見下ろし視点に引き続き、ドット絵で部屋を作ってみましょう。
クォータービューは特徴上、3面を描かなければいけないので、難易度は以前に増してかなり上がります。それだけに描きごたえのある内容となっていますので、模写しながらコツをつかんでいってください。

前回の講座はコチラ

【Level4】クォータービューのマップタイルの描き方【ドット絵講座】

クォータービューのマップ制作に挑戦しようさて、前回は見下ろし視点で作るマップタイル作りの練習講座でしたが、今回は更に難易度を上げてクォータービュー視点でのマップタイル制作を練習していきましょう。前回・前々回の講座はコチラクォータービュークォータービューとは立体描写、2点透視的に描かれるゲームの描画方法で、斜め上から見下ろしたような立体感のある見た目が特徴です。この視点最大のメリットは、奥行き感が抜群に表現できるので、よりリアル…3Dっぽい雰囲気を持たせることができます。反面、対象を2点透視的な視点...

実際に描いてみよう

さあドローソフトを開いて一緒に描いていきましょう。
一連のドット絵の描き方を見てないよーという方は先にそちらからおさらいしておいてください。
あと、描いたものは全て単体でレイヤー化しておいてください。そうすると、後々にタイルセットに加工しやすくなります。

1. グリッドを作る

まずはガイドとなるグリッドを引きます。1マス作ったらコピペでひたすら拡張していきます。
今回筆者は大きさは横幅30px程度で取りましたが、正直”大きめ”に取った方が作りやすいです。
というのも、幅30pxの場合、片面が半分に割って15pxになってしまうのでかなり潰れたドットを描くことに…。
クォータービューはグラフィックで最も勝負しやすい形なので、大きめに取って描いていきましょう。筆者はやってから気づいた、時すでにおすし…(´;ω;`)

このクォータービューのコツとしては、タイルにした時に隣接部分の作りがちょっと面倒なので、主のガイドを濃く引いたら、内枠に第二ガイドを引いてみてください。下レイヤーから薄く表示させるとよし。
線一杯に描いてしまってタイル化すると、連結時にメリ込んでしまうことがあるので、それを修正しやすくなります。

2. 箱を置いてテスト

まず、グリッドにズレがないかを確認する為に、箱を描いてテストします。
問題があればグリッドを作り直します。ズレたまま作ると後々大変なことになるので、ガイドは正確に作りましょう。

3. 机セットを描く

さて、毎度おなじみ机周りからいきます。まず真四角で取って、脚部分を削り出します。
次に色を塗って、ハイライトを入れ立体感を出します。

次に椅子です。背もたれから椅子部分までを”くの字”で描いた後、座る部分を描きます。背もたれの背面を濃い影で落としています。
脚はローラー付きをイメージしましたが、面倒な人は4本足でも構いません。

次に棚です。箱から削り出すだけなので楽ですが、棚部分の表現で差が出るかも…。本を入れました。
棚内部を描くのが面倒な人は引き出しタイプにしてしまいましょう。面倒なことは楽して解決、それがドット絵を楽しく描くコツです。

次に机の上、PCを置きます。何度も言いますが筆者はPC野郎なので、PCがないと落ち着きません。なのでPCを描きます。パソコンラブ。
まずディスプレイから描き、次にキーボードやマウスを描きます。

お次はPC本体です。側面に網目を描くことで排熱部分を表現しています。
四角故に加筆しやすいので、ダイオードの点滅とかDVDドライブの開閉とか色々工夫が出せる部分です。

以上で描いたものを合体させます。棚は2つに増やしました。

4. ベッドを描く

さーて次はベッドです。いきなりシーツ部分を含めて描くと面倒なので、まずは箱状で作ります。
言っちゃえば長方形の箱です。単調なのが嫌だったのでベッドヘッドを付けました。面倒な人は無くても構いません。

ベッドが出来たら、シーツを乗せます。枕も描いておきましょう。
もこもこの布団とか拘った演出をしなければ比較的楽に完成します。

5. テーブルを描く

部屋が寂しいのでお座敷のテーブルを追加します。
テーブル部分は机を引用し、脚をカットしてローテーブルにします。
座布団はグリッドに沿って四角を取り、中央に影を落として凹みを表現します。

6. 植木を描く

植物が欲しいので植木を描きます。前々回の見下ろし視点で使った植木はそのまま使えるので、引用しても構いません。
視点に依存し難いオブジェクトはこうしてどんどん使いまわしましょう。

7. 床を描く

いよいよ床を敷きます。
まず1マス分を塗りつぶし、フローリングの木材を描きます。木を貼り合わせたようにレンガ状に並べると、よりリアルになります。
色は2色を交互に使うとより自然になるかと思います。

元のタイルが出来たら連結して1つのフロアにします。出口部分はワントーン暗くして出っ張りを持たせて表現。
出来上がったらグリッドを重ねてズレがないか確認しましょう。

実際のプレビューはこの通り

8. 壁を貼る

次は壁です。高さをある程度取って塗りつぶし、影部分を塗り分けます。濃い色で幅木を描き込むとより立体感が出ると思います。

9. 組み合わせる

いよいよ作ったものを組み合わせて仕上げに入ります。
まず、今まで作ってきたものを表示させ、床の上に重ねます。グリッドを表示するとより配置がしやすくなります。

次に、カーペットが欲しくなったのでグリッドに沿って描きます。色はお好みでどうぞ。
カーペットの底の部分に影を入れると厚みが表現できます。時間があれば模様も描いてみても面白いかもしれません。

グリッドを外してプレビューを確認します。

10. 仕上げ

あとは小物が足りないので、絵画を配置したり、窓をおいたりしていきます。一番最初に描いた箱の側面をガイドにすると、描きやすくなります。

試しに人を配置して実際にマップ上でキャラクターを動かした際のイメージを掴みます。
キャラクターが描けない人は影でも良いですし、棒人間でも良いです。なにかしらの比較になるものを描いてみましょう。
すると、窓の位置が高すぎたので調整し、絵画の位置を上げます。

椅子と机の高さも調整してみました。※しなくてもOK

11. フォグを足す

最後にフィルターやフォグを足してみましょう。
光源を入れたり、窓から光を差し込ませたりしてみます。ソフトライトやハードライトで重ねてゲームに落とし込んだ際のイメージを作れます。

以上で完成となります。お疲れさまでした。

最後に

難易度は高かったと思いますが、上手くできましたでしょうか？
クォータービューは難しいので最初から描けなくても諦めないでください。クォータービューのマップ作製練習をすると、立体視の弱点が露呈するので、逆にそれを手直しすることで、より簡単な横スクや見下ろし視点を描いた際の粗が減っていきます。

尚、今回で全ての視点で内装（部屋）作りを終了したわけですが、それぞれの視点の特徴や描き方のコツなどが掴めてもらえれば幸いです。
次回からは今まで一連の流れで解説してきた部分の……例えば線の引き方であったり、丸味を出すコツであったりと、解説で足りなかったより細かい部分・コツなどを紹介できればとおもいます。
それまでは是非とも今までの講座内容で作った絵を観察したり、試行錯誤しながら感覚を少しでも身に着けていただけると、近道になるかと思います。

では、次回もお楽しみに！