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

DAY3 2018/05/09 Unity 2Dアップデートとその周辺 山村 達彦 ユニティ・テクノロジーズ・ジャパ ン

Unityは2D機能もかなり充実してきた • 手軽に3Dゲームの開発を可能にするUnity 一時はUnity3Dと名乗ることもあった。 • 実際には2Dで使われることが多かった • 2013年頃から本格的に機能が追加され始めた

Unity 2Dと呼ばれる機能の誕生 2D当たり判定や物理演算の統合 直感的なスプライトの配置

Unity 4.3で本格的に機能が追加 • 2D Spriteワークフロー • 2D用Collider • 2D View • Sprite Renderer Unity 4.3

Unity 5.6で多くの機能が追加 • 9 Slice • ContactFilter2D • Physics Shape Editor • Distance • Composite Collider • Edge Radius • Sorting Group • Outline Editor • Axis Distance Sort • Sprite Atlas • Sprite Mask Unity 4.3 Unity 5.6

Unity 2017-18でも多くの機能が追加 今回の話 Unity 4.3 Unity 5.6

2Dアップデートと その周辺 その周辺 UI 2D パフォーマンス アセット

“ステージ”を もっと高度な UIとか 作りやすく キャラクター表現 パフォーマンスとか

ステージ

TileMapという機能 • タイルベースでステージを作る仕組み • タイルを塗るようにステージを作成できる • Unity 2017.2から TileMap

六角形タイルもサポート （2018.2から）

Tile タイルのアセット Brush タイルをタイルマップに塗る Palette Tilemap タイルを塗る際に使用するパレット タイルをセットするグリッド

カスタマイズできる項目 Tile タイルのアセット Brush タイルをタイルマップに塗る Palette Tilemap タイルを塗る際に使用するパレット タイルをセットするグリッド

タイルは 配置したあとの動きをカスタマイズ

●ブラシとタイルの幾つかのサンプル https://github.com/Unity-Technologies/2d-extras ●RoboDashのデモプロジェクト https://github.com/Unity-Technologies/2d-gamedemo-robodash In

• https://github.com/Unity-Technologies/2d-extras
• https://github.com/Unity-Technologies/2d-gamedemo-robodash

SpriteMaskでキャラクターが隠れないよう に、ステージの手前に穴をあける

CustomAxisTileMapの組み合わせ 後ろに回れるものはSpriteで配置

当たり判定と見た目が一致してない

絵と、実際の当たり判定が一致 当たり判定の形状を、 スプライトのものに合わせる

TileMapという機能 • タイルベースでステージを作る仕組み • タイルを塗るようにステージを作成できる • ブラシとタイルを拡張 • スプライト毎に当たり判定を微調整 • SpriteRenderer系の機能とも連携が可能 • Unity 2017.2から TileMap

2D Sprite Shapeという機能 • 伸縮するスプライトでステージを作る • タイルマップと比べてフレキシブルな マップを作りやすい • Unity 2018のPacakgeManagerで提供

スプライトを変形してステージを表現する

2D Sprite Shapeという機能 • 伸縮するスプライトでステージを作る • タイルマップと比べてフレキシブルな マップを作りやすい • Spriteの面に応じて表示する スプライトを設定する

2D Sprite Shapeという機能 • 伸縮するスプライトでステージを作る • タイルマップと比べてフレキシブルな マップを作りやすい • Spriteの面に応じて表示する スプライトを設定する • MeshCollider2DやEdgeCollider2Dの 当たり判定とも連携

Cinemachine

Cinemachineは最近２Dにも対応

単純な フォローカメラ

Cinemachineの カメラ

必要なのはColliderのポリゴン情報 • Cinemachineのカメラ移動範囲検出にはColliderを使用 • Colliderだが当たり判定は必要としていない • Rigidbody2DのSimulatedをOFFにすることで、 当たり判定や物理演算の対象外に設定できる

複数のカメラ 設定の切り替え

キャラクター

ボーンベースのアニメーション • スケルタルアニメーション • スプライトの回転や移動でアニメーションを 実現する

2D Animation • 2D IK IKを実現する • 2D Animation Spriteの変形等に対応

ボーンを追加

メッシュとウェイトを設定

GameObjectを動かして Spriteを変形できるように

IKは？

IKで動かすボーンを指定

エフェクターを追加して 足を動かす

描画順がグチャグチャ SortingGroupでキャラクター単位で描画する

Custom Axisで 下のスプライトを手前に表示する 機能を使用しても 変な干渉しなくなる

私に優しいレイアウト コンピューターに優しいレイアウト

