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.

【Unite 2018 Tokyo】Unity 2D機能のアップデートとその周辺

33,164 views

Published on

講演者:山村 達彦(ユニティ・テクノロジーズ・ジャパン合同会社)
   :京野 光平 a.k.a. ntny(ユニティ・テクノロジーズ・ジャパン合同会社)

こんな人におすすめ
・2Dゲームを作る方
・2Dの新機能に興味のある方

受講者が得られる知見
・Unityで2Dゲームを作る時に便利な機能

Published in: Technology
  • Be the first to comment

【Unite 2018 Tokyo】Unity 2D機能のアップデートとその周辺

  1. 1. Unity 2Dアップデートとその周辺 ユニティ・テクノロジーズ・ジャパン 2018/05/09DAY3 山村 達彦
  2. 2. Unityは2D機能もかなり充実してきた • 手軽に3Dゲームの開発を可能にするUnity
 一時はUnity3Dと名乗ることもあった。 • 実際には2Dで使われることが多かった • 2013年頃から本格的に機能が追加され始めた
  3. 3. Unity 2Dと呼ばれる機能の誕生 直感的なスプライトの配置 2D当たり判定や物理演算の統合
  4. 4. Unity 4.3で本格的に機能が追加 • 2D Spriteワークフロー • 2D用Collider • 2D View • Sprite Renderer Unity 4.3
  5. 5. Unity 5.6で多くの機能が追加 • 9 Slice • Physics Shape Editor • Composite Collider • Sorting Group • Axis Distance Sort • Sprite Atlas • Sprite Mask • ContactFilter2D • Distance • Edge Radius • Outline Editor Unity 5.6Unity 4.3
  6. 6. Unity 2017-18でも多くの機能が追加 Unity 5.6Unity 4.3 今回の話
  7. 7. 2D UI パフォーマンス アセット その周辺 2Dアップデートと
 その周辺
  8. 8. “ステージ”を 作りやすく もっと高度な キャラクター表現 UIとか
 パフォーマンスとか
  9. 9. ステージ
  10. 10. TileMapという機能 • タイルベースでステージを作る仕組み • タイルを塗るようにステージを作成できる • Unity 2017.2から TileMap
  11. 11. 六角形タイルもサポート (2018.2から)
  12. 12. Tilemap タイルをセットするグリッド Tile タイルのアセット Palette タイルを塗る際に使用するパレット Brush タイルをタイルマップに塗る
  13. 13. Tilemap タイルをセットするグリッド Tile タイルのアセット Palette タイルを塗る際に使用するパレット Brush タイルをタイルマップに塗る カスタマイズできる項目
  14. 14. タイルは 配置したあとの動きをカスタマイズ
  15. 15. ●ブラシとタイルの幾つかのサンプル
  https://github.com/Unity-Technologies/2d-extras
 ●RoboDashのデモプロジェクト
  https://github.com/Unity-Technologies/2d-gamedemo-robodash In
  16. 16. SpriteMaskでキャラクターが隠れないよう に、ステージの手前に穴をあける
  17. 17. CustomAxisTileMapの組み合わせ 後ろに回れるものはSpriteで配置
  18. 18. 当たり判定と見た目が一致してない
  19. 19. 当たり判定の形状を、
 スプライトのものに合わせる 絵と、実際の当たり判定が一致
  20. 20. TileMapという機能 • タイルベースでステージを作る仕組み • タイルを塗るようにステージを作成できる • ブラシとタイルを拡張 • スプライト毎に当たり判定を微調整 • SpriteRenderer系の機能とも連携が可能 • Unity 2017.2から TileMap
  21. 21. 2D Sprite Shapeという機能 • 伸縮するスプライトでステージを作る • タイルマップと比べてフレキシブルな
 マップを作りやすい • Unity 2018のPacakgeManagerで提供
  22. 22. スプライトを変形してステージを表現する
  23. 23. 2D Sprite Shapeという機能 • 伸縮するスプライトでステージを作る • タイルマップと比べてフレキシブルな
 マップを作りやすい • Spriteの面に応じて表示する
 スプライトを設定する
  24. 24. 2D Sprite Shapeという機能 • 伸縮するスプライトでステージを作る • タイルマップと比べてフレキシブルな
 マップを作りやすい • Spriteの面に応じて表示する
 スプライトを設定する • MeshCollider2DやEdgeCollider2Dの
 当たり判定とも連携
  25. 25. Cinemachine
  26. 26. Cinemachineは最近2Dにも対応
  27. 27. 単純な フォローカメラ
  28. 28. Cinemachineの カメラ
  29. 29. 必要なのはColliderのポリゴン情報 • Cinemachineのカメラ移動範囲検出にはColliderを使用 • Colliderだが当たり判定は必要としていない • Rigidbody2DのSimulatedをOFFにすることで、
 当たり判定や物理演算の対象外に設定できる
  30. 30. 複数のカメラ
 設定の切り替え
  31. 31. キャラクター
  32. 32. ボーンベースのアニメーション • スケルタルアニメーション • スプライトの回転や移動でアニメーションを
 実現する
  33. 33. 2D Animation • 2D IK
 IKを実現する • 2D Animation
 Spriteの変形等に対応
  34. 34. ボーンを追加
  35. 35. メッシュとウェイトを設定
  36. 36. GameObjectを動かして
 Spriteを変形できるように
  37. 37. IKは?
  38. 38. IKで動かすボーンを指定
  39. 39. エフェクターを追加して
 足を動かす
  40. 40. 描画順がグチャグチャ SortingGroupでキャラクター単位で描画する
  41. 41. Custom Axisで
 下のスプライトを手前に表示する
 機能を使用しても
 変な干渉しなくなる
  42. 42. コンピューターに優しいレイアウト私に優しいレイアウト
  43. 43. • 大きなメモリ消費だが、少ないCPUオーバーヘッド • アニメーションの変更はテクスチャ依存、柔軟ではない • スムーズなアニメーションには多くのコマ数、メモリが必要 • アニメーション間のブレンドは出来ない • 高めのCPUオーバーヘッドだが少ないメモリ消費量 • アニメーションの調整が柔軟にできる • スムーズなアニメーションをCPUで実現する • アニメーション間のブレンドが可能
  44. 44. 小さいオブジェクトを大量に 表示するのに向いている 一体のハイクォリティなキャラ を表示するのに向いている
  45. 45. SIMPLE ANIMATION
  46. 46.     IEnumerator Start ()     {         var animation = GetComponent<SimpleAnimation>();         yield return new WaitForSeconds(1);         animation.Play("Damage");         animation.PlayQueued("Default", QueueMode.CompleteOthers);     } Simple Animation使用例 ステートマシンは不要
  47. 47. 2Dアニメーションのプレビューの変化
  48. 48. 再生モデルとして「Prefab」を使用すれば プレビューできる
  49. 49. Pixel Perfect Camera(開発中)普通の超低解像度 Camera ピクセルパーフェクトなカメラ
  50. 50. TIMELINE
  51. 51. Timelineは「タイミングを制御する」機能 • 時間指定で処理を実行 • パーティクルやアニメーションなど
 ゲームを再生せずプレビュー
  52. 52. キャラクターの動き 敵へのダメージ通知カメラの動き ダメージ演出
  53. 53. 4つのポイント • 動かすキャラクターとターゲット指定は、Timeline再生前にバインド
  54. 54. 4つのポイント • 動かすキャラクターとターゲット指定は、Timeline再生前にバインド • 使用する内容はPrefabにまとめておく
  55. 55. 4つのポイント • 動かすキャラクターとターゲット指定は、Timeline再生前にバインド • 使用する内容はPrefabにまとめておく • 移動はAnimationClipではなくTweenを使用する
  56. 56. 4つのポイント • 動かすキャラクターとターゲット指定は、Timeline再生前にバインド • 使用する内容はPrefabにまとめておく • 移動はAnimationClipではなくTweenを使用する • 対象独自の動作はイベントを活用する
  57. 57. Timelineは重い? • 意外と軽いTimeline • 重い場合はPlayableAssetを分ける
  58. 58. • 意外と軽いTimeline • 重い場合はPlayableAssetを分ける • エディターとビルド後で負荷が全然違う • ビルド前はとても遅い • Timelineウィンドウがとても遅い • ビルド前はロードも遅い Timelineは重い?
  59. 59. パフォーマンス
  60. 60. Physics2Dがジョブ上で動作 Rigidbody 2Dのマルチスレッド対応
  61. 61. マルチスレッドシングルスレッド
  62. 62. テンプレートの設定が少し変化 Template:3D Dynamic Batchingは 初期設定でOFF
  63. 63. Template:2D Dynamic Batchingの初期設定はON
  64. 64. SpriteAtlasからスプライトを描画する場合… Dynamic Batching Instancing 同じAtlas内なら描画を
 バッチングして処理 UV座標が異なるので同じ
 スプライトとして処理されない 個別に処理される
  65. 65. テンプレートで色々と変化している • 2DはShadowが最初から無効(3Dは有効 • 2DはGPU Shiningが無効(3Dは有効 • 2DはGraphic Jobが無効(3Dは有効 • 2DはAlways Include Shaderがガッツリ削られてる • 3Dは初期カラースペースがリニアに(2Dはガンマ • LWRPやHDRPはSRPが最初からセットされてる(幾つかの2D機能が止まる) • 等々
  66. 66. Scriptable Render Pipeline  追加半透明  レンダリングパス  色空間  リアルタイムライト  ライトモード  物理ベースシェーダー  シャドウモード  空のライティング
  67. 67. 2Dに不要なパスを削れる
 一括でレンダリングを止めることもできる CustomAxisやSpriteMask等、
 レンダリングパイプラインに組み込まれている
 多くの機能が動作しなくなる Scriptable Render Pipeline
  68. 68. UI
  69. 69. 特に
 新しい
 機能はない
  70. 70. GUI LayerはCameraに 標準で含まれなくなった
  71. 71. UIは PackageManagerに 移行するかも
  72. 72. アセット
  73. 73. 新しい縮小アルゴリズム
  74. 74. Bilinear mitchell(初期設定)
  75. 75. ETC2 8bit PVRTC 4bit
  76. 76. ETC2 8bit PVRTC 4bit
  77. 77. ETC2 8bit ASTC 4x4 PVRTC
  78. 78. • ズームしてもクッキリきれい。 • 意外とデータサイズが小さい • ポリゴン数がとても多い • UIには現在非対応 • PackageManagerから入手 SVGサポート
  79. 79. SVGファイル プレビュー SVGを導入後はSVGをエディターでインポートしてスプライトとして使用できるように
  80. 80. var tessOptions = new VectorUtils.TessellationOptions() { StepDistance = 100.0f, MaxCordDeviation = 0.5f, MaxTanAngleDeviation = 0.1f, SamplingStepSize = 0.01f }; var sceneInfo = SVGParser.ImportSVG(new StringReader(svg)); var geoms = VectorUtils.TessellateScene(sceneInfo.Scene, tessOptions); var sprite = VectorUtils.BuildSprite(geoms, 10.0f, VectorUtils.Alignment.Center, Vector2.zero, 128, true); GetComponent<SpriteRenderer>().sprite = sprite; } SVGを動的に読み込む
  81. 81. Thank you! ご静聴ありがとうございました 初期設定の変化 Physics2Dのマルチコア対応 Scriptable Render Pipeline UIの変化(特にない テクスチャの縮小アルゴルズム追加 テクスチャの圧縮フォーマット SVGサポート 新機能はだいたいpackage managerから取得 Timeline Sprite Shape Cinemachine 2D Animation Simple Animation Timeline 2Dアニメーションプレビュー

×