はじめまして、
株式会社アスタスタのデザイナーTAKESHIMAと申します。

今年の7月より、 コエカタアプリで「メラメラ」「キンキン」「ゴツゴツ」の ３つのエフェクト追加をアップデートいたしました。

今回は、その3つのエフェクトをシェーダーグラフで開発していった感想を デザイナー視点でご紹介いたします。


コエカタアプリついての詳細はこちらをどうぞ！

まずはアイデア出しから

コエカタアプリをリリース以来
多くのフィードバックをいただく中で、
 「大きさや色以外にも面白い効果をつけてみたい」「もっと表現の幅を広げたい」 といったご要望をいただくようになりました。 

コエカタらしい効果はなんだろう？というところを足がかりに開発メンバーで協議を行い、 第一弾として
 「メラメラ」「キンキン」「ゴツゴツ」の３種類のエフェクト実装を目指す事に！

はじめてのシェーダーグラフ

立体の文字に対してエフェクトをつけていくにあたって、
UnityのShader Graph（シェーダーグラフ）を採用しました。

シェーダーとは簡単に言うと3Dオブジェクトに様々な効果を与えられるプログラム。 そしてシェーダーグラフは、
プログラミング無しでシェーダーを作る事ができるunityの公式ツールです。

いわゆるノードベースで設計していく事ができるため、
デザイナーでも直感的に作業を進めていく事ができます。

テキストベースのプログラミング環境を見ると 頭から煙が出てくる私にはぴったりです…！

良かったところ

デザイナー自身の手で設計していくことができるため、
エンジニアの方と分業して制作を進めることができました。

何より 「いい感じだけどもう少し色味を濃くしたいな…」 「違うテクスチャの乗せ方も試したいな…」 といった、
細かいところの調整をデザイナー自身で行えるのが非常に大きかったです。

苦労したところ

シェーダーグラフで直感的に作業を進めていけたのは良かったものの、
簡単な事ばかりではありませんでした。
適切なノードの選び方はまだまだ学ぶべき事が多く、 イメージするビジュアルにならない事もありました。

特に「キンキン」は 氷のような表現を詰めていく必要があったため、 白飛びしたり可読性が損なわれることが多く 調整にやや時間を要しました。

ただ、ノードベースでの作業は
YouTubeチャンネルやブログなど
制作のコツを紹介してくれている方も多くいらっしゃいますので、
様々な情報を参考にアプローチしていく事ができました。

また、身近なデザイナーに相談する時にも
画面を見せれば「こちらのノードに繋げてみてはどうか？」といった
調整がしやすくてその点も良かったかと思います。

紆余曲折を経て、
無事3つのエフェクトのリリースに至る事ができました。

今後についても 様々なエフェクトを追加していく予定です！

今回は以上となります。
最後までご覧いただきありがとうございました。