これは2019/6/27 開催のイベント「Unity道場6月〜新しいPrefabワークフロー入門とVectorGraphics〜」の講演資料の一つです。 Vector Graphics packageを使用してエモい表現を作る方法を紹介します。

1. VectorGraphicsで作る
エモい表現
宮田大輝
ユニティ・テクノロジーズ・ジャパン

2. 内容
• VectorGraphicsについて
• SVGインポート
• ランタイムメッシュ生成
• エモい〇〇を作る
• UI
• インフォグラフィック
• モーショングラフィックス

3. 今回のサンプルプロジェクト
https://github.com/gok11/VectorGraphicsMoGraphSamples
使用バージョン
Unity2019.1.8f1
VectorGraphics 2.0.0 preview2

4. エモい表現の例

6. 内容
• VectorGraphicsについて
• SVGインポート
• ランタイムメッシュ生成
• エモい〇〇を作る
• UI
• インフォグラフィック
• モーショングラフィックス

7. VectorGraphicsについて
できること
• ベクターグラフィック(SVG)のインポート
• ランタイムのメッシュ生成
Unity2018.1以降での利用推奨 ※まだPreview
マニュアル：
https://docs.unity3d.com/Packages/
com.unity.vectorgraphics@latest/index.html

8. VectorGraphicsについて

9. 内容
• VectorGraphicsについて
• SVGインポート
• ランタイムメッシュ生成
• エモい〇〇を作る
• UI
• インフォグラフィック
• モーショングラフィックス

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

11. SVGのおさらい
•Scalable Vector Graphicsの
略
•ベクターグラフィックを
テキスト形式(XML)で
記述したもの

12. SVGのインポート
1. パッケージのインストール
2. .svg ファイルをインポート
3. Sprite として
インポートされる

13. SVGインポートの裏側
①SVG読み込み ②図形データに変換 ③テッセレーション ④メッシュ生成

14. 普通のSpriteとの違い
普通のSprite
1. テクスチャへの参照
2. 透明部分を抜いたメッシュ
3. UV座標
VectorGraphicsのSprite
1. パスを元にしたメッシュ
2. 頂点カラー

15. 普通のSpriteとの違い
軽い（ことがある）
例えばUnityロゴ
unity-icon.png(255KB)
unity-icon.svg(1KB)

16. いつでもSVGを使えば良い？
•ラスター形式は画像サイズの増加と
容量のそれが大体一致するが、
ベクター形式はそうとは限らない
•複雑な形状などを含まない画像が相性〇

17. ちなみに

18. Spriteの頂点カラー指定
Sprite.OverrideGeometry() で
メッシュの再生成、UV指定が可能。
頂点カラーは
Experimental.U2D.SpriteDataAccessExtensions.
SetVertexAttribute() で指定している

19. 内容
• VectorGraphicsについて
• SVGインポート
• ランタイムメッシュ生成
• エモい〇〇を作る
• UI
• インフォグラフィック
• モーショングラフィックス

20. ランタイムメッシュ生成
円形のSpriteを
生成するまで

21. ランタイムメッシュ生成
①図形データの用意 ②テッセレーション ③メッシュ生成

22. ランタイムメッシュ生成
①図形データの用意 ②テッセレーション ③メッシュ生成
これらをスクリプトで書く必要がある

23. 図形データの用意
Scene
Shape
Bezier
Contour
Bezier
Segment
Bezier
Segment
Bezier
Contour
Bezier
Segment
Bezier
Segment
Shape
Bezier
Contour
Bezier
Segment
Bezier
Segment
Bezier
Contour
Bezier
Segment
Bezier
Segment

24. 図形データの用意
Scene
Shape
Bezier
Contour
Bezier
Segment
Bezier
Segment
Bezier
Contour
Bezier
Segment
Bezier
Segment
Shape
Bezier
Contour
Bezier
Segment
Bezier
Segment
Bezier
Contour
Bezier
Segment
Bezier
Segment
重要なのはここ

25. 図形データの用意
Shape
Bezier
Contour
Bezier
Segment
Bezier
Segment
Bezier
Contour
Bezier
Segment
Bezier
Segment
ベジェ曲線の制御点
図形の素となるベジェ曲線
図形の塗り、輪郭線、
図形が重なっている場合の制御

26. 図形データの用意
Shapeの用意
• 計算などを行う
• VectorUtils を活用する ←オススメ

27. 図形データの用意
VectorUtilsには
• 輪郭線データ(BezierContour)
• 図形データ(Shape)
を生成するヘルパーが用意されている

28. 図形データの用意
ヘルパーは５種の
図形をサポート
円/円弧/矩形/
直線/曲線

29. 図形データの用意
var shape = new Shape();
VectorUtils.MakeCircleShape(shape, position, radius);

30. テッセレーション処理
• テッセレーションの
パラメータを用意
再分割を行うまでの距離や
パスデータ評価の精度などを指定
• テッセレーションが一番重い
ランタイムで使う場合
StepDistance には注意

