もし恋のアニメーションの実装には、 - UIアニメーションツール「Titan」 - uGUIでベクター図形を描画可能にする「ベクターUI」 などの、社内で開発している基盤の仕組みを利用しました。
この発表では、 - TitanやベクターUIがどのようなものであるか - 具体的にもし恋のアニメーションをどう実装したか について説明します。
自作ツールTitanとベクターUIを使ったIDOLY PRIDEのUIアニメーションの実装2023/9/15 CA.Unity #7株式会社QualiArts 田村和範
View Slide
田村 和範2015年 サイバーエージェント新卒入社株式会社QualiArtsUnityエンジニアIDOLY PRIDE開発推進室UI系の基盤をよく作っています
CEDEC2023に登壇しましたQualiArts公式Speaker DeckやCEDiLに資料が上がっています
1IDOLY PRIDEと「もし恋」におけるアニメーション紹介
「IDOLY PRIDE」とはQualiArtsが開発・運用しているスマホ向けゲームアイドル事務所のマネージャーとしてアイドルの育成・マネジメントができる先日2周年を迎えた
「もし恋」とはもし恋＝もしも君と恋したらアイドルと疑似的に恋愛できるゲーム内コンテンツゲーム内で別のゲームをプレイしているという設定のため、デザインやアニメーションも新規で作られた
もし恋のアニメーション背景 レベルアップ 大事な場面 プレゼント
この発表で話すこともし恋のアニメーションの実装には、• UIアニメーションツール「Titan」• uGUIでベクター図形を描画可能にする「ベクターUI」などの仕組みを利用しました。この発表では、• TitanやベクターUIがどのようなものであるか• 具体的にもし恋のアニメーションをどう実装したかについて説明します。
対象のアニメーションもし恋ホーム背景の左上にあるうにょうにょに絞って説明します
2Titanの紹介
TitanとはQualiArtsで開発している社内向けUnityパッケージの一つUnityのTimeline上でUIのTweenアニメーションを構築するための仕組み
Titanの特徴● 馴染みやすいUI● 即座にプレビュー可能● アニメーションを動的に変更可能● 再利用可能● プロジェクト独自の拡張が可能詳しくはCEDECでの発表資料を御覧くださいm(_ _)m
Titanで目指していることUIデザイナーがUnity上でUIアニメーションを作成するフローの構築を目指している（※ただし、もし恋に関しては諸々の事情によりエンジニアである田村がTitanで作成）
3ベクターUIの紹介
QualiArtsで開発している社内向けUnityパッケージの一つuGUIで角丸や円などのベクター図形を描画するための仕組みベクターUIとは
ベクターUIの実現方法①メッシュによる方法メッシュの形状を目的の図形の形にする②シェーダーによる方法 フラグメントシェーダーで図形を表現する メッシュの形状はQuadなどの単純なもの
①メッシュによる方法メッシュはあくまで三角形の集合円のような曲線のある図形をなめらかに表現するには多くの頂点が必要となる特にアニメーションで毎フレーム動かすとなるとメッシュ構築のコストが気になる
②シェーダーによる方法曲線のある図形でも非常に綺麗に描画することが可能アニメーションのコストも基本的になし描画したい図形の形状によっては1枚のQuadでは表現が難しい場合があるので、必要に応じてメッシュの形状を変形させる場合もある
4実装のテクニック
うにょうにょまずはベタ塗りの方から説明します
ベクターUIによる折れ線表現各頂点で円弧状の曲線に沿ってカーブ頂点の位置、カーブの半径、線の太さ、端点の形状などを指定して図形の形状を変えられる
折れ線の実装1. 頂点の位置やカーブの半径に応じてメッシュを構築2. シェーダーで直線部分とカーブ部分で異なるロジックを適用して描画
直線部分とカーブ部分各部分の多角形を分かりやすく色付けするとこんな感じ
折れ線を動かすTitan拡張特定の頂点の座標をTitanで動かせるように
ベタ塗りうにょうにょの正体マスクしても良いけどしなくても良い
ドット模様のうにょうにょ以下のテクニックで実装1. RawImageのUV指定を使ったドット模様の描画2. 折れ線によるマスク3. 折れ線のアウトライン表現
RawImageのUV指定によるドット模様パターン画像の用意 UV RectのWとHを指定
折れ線によるマスクuGUIのMaskコンポーネントと組み合わせて他のUIを折れ線でマスクできる
折れ線のアウトライン折れ線のアウトラインを折れ線で表現する(！)目的の折れ線に応じて自動で折れ線によるアウトラインを設定してくれるコンポーネントを用意
ドット模様のうにょうにょ 完成手順おさらい1. RawImageのUV指定でドット模様を作る2. 折れ線のマスクでドット模様をくり抜く3. 折れ線によるアウトラインを適用4. Titanで頂点を動かす
5まとめ
まとめ● IDOLY PRIDEのもし恋のアニメーションをTitanとベクターUIを使って作成した● うにょうにょについては、ベクターUIの折れ線機能を使って表現した● さらに、マスク、UV指定、アウトラインなどのテクニックも使用した
ありがとうございました
qualiarts
poteboy
masasuzu
kei_s
rilmayer
lemiorhan
sansantech
rynsuke
onlinesalon
takanorig
naohachi89
coconala_engineer
nagix
tammyeverts
bkeepers
addyosmani
trallard
myddelton
philhawksworth
jennybc
dougneiner
maggiecrowley
trishagee
mclloyd