自作ツールTitanと ベクターUIを使った IDOLY PRIDEの UIアニメーションの実装

もし恋のアニメーションの実装には、
- UIアニメーションツール「Titan」
- uGUIでベクター図形を描画可能にする「ベクターUI」
などの、社内で開発している基盤の仕組みを利用しました。

この発表では、
- TitanやベクターUIがどのようなものであるか
- 具体的にもし恋のアニメーションをどう実装したか
について説明します。

Transcript

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