• 大きなメモリ消費だが、少ないCPUオーバーヘッド • アニメーションの変更はテクスチャ依存、柔軟ではない • スムーズなアニメーションには多くのコマ数、メモリが必要 • アニメーション間のブレンドは出来ない • 高めのCPUオーバーヘッドだが少ないメモリ消費量 • アニメーションの調整が柔軟にできる • スムーズなアニメーションをCPUで実現する • アニメーション間のブレンドが可能

小さいオブジェクトを大量に 表示するのに向いている 一体のハイクォリティなキャラ を表示するのに向いている

SIMPLE ANIMATION

Simple Animation使用例
IEnumerator Start ()
{
var animation = GetComponent<SimpleAnimation>();
yield return new WaitForSeconds(1);
animation.Play("Damage");
animation.PlayQueued("Default", QueueMode.CompleteOthers);
}

ステートマシンは不要

2Dアニメーションのプレビューの変化

再生モデルとして「Prefab」を使用すれば プレビューできる

ピクセルパーフェクトなカメラ 普通の超低解像度 Camera Pixel Perfect Camera（開発中）

TIMELINE

Timelineは「タイミングを制御する」機能 • 時間指定で処理を実行 • パーティクルやアニメーションなど ゲームを再生せずプレビュー

キャラクターの動き カメラの動き 敵へのダメージ通知 ダメージ演出

4つのポイント • 動かすキャラクターとターゲット指定は、Timeline再生前にバインド

4つのポイント • 動かすキャラクターとターゲット指定は、Timeline再生前にバインド • 使用する内容はPrefabにまとめておく

４つのポイント • 動かすキャラクターとターゲット指定は、Timeline再生前にバインド • 使用する内容はPrefabにまとめておく • 移動はAnimationClipではなくTweenを使用する

４つのポイント • 動かすキャラクターとターゲット指定は、Timeline再生前にバインド • 使用する内容はPrefabにまとめておく • 移動はAnimationClipではなくTweenを使用する • 対象独自の動作はイベントを活用する

Timelineは重い？ • 意外と軽いTimeline • 重い場合はPlayableAssetを分ける

Timelineは重い？ • 意外と軽いTimeline • 重い場合はPlayableAssetを分ける • エディターとビルド後で負荷が全然違う • ビルド前はとても遅い • Timelineウィンドウがとても遅い • ビルド前はロードも遅い

パフォーマンス

Rigidbody 2Dのマルチスレッド対応 Physics2Dがジョブ上で動作

シングルスレッド マルチスレッド

テンプレートの設定が少し変化 Template：３D Dynamic Batchingは 初期設定でOFF

Template：2D Dynamic Batchingの初期設定はON

SpriteAtlasからスプライトを描画する場合… Dynamic Batching 同じAtlas内なら描画を バッチングして処理 Instancing UV座標が異なるので同じ スプライトとして処理されない 個別に処理される

テンプレートで色々と変化している • 2DはShadowが最初から無効（３Dは有効 • 2DはGPU Shiningが無効（３Dは有効 • 2DはGraphic Jobが無効（３Dは有効 • 2DはAlways Include Shaderがガッツリ削られてる • 3Dは初期カラースペースがリニアに（2Dはガンマ • LWRPやHDRPはSRPが最初からセットされてる（幾つかの2D機能が止まる） • 等々

Scriptable Render Pipeline レンダリングパス 色空間 リアルタイムライト ライトモード 物理ベースシェーダー シャドウモード 空のライティング 追加半透明

Scriptable Render Pipeline ２Dに不要なパスを削れる 一括でレンダリングを止めることもできる CustomAxisやSpriteMask等、 レンダリングパイプラインに組み込まれている 多くの機能が動作しなくなる

UI

特に 新しい 機能はない

GUI LayerはCameraに 標準で含まれなくなった

UIは PackageManagerに 移行するかも

アセット

新しい縮小アルゴリズム

Bilinear mitchell（初期設定）

ETC2 8bit PVRTC 4bit

ETC2 8bit PVRTC 4bit

ETC2 8bit ASTC 4x4 PVRTC

• ズームしてもクッキリきれい。 • 意外とデータサイズが小さい • ポリゴン数がとても多い • UIには現在非対応 • PackageManagerから入手 SVGサポート

SVGを導入後はSVGをエディターでインポートしてスプライトとして使用できるように SVGファイル プレビュー

SVGを動的に読み込む
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;
}

Timeline 初期設定の変化 Sprite Shape Physics2Dのマルチコア対応 Cinemachine Scriptable Render Pipeline 2D Animation UIの変化（特にない Simple Animation テクスチャの縮小アルゴルズム追加 Timeline テクスチャの圧縮フォーマット ２Dアニメーションプレビュー SVGサポート 新機能はだいたいpackage managerから取得 Thank you! ご静聴ありがとうございました