2019/5/18 Unityの集い in大阪のLT資料です

1. VectorGraphicsで
モーショングラフィックスを作る
宮田 大輝
ユニティ・テクノロジーズ・ジャパン

2. 内容
• モーショングラフィックス？
• VectorGraphicsパッケージについて
• モーショングラフィックスの作り方

3. プロジェクト
今回のサンプルプロジェクト
https://github.com/gok11/VectorGraphicsMoGraphSamples
使用バージョン：
Unity 2019.1.0f2
VectorGraphics preview26

4. モーショングラフィックス？

5. モーショングラフィックス？
文字やイラストなどの静止した素材に
移動、回転、拡大縮小などの動きを加えて
作成する映像作品のこと
2D 作品だと AfterEffects や AviUtl などを
用いて作成されることが多い

6. Unityでの作例

7. https://youtu.be/iGULWxZSsvo

8. 登場した図形の種類？

9. 4種類

10. 円弧矩形 扇円

11. VectorGraphicsパッケージについて

12. VectorGraphicsについて
ベクターグラフィック(SVG)のインポート、
ランタイムメッシュ生成ができるパッケージ
Unity2018.1以降での利用推奨
※現時点でPreview
マニュアル：
https://docs.unity3d.com/Packages
/com.unity.vectorgraphics@latest/index.html
今回は主にランタイム生成の機能を使用

13. ベクターグラフィック？
ラスター形式：1 pixelの点が縦横に大量に並んで構成されるデータ
ベクター形式：線の長さ、色、位置といった
図形情報が数値で記録されるデータ
ラスター画像の拡大 ベクター画像の拡大

14. VectorGraphics利用手順

15. 円弧矩形 円
VectorGraphicsで作成したメッシュ達

16. メッシュ生成の流れ
②輪郭線データ ③テッセレーション ④メッシュ生成①必要データを渡す

17. メッシュ生成の流れ
②輪郭線データ ③テッセレーション ④メッシュ生成①必要データを渡す
MakeCircle
Shape()
等のヘルパー

18. メッシュ生成の流れ
②輪郭線データ ③テッセレーション ④メッシュ生成①必要データを渡す
MakeCircle
Shape()
等のヘルパー
SVGファイル

19. VectorGraphicsパッケージについて
ランタイムでのメッシュ
生成用ヘルパーは
円, 円弧, 矩形, 直線, 曲線
をサポート
出力先は
メッシュとスプライト
から選べる

20. VectorGraphicsパッケージについて
扇型が欲しかったが
未サポートのため これは自作

21. モーショングラフィックスの作り方

22. モーショングラフィックスの作り方
VectorGraphics 以外に使用したのは
Timeline の Animation Track と Activation Track だけ
VectorGraphics のメッシュ生成は現時点で
それ用のコンポーネントなどはないので、
プロパティを弄ると図形が描画されるものを作って
Animation Track から操作という仕様

23. これのアニメーション
を作ります

24. Playable Director の作成
ゲームオブジェクトを選択したまま
Timeline ウィンドウを開き、
Create ボタンを押して
Playable アセットを作成

25. アニメーション対象の準備
2D > Sprite から Circle という名前の
ゲームオブジェクトを作成
Animator コンポーネントを追加
Timeline ウィンドウで
Animation Track を作成し
対象として Circle を D&D

26. アニメーション対象の準備
Circle Builder コンポーネントの追加
※サンプルプロジェクト同梱
Animation Track にある
赤丸のレコードボタンを押す
→レコードモードの有効化

27. 拡大アニメーション
円の拡大アニメーションをさせるため、
Radius X, Y の名前の上で右クリック、
Add Key を押す
Timeline ウィンドウで
再生ヘッド(白い縦線部) を
60 に移動、Radius X, Y を 150 に

29. マスク範囲拡大アニメーション
円消失アニメーションのため、
再生ヘッドを 10 に移動、
Mask X, Y の名前の上で右クリック、
Add Key を押す
再生ヘッドを70 に移動、
Mask X, Y を 150 に

31. 参考資料
図形の扱い方、作例は YouTube の
AfterEffects チュートリアルがとても参考に
after effects motion graphics [検索]

32. ご清聴ありがとうございました！