Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

695 views

Published on

これは2019/6/27 開催のイベント「Unity道場6月〜新しいPrefabワークフロー入門とVectorGraphics〜」の講演資料の一つです。

Vector Graphics packageを使用してエモい表現を作る方法を紹介します。

Published in: Technology
  • Be the first to comment

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

  1. 1. VectorGraphicsで作る エモい表現 宮田大輝 ユニティ・テクノロジーズ・ジャパン
  2. 2. 内容 • VectorGraphicsについて • SVGインポート • ランタイムメッシュ生成 • エモい〇〇を作る • UI • インフォグラフィック • モーショングラフィックス
  3. 3. 今回のサンプルプロジェクト https://github.com/gok11/VectorGraphicsMoGraphSamples 使用バージョン Unity2019.1.8f1 VectorGraphics 2.0.0 preview2
  4. 4. エモい表現の例
  5. 5. 内容 • VectorGraphicsについて • SVGインポート • ランタイムメッシュ生成 • エモい〇〇を作る • UI • インフォグラフィック • モーショングラフィックス
  6. 6. VectorGraphicsについて できること • ベクターグラフィック(SVG)のインポート • ランタイムのメッシュ生成 Unity2018.1以降での利用推奨 ※まだPreview マニュアル: https://docs.unity3d.com/Packages/
 com.unity.vectorgraphics@latest/index.html
  7. 7. VectorGraphicsについて
  8. 8. 内容 • VectorGraphicsについて • SVGインポート • ランタイムメッシュ生成 • エモい〇〇を作る • UI • インフォグラフィック • モーショングラフィックス
  9. 9. ベクターグラフィックのおさらい ラスター形式:1 pixel の点が縦横大量に並んで構成される ベクター形式:線の長さ、色、位置といった
        図形情報が数値で記録されるデータ ラスター画像の拡大 ベクター画像の拡大
  10. 10. SVGのおさらい •Scalable Vector Graphicsの 略 •ベクターグラフィックを
 テキスト形式(XML)で
 記述したもの
  11. 11. SVGのインポート 1. パッケージのインストール 2. .svg ファイルをインポート 3. Sprite として
 インポートされる
  12. 12. SVGインポートの裏側 ①SVG読み込み ②図形データに変換 ③テッセレーション ④メッシュ生成
  13. 13. 普通のSpriteとの違い 普通のSprite 1. テクスチャへの参照 2. 透明部分を抜いたメッシュ 3. UV座標 VectorGraphicsのSprite 1. パスを元にしたメッシュ 2. 頂点カラー
  14. 14. 普通のSpriteとの違い 軽い(ことがある) 例えばUnityロゴ unity-icon.png(255KB) unity-icon.svg(1KB)
  15. 15. いつでもSVGを使えば良い? •ラスター形式は画像サイズの増加と
 容量のそれが大体一致するが、
 ベクター形式はそうとは限らない •複雑な形状などを含まない画像が相性〇
  16. 16. ちなみに
  17. 17. Spriteの頂点カラー指定 Sprite.OverrideGeometry() で
 メッシュの再生成、UV指定が可能。 頂点カラーは
 Experimental.U2D.SpriteDataAccessExtensions.
 SetVertexAttribute() で指定している
  18. 18. 内容 • VectorGraphicsについて • SVGインポート • ランタイムメッシュ生成 • エモい〇〇を作る • UI • インフォグラフィック • モーショングラフィックス
  19. 19. ランタイムメッシュ生成 円形のSpriteを 生成するまで
  20. 20. ランタイムメッシュ生成 ①図形データの用意 ②テッセレーション ③メッシュ生成
  21. 21. ランタイムメッシュ生成 ①図形データの用意 ②テッセレーション ③メッシュ生成 これらをスクリプトで書く必要がある
  22. 22. 図形データの用意 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
  23. 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. 24. 図形データの用意 Shape Bezier Contour Bezier Segment Bezier Segment Bezier Contour Bezier Segment Bezier Segment ベジェ曲線の制御点 図形の素となるベジェ曲線 図形の塗り、輪郭線、 図形が重なっている場合の制御
  25. 25. 図形データの用意 Shapeの用意 • 計算などを行う • VectorUtils を活用する ←オススメ
  26. 26. 図形データの用意 VectorUtilsには • 輪郭線データ(BezierContour) • 図形データ(Shape) を生成するヘルパーが用意されている

  27. 27. 図形データの用意 ヘルパーは5種の
 図形をサポート 円/円弧/矩形/
 直線/曲線
  28. 28. 図形データの用意 var shape = new Shape(); VectorUtils.MakeCircleShape(shape, position, radius);
  29. 29. テッセレーション処理 • テッセレーションの
 パラメータを用意
 
 再分割を行うまでの距離や
 パスデータ評価の精度などを指定 • テッセレーションが一番重い
 ランタイムで使う場合
 StepDistance には注意
  30. 30. テッセレーション処理 • ジオメトリへの変換
 
 VectorUtils.TessellateScene()
  31. 31. Sprite/メッシュへ出力 • Sprite • メッシュ • Sprite→テクスチャ • Sprite→画面出力 が選べる
  32. 32. Sprite/メッシュへ出力
  33. 33. ランタイムメッシュ生成 重要なのはここだけ あとは半定型
  34. 34. ランタイムメッシュ生成 たった4行!
  35. 35. シェーダーとの比較 • 単純/規則的な図形であればシェーダーが速いし良い • 式に落とし込みにくいものや、有機的なものを
 表現したい時、曲線から図形を生成できると嬉しいことも
  36. 36. 内容 • VectorGraphicsについて • SVGインポート • ランタイムメッシュ生成 • エモい〇〇を作る • UI • インフォグラフィック • モーショングラフィックス
  37. 37. エモいUI エモいポイント • Material Designっぽいエフェクト 技術的な見所 • シェーダー不使用 • SpriteMask不使用
  38. 38. エモいUI 普通に円形のSpriteを
 広げると右図のようになる Clipperを指定すると、
 指定した図形の形に
 クリップできる
  39. 39. 図形データの用意 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に設定
  40. 40. エモいUI Clipperには
 円を生成した時のように
 VectorUtilsを
 利用しても良い 今回は角丸四角形が
 欲しかったので
 SVGを読み込み
  41. 41. 内容 • VectorGraphicsについて • SVGインポート • ランタイムメッシュ生成 • エモい〇〇を作る • UI • インフォグラフィック • モーショングラフィックス
  42. 42. インフォグラフィックとは 文字だけでは伝わりにくい 情報やデータなどを視覚的に表現したもの 例:グラフ、電車の路面図
  43. 43. エモいインフォグラフィック エモいポイント • パッと表示するのではなくアニメーションするグラフ 技術的な見所 • LineRenderer不使用 • 多角形領域内のフィル
  44. 44. エモいインフォグラフィック 直線のパスを繋いでいくと 本来は対応していない多角形を描くことができる
  45. 45. エモいインフォグラフィック 折れ線用のパスで塗ると
 意図しない塗られ方に フィル部分は別の図形にする
  46. 46. プレゼンツールとの比較 • グラフを作りたいだけなら
 絶対PowerPointとかの方が作りやすい • しかしデータが動的な場合、
 それに合わせたインフォグラフィックを
 自動生成できるのは良い • 例:音ゲープレイ中の現時点の
   自分のスコアと全国スコアの比較
  47. 47. 内容 • VectorGraphicsについて • SVGインポート • ランタイムメッシュ生成 • エモい〇〇を作る • UI • インフォグラフィック • モーショングラフィックス
  48. 48. モーショングラフィックスとは 文字やイラストなどの静止した素材に
 移動、回転、拡大縮小などの動きを加えて
 作成する映像作品のこと 観測範囲だと身近では
 電車内広告に使われていることが多い
  49. 49. エモいモーショングラフィックス エモいポイント • DNAっぽい回転 • 線と重なった時の色反転 技術的な見所 • 中をくり抜いたSprite • SpriteMaskを色反転のような演出に使用
  50. 50. SVGのフィル VectorGraphicsは
 基本的にSVG1.1の仕様準拠 fill-rule というオプションがある ある点から見て右回りのパスは 1 
 左回りは -1 として、
 その合計が 0 でないときは塗り潰すのが nonzero(0以外判定) 奇数のときは塗りつぶすのが evenodd (偶奇判定) nonzero evenodd
  51. 51. 中をくり抜いたSprite つまり、evenoddを指定して2つの図形を描くと 重なっている部分はくり抜かれる
  52. 52. 中をくり抜いたSprite 半径の異なる円を含む図形データを作成 OddEven を指定すると内側の円でくり抜ける
  53. 53. エモいモーショングラフィックス SpriteMaskは
 SpriteRendererにマスクを
 かけたい時に使える機能。 VectorGraphicsで生成した線を
 Maskとして使用したい これが…
  54. 54. エモいモーショングラフィックス SpriteMaskは
 SpriteRendererにマスクを
 かけたい時に使える機能。 VectorGraphicsで生成した線を
 Maskとして使用したい こうなってほしい!
  55. 55. エモいモーショングラフィックス 同じ位置に対象のSpriteを2つ配置
 Order in Layer は高めに マスクと重なった時だけ消える方の
 Sprite Renderer > MaskInteraction
 を Visible OutsideMask に変更
  56. 56. エモいモーショングラフィックス SpriteMaskのソースはアセットとして
 保存されているSpriteのみ指定できる 生成したSpriteを使うにはそれを
 渡すコンポーネントを書く
  57. 57. 動画編集ソフトとの比較 • 「映像作品」を作る場合、
 原則動画編集ソフトを使った方が良い • ゲームのローディング画面のアクセントや
 シーン遷移のエフェクト、
 インタラクションありの映像作品を作るのはアリ
  58. 58. ありがとうございました!

×