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

by QualiArts

Slide 1

Slide 1 text

自作ツールTitanとベクターUIを使った IDOLY PRIDEの UIアニメーションの実装 2023/9/15 CA.Unity #7 株式会社QualiArts 田村和範

Slide 2

Slide 2 text

田村和範 2015年サイバーエージェント新卒入社株式会社QualiArts Unityエンジニア IDOLY PRIDE 開発推進室 UI系の基盤をよく作っています

Slide 3

Slide 3 text

CEDEC2023に登壇しました QualiArts公式Speaker DeckやCEDiLに資料が上がっています

Slide 4

Slide 4 text

1 IDOLY PRIDEと「もし恋」におけるアニメーション紹介

Slide 5

Slide 5 text

「IDOLY PRIDE」とは QualiArtsが開発・運用しているスマホ向けゲームアイドル事務所のマネージャーとしてアイドルの育成・マネジメントができる先日2周年を迎えた

Slide 6

Slide 6 text

「もし恋」とはもし恋＝もしも君と恋したらアイドルと疑似的に恋愛できるゲーム内コンテンツゲーム内で別のゲームをプレイしているという設定のため、デザインやアニメーションも新規で作られた

Slide 7

Slide 7 text

もし恋のアニメーション背景レベルアップ大事な場面プレゼント

Slide 8

Slide 8 text

この発表で話すこともし恋のアニメーションの実装には、 • UIアニメーションツール「Titan」 • uGUIでベクター図形を描画可能にする「ベクターUI」などの仕組みを利用しました。この発表では、 • TitanやベクターUIがどのようなものであるか • 具体的にもし恋のアニメーションをどう実装したかについて説明します。

Slide 9

Slide 9 text

対象のアニメーションもし恋ホーム背景の左上にあるうにょうにょに絞って説明します

Slide 10

Slide 10 text

2 Titanの紹介

Slide 11

Slide 11 text

Titanとは QualiArtsで開発している社内向けUnityパッケージの一つ UnityのTimeline上でUIのTweenアニメーションを構築するための仕組み

Slide 12

Slide 12 text

Titanの特徴 ● 馴染みやすいUI ● 即座にプレビュー可能 ● アニメーションを動的に変更可能 ● 再利用可能 ● プロジェクト独自の拡張が可能詳しくはCEDECでの発表資料を御覧くださいm(_ _)m

Slide 13

Slide 13 text

Titanで目指していること UIデザイナーがUnity上でUIアニメーションを作成するフローの構築を目指している（※ただし、もし恋に関しては諸々の事情によりエンジニアである田村がTitanで作成）

Slide 14

Slide 14 text

3 ベクターUIの紹介

Slide 15

Slide 15 text

QualiArtsで開発している社内向けUnityパッケージの一つ uGUIで角丸や円などのベクター図形を描画するための仕組みベクターUIとは

Slide 16

Slide 16 text

ベクターUIの実現方法 ①メッシュによる方法メッシュの形状を目的の図形の形にする ②シェーダーによる方法　　フラグメントシェーダーで図形を表現する　　メッシュの形状はQuadなどの単純なもの

Slide 17

Slide 17 text

①メッシュによる方法メッシュはあくまで三角形の集合円のような曲線のある図形をなめらかに表現するには多くの頂点が必要となる特にアニメーションで毎フレーム動かすとなるとメッシュ構築のコストが気になる

Slide 18

Slide 18 text

②シェーダーによる方法曲線のある図形でも非常に綺麗に描画することが可能アニメーションのコストも基本的になし描画したい図形の形状によっては1枚のQuadでは表現が難しい場合があるので、必要に応じてメッシュの形状を変形させる場合もある

Slide 19

Slide 19 text

4 実装のテクニック

Slide 20

Slide 20 text

うにょうにょまずはベタ塗りの方から説明します

Slide 21

Slide 21 text

ベクターUIによる折れ線表現各頂点で円弧状の曲線に沿ってカーブ頂点の位置、カーブの半径、線の太さ、端点の形状などを指定して図形の形状を変えられる

Slide 22

Slide 22 text

折れ線の実装 1. 頂点の位置やカーブの半径に応じてメッシュを構築 2. シェーダーで直線部分とカーブ部分で異なるロジックを適用して描画

Slide 23

Slide 23 text

直線部分とカーブ部分各部分の多角形を分かりやすく色付けするとこんな感じ

Slide 24

Slide 24 text

折れ線を動かすTitan拡張特定の頂点の座標をTitanで動かせるように

Slide 25

Slide 25 text

ベタ塗りうにょうにょの正体マスクしても良いけどしなくても良い

Slide 26

Slide 26 text

ドット模様のうにょうにょ以下のテクニックで実装 1. RawImageのUV指定を使ったドット模様の描画 2. 折れ線によるマスク 3. 折れ線のアウトライン表現

Slide 27

Slide 27 text

RawImageのUV指定によるドット模様パターン画像の用意 UV RectのWとHを指定

Slide 28

Slide 28 text

折れ線によるマスク uGUIのMaskコンポーネントと組み合わせて他のUIを折れ線でマスクできる

Slide 29

Slide 29 text

折れ線のアウトライン折れ線のアウトラインを折れ線で表現する(！) 目的の折れ線に応じて自動で折れ線によるアウトラインを設定してくれるコンポーネントを用意

Slide 30

Slide 30 text

ドット模様のうにょうにょ完成手順おさらい 1. RawImageのUV指定でドット模様を作る 2. 折れ線のマスクでドット模様をくり抜く 3. 折れ線によるアウトラインを適用 4. Titanで頂点を動かす

Slide 31

Slide 31 text

5 まとめ

Slide 32

Slide 32 text

まとめ ● IDOLY PRIDEのもし恋のアニメーションをTitanとベクターUIを使って作成した ● うにょうにょについては、ベクターUIの折れ線機能を使って表現した ● さらに、マスク、UV指定、アウトラインなどのテクニックも使用した

Slide 33

Slide 33 text

ありがとうございました