$30 off During Our Annual Pro Sale. View Details »

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

QualiArts
September 18, 2023

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

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

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

QualiArts

September 18, 2023
Tweet

More Decks by QualiArts

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  5. 「IDOLY PRIDE」とは
    QualiArtsが開発・運用しているスマホ向けゲー

    アイドル事務所のマネージャーとして
    アイドルの育成・マネジメントができる
    先日2周年を迎えた

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  10. 2
    Titanの紹介

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  14. 3
    ベクターUIの紹介

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  19. 4
    実装のテクニック

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  31. 5
    まとめ

    View Slide

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

    View Slide

  33. ありがとうございました

    View Slide