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

640 Views

May 09, 18

スライド概要

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

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

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

profile-image

リアルタイム3Dコンテンツを制作・運用するための世界的にリードするプラットフォームである「Unity」の日本国内における販売、サポート、コミュニティ活動、研究開発、教育支援を行っています。ゲーム開発者からアーティスト、建築家、自動車デザイナー、映画製作者など、さまざまなクリエイターがUnityを使い想像力を発揮しています。

シェア

埋め込む »CMSなどでJSが使えない場合

各ページのテキスト
1.

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

2.

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

3.

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

4.

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

5.

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

6.

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

7.

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

8.

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

9.

ステージ

11.

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

13.

六角形タイルもサポート (2018.2から)

14.

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

21.

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

22.

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

23.

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

24.

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

25.

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

26.

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

27.

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

28.

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

29.

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

30.

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

31.

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

34.

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

35.

Cinemachine

36.

Cinemachineは最近2Dにも対応

37.

単純な フォローカメラ

38.

Cinemachineの カメラ

40.

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

42.

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

43.

キャラクター

44.

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

45.

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

46.

ボーンを追加

47.

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

48.

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

49.

IKは?

50.

IKで動かすボーンを指定

51.

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

53.

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

54.

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

55.

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

56.

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

57.

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

58.

SIMPLE ANIMATION

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

ステートマシンは不要

60.

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

61.

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

62.

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

63.

TIMELINE

64.

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

65.

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

66.

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

67.

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

68.

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

69.

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

70.

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

71.

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

72.

パフォーマンス

73.

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

74.

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

75.

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

76.

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

77.

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

78.

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

79.

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

80.

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

82.

特に 新しい 機能はない

83.

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

84.

UIは PackageManagerに 移行するかも

85.

アセット

86.

新しい縮小アルゴリズム

87.

Bilinear mitchell(初期設定)

88.

ETC2 8bit PVRTC 4bit

89.

ETC2 8bit PVRTC 4bit

90.

ETC2 8bit ASTC 4x4 PVRTC

91.

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

92.

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

93.
[beta]
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;
}

95.

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