こんにちは！
CYBIRD Advent Calendar 2024 20日目担当の @yoooosu です。
昨日は@cy-n_aoさんの記事でしたね。とても興味深い内容だったので是非見てみてください。

今回の記事について

今回、HD-2Dについての記事を書こうと思ったのは近年よく聞くようになった単語で詳しく知らなかったので、これを機に調べて実際に作ってみようと思いました。

HD-2Dとは

HD-2Dとはドット絵と3Dを融合させた表現技法で懐かしい感じもすれば新しい感じがするものになります。「オクトパストラベラー」から始まり、直近で言うと「ドラクエⅢ」のリメイクでもこの表現技法が使われていましたね。

実際にやってみる

使用環境、準備するもの
＜使用環境＞
Uinty 2022.3.4f1
＜準備するもの＞
・Post Processing
・3Dのオブジェクト(今回はこちらを使用しました)
・降り注ぐ光のエフェクト(今回はこちらを使用しました)
・ドット絵のキャラクター(今回はユニティちゃんを使用しました)
準備したものをインポートする
まずは準備したものを全てインポートします。インポートが完了したら、Assets＞Charttyp＞Stylized fantasy pagan village＞Scenes＞SampleSceneを開きます。今回はこのシーンに手を加えていこうと思います。
Post Processingを使用する
Post Processingを使用して雰囲気を出していこうと思います。
まずは「Bloom」を使用します。「Bloom」は光をあふれさせる表現で、使用すると明るいところを光らせてぼやっとさせることができます。

次に「Vignette」を使用します。「Vignette」は画像のエッジを暗くし、画像の中央を明るくする効果です。これを使用することで懐かしさの表現ができます。

最後に「Depth of field」を設定します。「Depth of field」は被写界深度の設定でカメラのピントが合ってない部分をぼやかすことができます。

4.降り注ぐ光のエフェクトの設定
まず、Assets＞LightRays2D＞Shaders＞LightRaysを選択した状態でMaterialを作成します。そうすると「Custom_LightRays」というMaterialが生成されます。

次にMain Cameraの子オブジェクトに3D Object＞Quadを追加します。そうしたらQuad＞Mesh Renderer＞Materialを作成した「Custom_LightRays」に設定します。

設定できたら、「Light Rays 2D」というスクリプトを追加します。アタッチできたら、カメラに映るようにTransformやScaleを設定し、そのあとは色などいじれる項目が多くあるので良い感じにいじってみてください。

5. キャラを置いてみる
最後にキャラを配置してどのように見えるか見てみましょう。インポートしておいたドット絵のユニティちゃんを配置してみます。注意することはColliderやRigidbodyは3Dのものを使用します。あとは細かい調整を行えばそれっぽくなると思います。

終わりに

今回はサクッとできることをやってみました。UnityのPost Processingで使用していないものはまだあるので、もっとこだわればクオリティの高いものができると思いました。
明日のCYBIRD Advent Calendar 2024 21日目は@R_araiさんのAndroid Gradle Pluginを更新したらBuildConfig.VERSION_NAMEが参照出来なくなったお話です。楽しみですね。