31. テッセレーション処理
• ジオメトリへの変換
VectorUtils.TessellateScene()

32. Sprite/メッシュへ出力
• Sprite
• メッシュ
• Sprite→テクスチャ
• Sprite→画面出力
が選べる

33. Sprite/メッシュへ出力

34. ランタイムメッシュ生成
重要なのはここだけ
あとは半定型

35. ランタイムメッシュ生成
たった4行！

36. シェーダーとの比較
• 単純/規則的な図形であればシェーダーが速いし良い
• 式に落とし込みにくいものや、有機的なものを
表現したい時、曲線から図形を生成できると嬉しいことも

37. 内容
• VectorGraphicsについて
• SVGインポート
• ランタイムメッシュ生成
• エモい〇〇を作る
• UI
• インフォグラフィック
• モーショングラフィックス

39. エモいUI
エモいポイント
• Material Designっぽいエフェクト
技術的な見所
• シェーダー不使用
• SpriteMask不使用

40. エモいUI
普通に円形のSpriteを
広げると右図のようになる
Clipperを指定すると、
指定した図形の形に
クリップできる

41. 図形データの用意
Scene
Shape
Bezier
Contour
Bezier
Segment
Bezier
Segment
Bezier
Contour
Bezier
Segment
Bezier
Segment
Clipper
Bezier
Contour
Bezier
Segment
Bezier
Segment
Bezier
Contour
Bezier
Segment
Bezier
Segment
ClipperはSceneに設定

42. エモいUI
Clipperには
円を生成した時のように
VectorUtilsを
利用しても良い
今回は角丸四角形が
欲しかったので
SVGを読み込み

43. 内容
• VectorGraphicsについて
• SVGインポート
• ランタイムメッシュ生成
• エモい〇〇を作る
• UI
• インフォグラフィック
• モーショングラフィックス

44. インフォグラフィックとは
文字だけでは伝わりにくい
情報やデータなどを視覚的に表現したもの
例：グラフ、電車の路面図

46. エモいインフォグラフィック
エモいポイント
• パッと表示するのではなくアニメーションするグラフ
技術的な見所
• LineRenderer不使用
• 多角形領域内のフィル

47. エモいインフォグラフィック
直線のパスを繋いでいくと
本来は対応していない多角形を描くことができる

48. エモいインフォグラフィック
折れ線用のパスで塗ると
意図しない塗られ方に
フィル部分は別の図形にする

49. プレゼンツールとの比較
• グラフを作りたいだけなら
絶対PowerPointとかの方が作りやすい
• しかしデータが動的な場合、
それに合わせたインフォグラフィックを
自動生成できるのは良い
• 例：音ゲープレイ中の現時点の
自分のスコアと全国スコアの比較

50. 内容
• VectorGraphicsについて
• SVGインポート
• ランタイムメッシュ生成
• エモい〇〇を作る
• UI
• インフォグラフィック
• モーショングラフィックス

51. モーショングラフィックスとは
文字やイラストなどの静止した素材に
移動、回転、拡大縮小などの動きを加えて
作成する映像作品のこと
観測範囲だと身近では
電車内広告に使われていることが多い

53. エモいモーショングラフィックス
エモいポイント
• DNAっぽい回転
• 線と重なった時の色反転
技術的な見所
• 中をくり抜いたSprite
• SpriteMaskを色反転のような演出に使用

54. SVGのフィル
VectorGraphicsは
基本的にSVG1.1の仕様準拠
fill-rule というオプションがある
ある点から見て右回りのパスは 1
左回りは -1 として、
その合計が 0 でないときは塗り潰すのが
nonzero（0以外判定）
奇数のときは塗りつぶすのが evenodd
（偶奇判定）
nonzero
evenodd

55. 中をくり抜いたSprite
つまり、evenoddを指定して2つの図形を描くと
重なっている部分はくり抜かれる

56. 中をくり抜いたSprite
半径の異なる円を含む図形データを作成
OddEven を指定すると内側の円でくり抜ける

57. エモいモーショングラフィックス
SpriteMaskは
SpriteRendererにマスクを
かけたい時に使える機能。
VectorGraphicsで生成した線を
Maskとして使用したい
これが…

58. エモいモーショングラフィックス
SpriteMaskは
SpriteRendererにマスクを
かけたい時に使える機能。
VectorGraphicsで生成した線を
Maskとして使用したい
こうなってほしい！

59. エモいモーショングラフィックス
同じ位置に対象のSpriteを2つ配置
Order in Layer は高めに
マスクと重なった時だけ消える方の
Sprite Renderer > MaskInteraction
を Visible OutsideMask に変更

60. エモいモーショングラフィックス
SpriteMaskのソースはアセットとして
保存されているSpriteのみ指定できる
生成したSpriteを使うにはそれを
渡すコンポーネントを書く

61. 動画編集ソフトとの比較
• 「映像作品」を作る場合、
原則動画編集ソフトを使った方が良い
• ゲームのローディング画面のアクセントや
シーン遷移のエフェクト、
インタラクションありの映像作品を作るのはアリ

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