ちゃこブログ

お絵かきとUnityとBlenderと日記

【Unity】Crown Of Nothingness

 UnityRoomに作品を公開しました。前回投稿した作品よりもインタラクティブな要素がある2Dアート作品です。

Crown Of Nothingness | 無料ゲーム投稿サイト unityroom - Unityのゲームをアップロードして公開しよう

f:id:charcotte:20181122223126g:plain

 少女の冠に触れると少女は目を覚まし、世界が闇に包まれてしまいます。リンゴをタップすることで、少女は目を閉じ、世界は元に戻ります。

Spine

Animatorでのアニメーション管理

 前回制作した作品では、単純に瞬きIdleのみを合成するだけだったのでスクリプトから再生していたのですが、今回は色んなステートがあるのでAnimatorを利用しました。スクリプトで瞬きの再生を管理するのは簡単ですが、Animatorではどのように再生をすればよいか悩みましたが以下の記事を参考にStateMachineBehaviourを利用することで実現しました。

tsubakit1.hateblo.jp

f:id:charcotte:20181122214046p:plain
f:id:charcotte:20181122214055p:plain

 

特定パーツのマテリアルを分離

 デフォルトのSkeletonRendererはマテリアルは1つで構成されてます。今回はリンゴに演出を追加するために分離必要がありました。Slotを分離するためのSkeletonRenderSeparatorと特定Slotにマテリアルを上書きするSkeletonRenderCustomMaterialsを利用することで実現しました。詳しくは別記事で書こうと思っています。

ここはリファレンスがかなり少なくドキュメントもなかったので実現するのに一番時間がかかりました。もうリンゴをSpineに含めずに作成しようか迷うほどでした…

 f:id:charcotte:20181122220242p:plain

Shader Graph

 前回に引き続きShader Graphの力を使ってShaderの作成を行いました。

Dissolve Shader

 いったん黒く浸食されてから、消えていくようなシェーダです。一つのパラメータを動かすことで一連の演出を実現できるようにノードを組みました。基本的によくあるDissolveShaderの構造を改造するだけで実現できたので改めてShaderGraphの強さというのを実感しました…これらは薔薇・冠マテリアル適用されています。
DissolveShaderを作るにあたって以下のサンプルがとても分かりやすくて勉強になりました。

github.com

f:id:charcotte:20181122220806p:plainf:id:charcotte:20181122220810p:plain

Apple Shader

 基本的にはDissolve Shaderと同じようなシェーダですが、浸食された際に本体の部分を妖しく光らせるShaderとなってます。これも一つのパラメータを操作するだけで状態を変えられるような構造になってます。Dissolve Shaderを改造して同じShaderにしようか迷いましたが、グラフやパラメータがカオスになりそうだったので分けてしまいました。 

f:id:charcotte:20181122220949p:plainf:id:charcotte:20181122220955p:plain

感想

 冠にタッチすると世界が闇に飲まれていく様子などをShader等を駆使することで概ね自分の想像通りに実現できて満足です。前回よりShaderGraphをよりたくさん使うことができて表現の幅を広げることができたと感じます。Dissolve Shaderでは、UV座標で上から下へ崩壊していくように組んでみたのですが、Spineで出力されたテクスチャUVでは順番がちょっと不自然になってしまったので、もっとShaderを勉強して自然な演出ができるようにしたかったです。
今回はShaderを作ってWebGLでピンクになってしまったり(プロパティに_MainTexをつけ忘れてただけ…)、Spineでうまくマテリアルを分離できなかったりして、モチベーションが下がりまくって完成までめちゃくちゃ時間がかかってしまいました。モチベーションを下げないで創作を続けられるぐらい技術を上げたいです…( ;∀;)