【Unity道場】VectorGraphicsで作る エモい表現

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

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

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

• https://github.com/gok11/VectorGraphicsMoGraphSamples

エモい表現の例

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

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

• https://docs.unity3d.com/Packages/com.unity.vectorgraphics@latest/index.html

VectorGraphicsについて

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

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

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

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

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

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

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

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

ちなみに

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Sprite/メッシュへ出力

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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