【Rustのまほう2】#9 ドット絵の基本

あまりプログラミングの話ばかりではアレなので、アートワークのほうの話もしていこうと思います。ゲーム開発の作業量はプログラミングの部分も小さくはないのですが、現代のゲーム開発ではアートワークの比重のほうが大きかったりするようです。

# アートスタイルの選択

今回のゲームは2D、しかもドット絵を中心にしました。私はどちらかというとプログラミング寄りの人間なので、アートワークは苦手です。それでもそれなりのクオリティのゲームを仕上げたいと思ったとき、ドット絵が一番粗が目立たないだろう、というちょっと腰の引けた判断だったりします。

私は[3Dゲームを作ろうとしたこと](https://qiita.com/hiruberuto/items/5321d8cebce7b87851f6)もあって、実は3DCGツールのBlenderなんかも多少は使えるのですが、3Dモデルは作業量が多くて個人開発では現実的でないと思いました。最近はお金さえ出せばアセットストアでAAAゲーム並みの超高品質な３Dアセットを買えたりするのですが、アセットでまかなえない分はどうせ自分で作ることになります。下手にストアのアセットと自作のアセットを混ぜたりするとクオリティのばらつきが気になるでしょうし、アセット頼りにするとどうしてもゲームの個性というか**作家性**みたいなのが薄まってしまうかなと思いますし。

私がプレイしたことのある3Dのインディーゲームでは、『Tunic』がシンプルな造形と高いクオリティを両立していて理想的だなと感じました。でも私自身はスキル的にも作業量的にも、3Dでここまで作りきることはできないだろうなと思います。

https://store.steampowered.com/app/553420/TUNIC/?l=japanese

それに Bevy Engineはまだ若いエンジンなので3D機能が不安定な可能性が高く、それに比べれば2D機能はもっと単純で成熟が早いはずなので、まずは2Dかなというところです。

2Dゲームを作るにしても、高解像度の2Dイラストスタイルでいくか、低解像度のドット絵スタイルでいくかという選択があると思います。インディーズで高解像度の2Dゲームだと、私はHollow Knightなんかが思いつきます。

https://store.steampowered.com/app/367520/Hollow_Knight/?l=japanese

ただ、高解像度の2Dイラストを自分で描いてみると、私のようなイラストが不得手な人間は**まず線が引けない**んですよ。ひょろひょろ～となってしまってまともな輪郭が描けないです。頑張って補正機能を調整したりするとそれっぽくはなるのですが、それでもスキル不足が如実に表れます。その点、ドット絵で色数を減らして描くと粗が目立ちにくいので、イラストが苦手な人ほどドット絵はお勧めです。一方で、対象を面と陰影で捉えて表現するというスキルや、少ないドットで対象を表現するという別のスキルが必要ではありますが……。

ファミコン世代にとってはドット絵はレトロな雰囲気として感じられるかもしれませんが、マインクラフトやテラリアのような現代の超有名作品もドット絵ですし、現代の子どもたちはドット絵もアートスタイルの一種として捉えており、決して古いスタイルという印象ではないそうです。

# ドット絵ツールの選択

以前の記事にも書きましたが、ドット絵を描くときはAsepriteというツールがお勧めです。ドット絵専用ツールは日本語圏だと[edge](https://takabosoft.com/edge2)が有名だと思いますし、べつにPhotoshopやクリスタなんかでも描けるのですが、ライブラリなどの相互運用性を考えたらAsepriteに慣れておくのがいいと思います。

https://store.steampowered.com/app/431730/Aseprite/?l=japanese


# スライス

Asepriteの機能に**スライス**というものがあるのですが、これは一枚の絵の一部分だけをゲーム画面に表示する機能です。以下のスクリーンショットの青い枠がスライスで、スライスにはそれぞれ名前を付けられるので、その名前をBevy側で指定して表示するわけです。

![スクリーンショット 2024-12-09 035940.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64695/3ffaa319-cc1b-b652-4b82-fea4fcc59e78.png)

今回は 16ピクセルx16ピクセルをひとつの単位として、背景のグリッドもそれに合わせてあります。ファミコン版マリオのドット絵やマインクラフトのテクスチャが16ピクセル単位で、これが何かを描く時の最小限のサイズだと思います。これより小さい8x8単位のドット絵のゲームもあって、それだと開発者としてはさらに作業量を減らせて嬉しい面もあるのですが、プレイヤー側としては何が描かれているのかあまりに判別しづらいというのが個人的な印象です。

スライスをそれぞれ別のファイルに分けることも可能ですが、色合いを一斉に調整したいときにファイルが分かれていると面倒ですし、Bevyのテクスチャアトラスの都合でも一枚に載せてしまうと効率が良くなりそうです(私はそのあたりよくわかっていないのですが)。

# アニメーション

また、Asepriteにはアニメーションの機能があります。下のスクリーンショットの画面下部、`idle`とか`run`となっているのがそれぞれのアニメーションで、ゲーム内では止まっているときは`idle`、走っているときは`run`を切り替えることで表現しているわけです。

![スクリーンショット 2024-12-09 040444.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64695/3d2514a2-5055-8387-8848-85acaf76e7b3.png)

やはりアニメーションは作るのが大変で、この幅16ピクセルの粗いドット絵でどうにか、というところです。解像度を上げようと思えば上げられますがその分作業量は大きくなりますし、スキル的にも粗が目立ち始めるので、これで我慢するのがちょうどよかったりします。元ネタといえるゲームである Noita もプレイヤーキャラクターがこのくらいの解像度ですし、ゲームの面白さにはあまり関係ないですしね。みんなもNoitaやろう！

https://store.steampowered.com/app/881100/Noita/

将来的には、各プレイヤーがAseprite形式で描いたキャラクターを持ち寄ってオンラインでプレイできたりしたら楽しいかなと思ったりもしてます。

# イメージボード

ゲーム内で表示するドット絵以外でも、イメージボードのようなものもAsepriteのドット絵で描いています。これは別にドット絵でなくてもいいのですが、私が複数のイラストツールに習熟する余裕がないことや、ゲーム本編との印象の差が大きくならないようにという意図です。

![スクリーンショット 2024-12-09 041504.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64695/b5ddddf0-a8af-9b4a-4fb0-94b29fc21dea.png)


![スクリーンショット 2024-12-09 041708.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64695/93cf80ca-484e-a2ca-60d7-9cbd801601e7.png)

Asepriteだと、線形のグラデーションの機能はあるんですが放射状のグラデーションの機能がなくて、それだけ別のイラストツールで作る羽目になりました。上のスクリーンショットだと、月の周囲の光だけその放射状グラデーションを使っています。ドット絵だと使う色数を減らすので、こういうのは滑らかなグラデーションにしないことも多いですが、別にスーパーファミコンで実行しようというわけではなくてただのアートスタイル、**なんちゃってドット絵**なので、レトロな意味でのドット絵にはないこういう表現も気にせずやってます。