こんにちは!YMYゲーム開発部です!
今回は「夢酔のバーテンダー」のカクテル作成ミニゲームで使用するカクテルのドット絵制作についてお話ししていきます!
このカクテルはドット絵で描いているのですが、実は私は絵が描けません!笑
絵心が全くないのです、、、笑
そんな私が約半年でゲーム内のアイテムを描けるようになった方法と、実例として開発中のノベルゲーム『夢酔のバーテンダー』に登場する「ハニーゴールドカクテル(仮名)」の制作フローを紹介します。
半年間の勉強方法
参考にした本
最初に参考にしたのは『ドット絵教室』という本です。
ドット絵の打ち方について初歩の初歩から書いてあり、最終的には街並みやRPG風のマップまで、一冊で幅広く練習できます。
この本を軸に、ツール探しやアニメーションについてなど、ネット上のブログや動画も参考にしながら進めました。

使用ツール
ドット絵専用ツールもいくつかありますが、まずは無料版でなど、気になるものはとりあえず試してみる!
ツール選びに時間を使いすぎないこともコツです!

私が使用しているツールの比較です。
私の場合、普段の業務でPhotoshopを使用しているため、最初の練習はPhotoshopから始めました。
そのあと、アニメーションを描いてみたくなりEDGEを使用、最終的に「タイムラプス」「手軽さ」からProcreateに落ち着きました。
「今何をしたいのか」で選ぶのが正解です。
毎日の練習方法
「毎日必ず描く」という意気込みではなく、週に2~3個を目安に、初めは16×16でリンゴなどシンプルなものから描き始めました。
慣れてきたら、32×32や64×64と徐々にサイズを上げて、本の中から気になったモチーフを描く練習を約1ヶ月半続けました。
重要なのは継続性。
完璧さより「目と手を慣らす」ために続けることが大事です。

本にあるモチーフの色・形・配置そのまま、とにかく描いてみる!
お弁当なんかは練習し始めて2日目の時に書いたものです。
これをみて希望を持っていただけたら嬉しいです・・・笑
その後は、デザイナーの書いたオリジナルキャラクターをトレースする形で、影やハイライトの入れ方など、立体に見える方法をさらに深く勉強しました。
習得した技法
半年の中で特に重要だった技法は3つです。
①輪郭線:丸や斜め線の書き方
ドット絵はペンで描くのとは違い、斜めや曲線ラインはラフ画の通りには描けません。
ここで大切なのは、色を均等に置く、または周期的(3,3,2,3,3,2…. 等)に配置することです。そうすると整って見えます。

②陰影表現:グラデーションとハイライト
グラデーションをベタッと塗るのではなく、ドット打ちで少しずつ色を変えていきます。
ハイライトを入れる位置も重要で、光源を意識することで立体感が出ます。
レトロゲームっぽい絵であればベタ塗りのグラデーション、影入れの方がいいので、描くテイストによって使い分けられるといいです。
③アンチエイリアス:滑らかさを表現する
丸みのある箇所に、中間色を使って滑らかに表現する技法。
これをマスターすると、チープな印象がぐっと減ります。
ただ、過剰にやり過ぎるとぼやっとした輪郭になるので注意が必要です。
実例:「ハニーゴールドカクテル」の制作フロー
では、実際に制作したドット絵アイテムをもとに、具体的な制作フローを説明します!
開発中のノベルゲーム『夢酔のバーテンダー』には、カクテル作成ミニゲームがあります。
そこに登場するカクテルのひとつ「夢かわウィスキーハニーゴールドカクテル(仮名)」を今回は描いていきます。
制作フロー全体図

今回の「夢かわウィスキーハニーゴールドカクテル(仮名)」はトータルで6〜7時間ほどで書き終えました。
初めて大きめのキャンバスで書いたため、慣れてればもう少し早く描けるかなと思います。
制作フロー
キャンバスサイズについて
ゲーム画面に表示したときのサイズを逆算します。
今回は最終的に512pxで表示したかったので、サイズを上げた時に輪郭がガクガクにならず、書きやすいサイズということで192pxのキャンバスで制作することにしました。
ステップ1:ラフ・シルエット
絵心がないとまっすぐな線や綺麗な丸すらも満足に描けないので、Illustratorである程度のグラスの形を作成します。
この段階では、グラスの輪郭だけ。細部はまだ不要です。
「とりあえず形を作ればいいや」くらいの気持ちでOK。

ステップ2:色選び
パレットを作成します。
今回はこんな感じで、コンセプトに沿ったハニーゴールドとオレンジから、グラデーション用の中間色も含めて3つのパレットを作成しました。
Procreateだと、イメージや参考にしたい画像から色を取ってくれるので自分で色をひとつひとつ探す手間が省けます!
これを指標に、作成しながら微調整をしていきます。

ステップ3:輪郭
Illustratorで作成した画像をトレースするような形で、グラスの輪郭をProcreateで描きます。
ここから、ドット絵の本領発揮です。
実際のグラス写真を見ながら、光と影が入る位置を確認し、透明感が出るよう塗っていきます。

ステップ4:液体の塗り
ここで工夫した点は、液体グラデーションの描き方です。
最初は層状に描いていたのですが、不自然に見えました(下の画像の通り、途中まで描いて、違うな?となりました笑)。
そこで、上からUの字でグラデーションになるように描き直したら、より自然ではちみつ感のあるグラデーションができたと思います。
ドットの打ち方で、同じ「液体」でも印象が全然変わるんです。

ステップ5:氷と炭酸泡
氷は歪な形にするため、あえてざっと描いてから、滑らかな線になるようにドットの重なりを修正します。
氷が重なる部分に影を入れることで、立体感が生まれました。
炭酸泡は「ゆめかわ」コンセプトに合わせて、星っぽく描いてキラキラ感を出しました。

ステップ6:飾りのフルーツ(オレンジ)

奥行き感を出すため、フルーツとは別に、グラスとフルーツの重なり部分を別レイヤーで描きます。
これにより、フルーツはフルーツとして別タイプのグラスにそのまま流用できます。

ステップ7:最終調整
液体感をより出すために、液体の上の線をまっすぐから波っぽくしました。
小さな工夫ですが、リアリティが大きく変わります。
これが完成形です!

完成したらPhotoshopで画像解像度を192pxから512pxに変更し、書き出します。
難しかった点と工夫
グラデーションの調整
グラデーションがベタッと塗られるとチープに見えやすいです。
今回はメッシュは使わず1段階薄い色を濃い色にところどころ入れていく感じで馴染ませました。
グラスと重なったときのフルーツ色
グラスと重なった部分のフルーツの色味が難しかったです。
透過感を出しつつ、フルーツの色も見える必要があります。
何度も試行錯誤して、最終的に落ち着く色を見つけました。
このあたりは「とりあえず試してみる」の繰り返しですね。
正直、半年前は32×32のキャンバスでも難しいと感じていたので、半年でゲーム内で使用できるクオリティのものを描けるようになるとは思っていませんでした。
やはり継続は大切ですね・・・
また、私のように絵心がなくても、ドット絵ならツールも手軽なものが多く、「こんなの描いてみたかった」が実現しやすいのでおすすめです!
「絵が描けない」という理由で躊躇している人が、この記事を読んで挑戦してみようと思ってもらえたら嬉しいです。
次の更新もお楽しみに!!
