QUEST LAB

十二支 × 協力 × リアルタイムバトル『Play The Fox』を作っています。

ドット絵で奥行きを表現する!

毎朝コーヒーを飲まないと頭が痛くなる、QuestGamesの村人Uことカフェイン人間です。 カフェインは片頭痛を抑える効果があるらしいです。

さて、最近ブログ投稿をサボっていますが、ゲーム制作自体は着々と進んでいます。

今回は2Dのドット絵で奥行きを表現してみた話を書きます。(若干技術よりの記事です)

ドット絵で奥行きを表現するには?

クォータービューと呼ばれる方法でドット絵を描画します。
ゲームの世界を真上からでは無く、斜め上から見た画面ですね。

トップビューのゲーム

クォータビューのゲーム

こんな感じで、クォータービューを使えば奥行きの表現が出来そうです。

問題発生、絵描くの難しすぎ

クォータービューを使えば奥行き表現が出来るのは分かりましたが、ここで一つ問題が発生します。
僕らにはクォータービューの絵を描けるほどの画力がありません

普通、クォータービューはドット絵の描き方を工夫することで斜め上から見た感じを表現するのですが、僕らにそんな技術はありません。
だから今回はUnity(ゲームを作るツール)の3Dの機能を使って実現してみました。
具体的には↓の図みたいな感じで、2Dの絵を地面に対して斜め45度に配置します。

f:id:QuestGames:20200216132656p:plain
真横から見た図

こうする事で、普通の3Dゲームと同じ処理で2Dの絵を使って、奥行きの表現に成功しました!

Before

f:id:QuestGames:20200216133529p:plain:w700

After

ついでに影もつけちゃおう

折角3Dに絵を配置したので、これに光を当てればができそうな気がします。
でもUnityの仕様上、普通に光を当てるだけだと絵に影を作る事ができませんでした。(実はUnityの最新版ではできそうです)

そこで今回は影をつけるためのシェーダーというものを作成して実装してみました。
シェーダーと聞くと嫌煙しがちですが、これはそんなに難しくありませんでした!
(嘘です。まあまあ勉強しました...)

これから

ゲーム内の見た目をいじるのはこれで一旦終了です。 このままプレイしてみて良さそうならこのまま行くことになると思います。

そして次はUIの強化です! 今のUIは初心者お断りの超不親切設計なので、ここを改善していきます。
ゲームルールをいかにUIで伝えられるかが勝負です。
ウルトとか精霊の設置とかがネックになりそうですね。