見出し画像

ドット絵をコンポジットする（Unityで）

るっちょ

ドット絵Advent Calendar 2023の17日目の記事です。

（↑表・裏・端。3枚もあってすごい）

るっちょと申します！
普段は個人ゲーム開発者としてドット絵のゲームを作ったり、ドット絵のアニメーションを描いたりしています。

コンポジット

描いたドット絵をそのまま出す前に、色味の調整やエフェクト等々、手描き以外による様々な編集を施す、いわゆるコンポジットを行います。手描きだけでは難しい表現をコンピュータの力を借りて実現することができ、ドット絵の表現の幅を広げることができます。

コンポジットに使えるソフト

Adobe After Effects

映像のコンポジットソフトウェアとして非常に広く使われているソフトです。単体で買おうとするとそれなりに高価なのが難点ですが、日常的にPhotoshopやIllustratorを使っている方なら比較的追加コスト少なく入手できるのではないでしょうか。かくいう私はほとんど触ったことがありません……
今回のAdvent CalendarでもAEを用いたドット絵のコンポジットについて紹介している記事がありますので、そちらもぜひ見てみてはいかがでしょう？

Unity

私が使っているのはこちら。ゲームを作るためのソフトウェア、いわゆるゲームエンジンです。

いいところ①：無料
だいたいの方は無料で使えます。

いいところ②：リアルタイムレンダリング
もともとはゲーム開発用途なのでリアルタイム動作が前提となっていて、全体的に描画処理が高速です。ただし、負荷の高いエフェクト等については品質を犠牲にして動作の軽さを実現していることもあります。

いいところ③：拡張性の高さ
拡張の自由度はかなり高いです。裏を返すと、拡張が前提となっている箇所が多く、コンポジット用途では標準機能の不足を感じることがあるかもしれません。

いいところ④：ゲームも作れる（？）
コンポジットがノッてきたら、ついでにドット絵スタイルのゲームをつくってみるのもいかがでしょうか。

……とはいいつつ、今回はUnity固有のテクニックを解説するというよりは、より一般に、コンポジットソフトをつかって何ができるかを紹介してみる感じの記事になります。コンポジットそのものに興味のある方も読んでいっていただけると嬉しいです。

作例でみる

実際に作ってみたものを例に、どういうポイントにUnityを活用しているかを紹介したいと思います。

① アニメーション

あらかじめペイントソフト側でレイヤーを分けておいたものをUnityに持っていくと、素材ごとに別々の動きを付けることができます。

背景の視差効果や手前の車の動きはUnity側でつけたものです。こうした直線的な動きはコンポジットソフトのメリットが活きるポイントですね。

② パーティクル

パーティクル（粒子）機能を使うと、画面の情報量がぐっと増します。
Unityでは粒子の動きを視覚的にプログラミングできる環境（VFX Graph）が用意されています。

③ エフェクト

コンポジットソフトの主要な機能のひとつはやはりエフェクトかと思います。Unityでは画面全体に適用するエフェクト（ポストプロセス）が用意されているほか、シェーダー言語を使ってプログラミングを行うことで非常に多様なエフェクトを作成することができます。

こちらは全体として光りモノの多い画面です。Unity標準で使えるブルームはかなり強力で、今回挙げているすべてのドット絵で使っています。
また、水の溜まった地面に反射を入れています。光りモノとの相性の良さ！

こちらの動画では、実際に適用しているエフェクトを一つずつ紹介しています。

お次は静止画素材に動きをつけたものです。
ガラスに垂れる雨粒の屈折を追加しています。意外性があって面白い。

次のアニメーションでは液晶風のエフェクトとグリッチエフェクトを作っています。モニターを通して見ているような独特の印象が得られます。

道具を使って描くこと

コンポジットを勧めるノリで書いてきましたが、ひとつ、ドット絵にコンポジットを持ち込むことの難しさ、掟破りっぽさについても言及しておきたいと思います。

ドット絵の定義問題、といえばある種の定番ネタではありますが、ドットが「法則」や「ルール」であるというのは、程度に差はあれど多くのドット絵に共通していえることかと思います。私は、ドット絵が「ルールをあえて選択して作られている」という部分に魅力を感じます。絵作りの上でも、作り手の工夫や意図がひとつひとつのドットに離散化されることで、より明確に伝わります。

コンポジットは、手書きでは簡単に実現できない表現をコンピューターを使って実現するものであり、これはドットという既成の「ルール」から離れるものではあります。ブルームをかけたドット絵はひとつひとつのドットの存在感が希薄になるような感じがするし、滑らかな曲線を描きながら動くパーティクルは、いかにも計算によって動かしている感じが出るものです。ここにコンポジットの掟破りっぽさがあります。

一方、コンポジットを使って作られた作品にこそ現れる魅力があります。それは、より新しい表現を作りたいという意図が現れることです。ドットとコンポジットの組み合わせはまだ新しく、確立した技法やノウハウはあまりありません。その中で作られた作品は、挑戦と工夫に富み、ひとつ尊いものだと感じます。

……という文章を用意していたんですが、同じくドット絵アドカレ（端）に参加されたSeaeeesさんの記事「風景ドット絵におけるBlenderの活用」で、ちょうど似たような話題に触れられています。こちらもぜひ。

技術で表現をつくる

……ちょっとややこしい話になりましたが、ここからつなげてもうひとつ言いたいことがあります。それは技術を使って表現を広げるのはおもしろい、ということです。

これは、コンポジットをつかわないドット絵作りにも当てはまります。たとえば今回紹介したブルームですが、これは画面をぼかし、その中から明るい部分のみを強調し、元の絵に対して可算合成することで実現することができます。かなり基本的な処理の組み合わせなので、例えばAsepriteなら単体で実現できます。

Asepriteで作ったブルーム

別の例では、ドット絵で階調表現を行うための技法であるディザリングがあります。ディザリングには一定のルールが存在しているのを知っていますか？別に理論があるからと言ってそれに則らなければならないわけではないのですが、ルールベースのディザリングを機械的に行うことによって、動きの大きい画面でも一貫性のある見た目のディザリングを適用することが可能です。

こういうふうに、どういう計算処理を行うとどういう結果が得られるかを知ることで、表現のレパートリーを増やすことができるんです。これってわくわくしませんか？

十分に高性能なコンピューターというのはもう身近にたくさん存在していて、それらを使って何ができるかはソフトウェア次第です。
……それで初めの話に戻って、ドット絵とコンポジットソフトを組み合わせると技術を使っていろんな表現を作れて楽しいです、ということが言いたかったんです。もちろんAfter Effectsでも同じく幅広いことができるはずですし、TouchDesignerとかProcessingとか、ゲームエンジン以外でもグラフィックスプログラミングができる環境はいろいろあります。そして、この記事で紹介したような技術的な知識が活用できるのはどの環境でも同じだと思います。

この記事では具体的なソフトウェアの使い方を全く紹介していなくて恐縮なんですが、ドット絵 x コンポジットの可能性をドット絵コミュニティに紹介してみたかったんです！気になった方はぜひ調べてみてください。

随分とりとめのない記事になってしまいましたが、ここまで読んでいただいてありがとうございました！

この記事が気に入ったらサポートをしてみませんか？