【ノベルゲーム制作】②Unity Naninovel ポストエフェクト、表情差分【まほだん】
大変でした
前回の終わりに、GWなのでそこでやれたらいいですね、とか言っていましたが、すっかり５月末になってしまいました。だいぶ難航してしまい、実装できたのが5月の半ばくらいです。この記事が5月末に書かれているのはティアキンのせいです。ティアキンやりたい。
今回の記事はポストエフェクトと表情差分について使えるようになったので、それについて書きます。
ポストエフェクト
目的 ―― いい感じの画面にしたい！
ゲームとしていいかんじの、おしゃれな画面づくりをしたい！ と、みるきさんに相談を受けていました。ゲーム画面がいい感じかどうかっていうのはやっぱり大事ですよね。それで、作る背景画像やキャラ画像に直接気合でフィルタをかけてもある程度実装できると思うのですが、作業量がすごいことになりそうだし、色々と組み合わせて、揃えてから調整するのもすごく大変そうなので、Unity上でいい感じにやる、なんか、シェーダー？ とかいうのを触ろうと思いました。
普通ゲーム制作でいきなりシェーダーとか触らない気がするんですが、みるきさんがこのあと実際にイラストの作製に入る前に、どこまでUnity側でやれるか確認しておきたかったので、ここから入りました。結果的に、かなりそれでよかったなと思っています。
シェーダーって何？ ポストエフェクトって何？
というわけで、色々勉強しました。めちゃめちゃいい感じの動画がいっぱいあって、Unityってすごく勉強しやすいですね！
シェーダを書けるプログラマになろう #1 シェーダを理解しよう - Unity道場2019 2月
https://youtu.be/wUx_Y9BgC7k
Unity道場2D編 Shader Graph はじめてみよう！基礎編
https://www.youtube.com/live/3TXHMS8xFJ0?feature=share
まずこれら動画でシェーダーとは何かというのを勉強しました。ノベルゲーで2Dのゲームですから、特に２D向けで色々見ました。（ここに貼ってないものもいっぱいみたよ）
（シェーダーの勉強をしてからティアキンをやると、あ、ここBloomかかってるんだな、とか、ゲームの処理がちょっとだけ透けて感じられて面白いです。ティアキンやりたい）
それから実際にシェーダーを掛けられるまでの遠回りを、ちょっと書いてみようと思います。
遠回りその１ マテリアルに掛けたらだめだった
上記の２つ目の動画では、キャラクターのマテリアルを変更しています。
それに倣い、
デモのキャラクターにはいい感じに掛けることができたんですが、平野さんだけ、四角い黒い箱が出来てしまいます。（平野さんが荒い感じになっているのは意図したもので、ポスタリゼーションを掛けています）
どうも色々試したところ、全く無のシェーダー（入力がそのまま出力される）をかけてみても、この黒い箱は消えませんでした。
NaniNovelはキャラクターの表示方法がいくつかあり、平野さんはLayeredCharacter、他のキャラクターはSpriteCharacterとなっています。色々あがいてみましたが、多分LayeredCharacterと、このマテリアルを変える方法は相性がよくないっぽい……と判断しました。
というわけで、キャラクター単体じゃなくて、画面にポストエフェクトを掛けていくかたちで実装していきます。
遠回りその2 URP非推奨
NaniNovelのポストエフェクトは、エフェクトを追加したCameraPrefabに切り替えるよう設定することで実装できます。
公式のマニュアルにある動画では、Camera Filter Packというアセットを適応させています。今回は自作したいので、ポストエフェクトを掛けるだけじゃなくて、この方法でポストエフェクトを実装できるようにしないといけません。見たところかなりいい感じのアセットなので、買ってみるのもいいかもなんですけどね。
カメラにポストエフェクトを掛ける際、調べると出てくるのが、大体URPを使ったものです。Unityのシェーダーって言ったら、最近はURPが主流で、色々な場面で汎用的にいい感じに使えてURP最高！！！ って感じだったので、私も最高になるか……って進めていたら、NaniNovelはURP非推奨です。素人にはおすすめできない。と書いてあって断念。
Post Processing Packageを入れる
URPを入れないで、カメラにポストエフェクトを掛けるには……と調べると、どうやらPost ProcessingというPackageを入れるとよい。結果的にこれが正解でした。
Post Processingはカメラのコンポーネントに追加でき、Post-process LayerとPost-process Volumeを追加し、Add effectボタンを押すと、ポストエフェクトを追加することができます。
初めからいくつかのポストエフェクトが入っていて、先程のBloomとか、色調を変えたりするやつとか、画面の調子を整えるだけならこれだけでも結構いけそうです。
ここに自作のポストエフェクトを追加するには、以下の記事が役立ちました。
【Unity】Post Processing Stack v2入門！簡単にポストエフェクトを掛ける手順を総まとめ - LIGHT11 https://light11.hatenadiary.com/entry/2018/08/07/235251
【Unity】Post Processingで自作のポストエフェクトを実装する - LIGHT11 https://light11.hatenadiary.com/entry/2019/03/31/225111
PostProcessing Stack v2でカスタムエフェクトを作る - Unityを頑張るblog https://ssr-maguro.hatenablog.com/entry/2019/11/19/181217
今回はSRPを使わないので注意が必要で、結局一番参考することになったのは、以下の公式のドキュメント。ここでグレースケールの自作ポストエフェクトを実装しているので、これを改造することでいくつかのポストエフェクトを実装しました。
Writing Custom Effects - unity
https://docs.unity3d.com/Packages/com.unity.postprocessing@2.0/manual/Writing-Custom-Effects.html
このドキュメントのグレースケールもせっかくなのでそのまま追加しました（そのまま追加できました）。もしまほだんでグレスケになる演出があったら、あ、これ使ったんだな、と思ってください。
これを見ると分かる通り、思いっきりシェーダーと実装のためのC#を書くことになっていますね。そう、結局shader graphではなんかいい感じにできなくて、コードを書くことになりました。
実装する上でいくつかわからないところは、chatGPTを活用したりもしました。
ちなみにCameraPrefabの設定はこんな感じ。
変えたのは、
Clear Flags : Solid Color
Background : #000000
Projection : Orthographic
ポストエフェクトが出来た！
というわけで、上がそのまま、下がポスタリゼーションと色収差を掛けたもの。
拡大すると、左がそのまま、右が掛けたものです。
画像だけで見ると掛けないほうが良くない？ という感じですが、ゲーム画面だと掛けたほうがいい感じになります。実際の調整は絵との相談で、そのあたりも記事に出来たらいいですね。
何はともあれ自作のポストエフェクトを導入できました。めでたしめでたし。
表情差分
こっちのほうは素直に、NaniNovelのマニュアル通りにやればできました。
平野さんがニッコリ笑ってくれます。かわいいね。
これは平野さんのレイヤー構成がそのままPrefabのグループの構成になっており、
スクリプトのように表示レイヤーを切り替える感じで実装されています。
というわけで、今回はこんなところで。
次回は口パクに挑戦したいな～と思っています。調べてみると結構大変そうですが、頑張ります。多分ティアキンクリアしてからの更新になるんじゃないでしょうか。それではまた！