【Unity】uGUIをTimelineで制御できる「Unity UI Playables」を公開しました

UnityのuGUIをTimelineで制御できる「Unity UI Playables」を公開しました。

github.com

概要

Unity UI PlayablesはUnity UI(uGUI)をTimelineで制御するためのTrackやClipのセットです。

f:id:halya_11:20210401104447g:plain
Demo

Unity UI(uGUI)をタイムラインで制御可能

あらゆるuGUIのコンポーネントとそのパラメータを制御することができます。

f:id:halya_11:20210401105056p:plain
uGUIをタイムラインで制御

イージング、アニメーションカーブに対応

アニメーションはイージング関数を使って簡単に設定することができます。
また、複雑なアニメーションを作りたい場合にはアニメーションカーブを使用することもできます。

f:id:halya_11:20210401105448p:plain
Curve

また、アニメーションのループも可能です(Repeat、Reverse、PingPongに対応)。

ブレンド可能

全てのクリップ、すべてのパラメータはブレンド可能です。

f:id:halya_11:20210401105357p:plain
ブレンド可能

使い方

インストール
  1. Window > Package ManagerからPackage Managerを開く
  2. 「+」ボタン > Add package from git URL
  3. 以下を入力

f:id:halya_11:20210407093633p:plain
Package Manager

あるいはPackages/manifest.jsonを開き、dependenciesブロックに以下を追記します。

{
    "dependencies": {
        "com.harumak.unityuiplayables": "https://github.com/Haruma-K/UnityUIPlayables.git?path=/Assets/UnityUIPlayables"
    }
}

バージョンを指定したい場合には以下のように記述します。

トラックとクリップを作成

TimelineのTrack追加ボタンを押下し、UnityUIPlayables以下のトラックを選択します。

f:id:halya_11:20210401224806p:plain
トラックを作成

次にトラックに対応するクリップを追加します。
パラメータはClipのインスペクタから制御できます。

制御できるパラメータ一覧

コンポーネント パラメータ名
RectTransform Anchored Position
Size Delta
Local Rotation
Local Scale
Graphic Color
Image Color
Fill Amount
RawImage Color
UV Rect
Text Color
Font Size
Line Spacing
Text (Text Mesh Pro) Font Size
Color
Gradient (Top Left / Top Right / Bottom Left / Bottom Right)
Spacing (Character / Line / Word / Paragraph)
Face Color (Only at Runtime)
Outline Color (Only at Runtime)
Outline Width (Only at Runtime)
Slider Value
Canvas Group Alpha

デモ

デモシーンは以下の手順で再生できます。

  1. リポジトリをクローンする
  2. 以下のシーンを開いて再生

リポジトリ

github.com