[Unity] よーし、パパ Cinemachineを2Dプロジェクトに適応して遊んじゃうぞー / Adapt cinemchine to 2D project

by lycoris102

Slide 1

Slide 1 text

Unity++ ショートセッション勉強会 presented by Unity部よーし、パパ青木とと@lycoris102 Cinemachineを 2Dプロジェクトに適応して遊んじゃうぞー

Slide 2

Slide 2 text

2 このスライドはgifが多用されていますが SpeakerDeckでは再生されません諸注意後日 UnityLearningMaterials にて動画が公開される予定ですまたQiitaに同一の内容の掲載も考えております＼ごめんなさい／

Slide 3

Slide 3 text

だれ？ 3 @lycoris102 青木ととねんれい:29 しごと: 株式会社キッズスターかぞく: 妻と3歳の息子・Unityアンバサダー・Gotanda.unity ・UnityDesigner’sCafe ・勉強会主催/サポート・ゆるふわゲームクリエイター

Slide 4

Slide 4 text

だれ？ 4 #unity1week でゲームを作るのも好きです https://unityroom.com/users/lycoris102

Slide 5

Slide 5 text

5 2Dプラットフォーマー前提今日のお題

Slide 6

Slide 6 text

6 このアセットのサンプルプロジェクトを使います元々はインク効果/飛沫表現を実現するためのアセット前提

Slide 7

Slide 7 text

7 本来はこういうことができるアセット前提 Qiitaで紹介してます: [Unity] StainSystemを使用してオブジェクトにインク効果を適用する

Slide 8

Slide 8 text

8 突然ですが…… 「カメラをプレイヤーに追従させる処理」どう実装しますか？カメラをプレイヤーに追従させる

Slide 9

Slide 9 text

9 カメラとプレイヤーを親子関係にするカメラをプレイヤーに追従させる

Slide 10

Slide 10 text

10 (Fixed)Updateでtransform.positionを追従させるもしくはカメラをプレイヤーに追従させる

Slide 11

Slide 11 text

11 ParentConstrainを使うもしくはカメラをプレイヤーに追従させる指定したTransformに追従する / 任意のオフセットも設定可能で親子関係にしたくないときに使う

Slide 12

Slide 12 text

12 どれも「カメラをプレイヤーに追従させる」という要件を満たす!! やったーカメラをプレイヤーに追従させる

Slide 13

Slide 13 text

13 どれも「カメラをプレイヤーに追従させる」という要件を満たす!! うーん…… もっといい感じに動かしてほしいですね上司 …… カメラをプレイヤーに追従させる

Slide 14

Slide 14 text

14 「いい感じ」とは？いい感じなカメラワーク

Slide 15

Slide 15 text

15 「いい感じ」の一例「遅延移動したりプレイヤーの先読みしたい」  「特定の範囲から外を見せたくない」「ステージ間の移動に対応してほしい」「複数のターゲットを画面に収めてほしい」「カメラを揺らしたい」 ……etc いい感じなカメラワークよくばりセット

Slide 16

Slide 16 text

16 「いい感じ」の一例「遅延移動したりプレイヤーの先読みしたい」  「特定の範囲から外を見せたくない」「ステージ間の移動に対応してほしい」「複数のターゲットを画面に収めてほしい」「カメラを揺らしたい」 ……etc Cinemachineを使って立ち向かっていくぞ！いい感じなカメラワーク

Slide 17

Slide 17 text

17 Cinemachineとは？ Cinemachineについて

Slide 18

Slide 18 text

18 https://unity.com/ja/unity/features/editor/art-and-design/cinemachine Unity2017にてリリースされた新しいカメラシステム Cinemachineについて

Slide 19

Slide 19 text

19 現在はPackageManager経由でインストールする Cinemachineについて

Slide 20

Slide 20 text

20 いい感じ(1) 遅延移動したりプレイヤーの先読みをしたいいい感じ(1) 遅延移動したりプレイヤーの先読みをしたい Cinemachine/Bodyの設定で解決する

Slide 21

Slide 21 text

21 “VirtualCamera”というコンポーネントでカメラを操作する GameObject Cameraコンポーネント VirtualCameraコンポーネント座標や角度/拡縮を操作いい感じ(1) 遅延移動したりプレイヤーの先読みをしたい

Slide 22

Slide 22 text

22 Cinemachine -> Create 2D Camera で2D用の設定を適応した VirtualCameraを追加する VirtualCameraの設定のプリセットが色々用意されていますいい感じ(1) 遅延移動したりプレイヤーの先読みをしたい

Slide 23

Slide 23 text

23 ChinemachineVirtualCameraではどういう風にカメラを動かすかを設定できるいい感じ(1) 遅延移動したりプレイヤーの先読みをしたい Follow どのオブジェクトを追従対象とするか Body カメラをどのように移動させるか

Slide 24

Slide 24 text

24 2D用の設定では BodyがFraming Transposerに設定 Do nothing カメラの移動は行わない Framing Transposer 2D用にXY平面での移動に特化した設定 Hard Lock To Target Tragetの座標と完全に同期する Orbital Transposer ターゲティング+入力によるカメラ移動 Tracked Dolly 指定したパスに沿ってカメラ移動する Transposer Tragetに追従するいい感じ(1) 遅延移動したりプレイヤーの先読みをしたい

Slide 25

Slide 25 text

25 OrthographicSizeを調整して Followにオブジェクトを追加することでもういい感じにカメラ追従ができる完全にプレイヤーに同期せず、ちょっと遅延追従している感じがそれっぽいいい感じ(1) 遅延移動したりプレイヤーの先読みをしたい

Slide 26

Slide 26 text

26 Framing Transposerは設定できる項目が多く細かい調整が可能 Lookahead ターゲットの動きに基づく先読み移動の設定 Damping カメラの反応/数字が大きいほど反応が遅い ScreenX/Y どの位置にターゲットを配置するか DeadZone 範囲内にターゲットがいる時カメラ移動しない SoftZone 徐々にカメラ移動させる範囲 https://docs.unity3d.com/Packages/[email protected]/manual/ CinemachineBodyFramingTransposer.html いい感じ(1) 遅延移動したりプレイヤーの先読みをしたい

Slide 27

Slide 27 text

27 Lookahead ターゲットの動きに基づく先読み移動の設定 Time: 0(sec) 先読みをしていない状態いい感じ(1) 遅延移動したりプレイヤーの先読みをしたい

Slide 28

Slide 28 text

28 Lookahead ターゲットの動きに基づく先読み移動の設定 Time: 1(sec)  Smooth: 3(Min) 1秒後にいるであろう位置を先読みして移動いい感じ(1) 遅延移動したりプレイヤーの先読みをしたい

Slide 29

Slide 29 text

29 Lookahead ターゲットの動きに基づく先読み移動の設定 Time: 1(sec)  Smooth: 30(Max) 滑らかな動きになるが予測が遅れる TimeとSmooth小さい値からすこしずつ調整するいい感じ(1) 遅延移動したりプレイヤーの先読みをしたい

Slide 30

Slide 30 text

30 ScreenX/Y どの位置にターゲットを配置するかいい感じ(1) 遅延移動したりプレイヤーの先読みをしたい

Slide 31

Slide 31 text

31 Damping カメラの反応/数字が大きいほど反応が遅い次に紹介するSoftZoneに侵入した時のカメラの移動に影響いい感じ(1) 遅延移動したりプレイヤーの先読みをしたい

Slide 32

Slide 32 text

32 DeadZone 範囲内にターゲットがいる時カメラ移動しない SoftZone 徐々にカメラ移動させる範囲 4PGU;POF %FBE;POF ΧϝϥҠಈ ͠ͳ͍ λʔήοτΛऩΊΔํ޲ʹঃʑʹ௥ै ͜ͷൣғΑΓ֎ʹग़Α͏ͱ͢Δͱ໰౴ແ༻ͰΧϝϥ௥ै SoftZoneにおけるカメラの移動スピードはDumpingの設定に依存するいい感じ(1) 遅延移動したりプレイヤーの先読みをしたい

Slide 33

Slide 33 text

33 2Dに特化したカメラ追従機能 FramingTransposerの設定を調整して自分だけのいい感じカメラを作ろう！いい感じ(1) 遅延移動したりプレイヤーの先読みをしたい

Slide 34

Slide 34 text

34 いい感じ(2) 特定の範囲から外を見せたくないいい感じ(2) 特定の範囲から外を見せたくない Cinemachineの拡張機能: CinemachineConﬁnerを使って解消する

Slide 35

Slide 35 text

35 壁や背景の画像を引き延ばして解決する手もあるけど素材によっては厳しいことも壁の外/背景の上下などが映るとダサいこことかここいい感じ(2) 特定の範囲から外を見せたくない

Slide 36

Slide 36 text

36 Cinemachineの拡張機能を使う CinemachineCameraOﬀset  各種処理の後にオフセットを付けられる CinemachineCollider カメラがColliderに衝突した時の設定 CinemachineConﬁner 範囲外を描画しないようにする CinemachineFollowZoom ターゲットサイズをキープするようFOV調整 CinemachineStoryboard カメラの出力の上に画像を被せる CinemachineExtension (Cinemachine拡張のBaseClass) CinemachineImpulseListener 振動信号を受け取り、カメラシェイクする https://docs.unity3d.com/Packages/[email protected]/api/ いい感じ(2) 特定の範囲から外を見せたくない

Slide 37

Slide 37 text

37 CinemachineConﬁner 範囲外を描画しないようにする PolygonCollider2Dか CompositeCollider2Dを指定するいい感じ(2) 特定の範囲から外を見せたくない

Slide 38

Slide 38 text

38 CompositeCollider2Dを使う親に設定すると子のColliderをマージしてくれる君・子のColliderには「Used by Composite」のチェックを入れる・今回は親のRigidbody2Dの「Simulated」のチェックを外す  ・CompositeColliderのGeometryTypeを「Polygon」にするいい感じ(2) 特定の範囲から外を見せたくない

Slide 39

Slide 39 text

39 CinemachineConﬁnerの  BoundingShape2DにColliderを設定するカメラが追従しないだけで、普通に領域外に出れてしまうので注意いい感じ(2) 特定の範囲から外を見せたくない

Slide 40

Slide 40 text

40 いい感じ(3) ステージ間の移動に対応してほしいいい感じ(3) ステージ間の移動に対応してほしい複数のバーチャルカメラを切り替えて対応する

Slide 41

Slide 41 text

41 複数のバーチャルカメラを切り替えたりブレンドすることも可能 GameObject Camera CM vcam1 CM vcam2 VirtualCameraBrain どのVirtualCameraがActiveか切り替え時にどうブレンドするか VirtualCameraBrainはVirualCameraを生成した時点で自動的にアタッチされるいい感じ(3) ステージ間の移動に対応してほしい基本Cameraに適応されるVirtualCameraは1つだけど

Slide 42

Slide 42 text

42 いい感じ(3) ステージ間の移動に対応してほしい今回はステージごとに異なる ChinemachineConﬁnerを適応した VirtualCameraを2つ用意次のステージに侵入したらVirtualCameraを切り替える

Slide 43

Slide 43 text

43 いい感じ(3) ステージ間の移動に対応してほしい LiveなVirtualCamera Disabled ではない VirtualCamera の中で (statusが Standby になっているもの) 最もPriorityが高い1つが採択されてる

Slide 44

Slide 44 text

44 いい感じ(3) ステージ間の移動に対応してほしいざっくりScriptで切り替える方法の一例 OnTriggerEnter2D() 時に現状のVirtualCameraのPriorityを0に切り替え先のVirtualCameraのPriorityを int.MaxValue に https://gist.github.com/lycoris102/f63409f198193908c7f5c6267a0c7a1b

Slide 45

Slide 45 text

45 いい感じ(3) ステージ間の移動に対応してほしい任意のColliderに先ほどのScriptをアタッチする切り替え先のVirtualCameraを指定して実行する

Slide 46

Slide 46 text

46 いい感じ(3) ステージ間の移動に対応してほしい VirtualCameraBrainで切り替わり方を指定 defaultだけでなく特定の2VC間での切り替わり方も指定可能 (CustomBlend) Cutの例

Slide 47

Slide 47 text

47 いい感じ(3) ステージ間の移動に対応してほしい Timelineを使っても切り替え可能 CinemachieTrackを使用するカットシーンを作る場合にはこちらの方が便利

Slide 48

Slide 48 text

48 いい感じ(4) 複数のターゲットに対応してほしいいい感じ(4) 複数のターゲットに対応してほしい CinemachineTargetGroupコンポーネントを使用する

Slide 49

Slide 49 text

49 いい感じ(4) 複数のターゲットに対応してほしい複数の描画対象を指定した上で両方がいい感じに収まるように描画範囲を拡大縮小したい遠い近い 2Dプラットフォーマーというより格闘ゲームでよく見るアプローチ縮小する拡大する

Slide 50

Slide 50 text

50 いい感じ(4) 複数のターゲットに対応してほしい CinemachineTargetGroupコンポーネント複数のTransformを指定することができる

Slide 51

Slide 51 text

51 いい感じ(4) 複数のターゲットに対応してほしいパラメータで見せ方を調整できる Weight 平均化時の重み(画面を占める比率) Radius アイテムの大きさの半径

Slide 52

Slide 52 text

52 いい感じ(4) 複数のターゲットに対応してほしい VirtualCameraのFollowに CinemachineTargetGroupを指定する

Slide 53

Slide 53 text

53 いい感じ(4) 複数のターゲットに対応してほしい GroupFramingMode 縦軸/横軸/両方のいずれをグループ化 GroupFramingSize 画面に対するグループの大きさの比率 MinimumOrthoSize  最拡大時のOrthographicSize MaximumOrthoSize  最縮小時のOrthographicSize 画面の拡大縮小の度合い等 VirtualCameraのBodyにて調整できる CameraのProjectionがPerspectiveの時は項目が異なる

Slide 54

Slide 54 text

54 いい感じ(5) カメラシェイクに対応してほしいいい感じ(5) カメラシェイクに対応してほしい CinemachinepulseListener/Sourceにて振動を送受信する

Slide 55

Slide 55 text

55 いい感じ(5) カメラシェイクに対応してほしいカメラを揺らしたい!! 適切な場面で使うと気持ちのいい”めまい”を提供できる！

Slide 56

Slide 56 text

56 Cinemachineの拡張機能を使う CinemachineCameraOﬀset  各種処理の後にオフセットを付けられる CinemachineCollider カメラがColliderに衝突した時の設定 CinemachineConﬁner 範囲外を描画しないようにする CinemachineFollowZoom ターゲットサイズをキープするようFOV調整 CinemachineStoryboard カメラの出力の上に画像を被せる CinemachineExtension (Cinemachine拡張のBaseClass) CinemachineImpulseListener 振動信号を受け取り、カメラシェイクする https://docs.unity3d.com/Packages/[email protected]/api/ いい感じ(5) カメラシェイクに対応してほしい

Slide 57

Slide 57 text

57 CinemachineImpulseListener 振動信号を受け取り、カメラシェイクするいい感じ(5) カメラシェイクに対応してほしい ChannelMask 特定の信号のみ受け取れるようにする Gain 信号の増幅/減衰(大きいほど揺れる) Use2DDistance 距離計算にZ軸を無視(2Dゲーム用) ChinemachineExtension.PostPipelineStageCallBackにて実行される  (他の座標計算等の後に実行される)

Slide 58

Slide 58 text

58 ListnerはSourceから信号を受け取ってから画面を振動させる CinemachineImpulseListener CinemachineImpulseSource いい感じ(5) カメラシェイクに対応してほしい Scriptで信号を送る ChinemachineCollisionImpulseSource 継承衝突時に信号を送る

Slide 59

Slide 59 text

59 信号の形状や時間による減衰距離に応じた挙動を設定することができる CinemachineImpulseSource いい感じ(5) カメラシェイクに対応してほしい https://docs.unity3d.com/Packages/[email protected]/manual/ CinemachineImpulseSourceOverview.html 設定項目の詳細はドキュメントに結構丁寧に記載されてます

Slide 60

Slide 60 text

60 GenerateImpulse() / GenerateImpulseAt() で任意のタイミングで信号を送ることも可能 CinemachineImpulseSource いい感じ(5) カメラシェイクに対応してほしい CinemachinepulseListener/Sourceにて振動を送受信する GenerateAt() は発生源/衝撃の方向強さを引数に設定できる

Slide 61

Slide 61 text

61 いい感じ(5) カメラシェイクに対応してほしい ChinemachineCollisionImpulseSource アタッチすると衝突時に信号を送るようになる

Slide 62

Slide 62 text

62 いい感じ(5) カメラシェイクに対応してほしい Collisionで揺らすサンプル

Slide 63

Slide 63 text

63 「いい感じ」の一例「遅延移動したりプレイヤーの先読みしたい」  「特定の範囲から外を見せたくない」「ステージ間の移動に対応してほしい」「複数のターゲットを画面に収めてほしい」「カメラを揺らしたい」 ……etc まとめ

Slide 64

Slide 64 text

64 「いい感じ」の一例「遅延移動したりプレイヤーの先読みしたい」  「特定の範囲から外を見せたくない」「ステージ間の移動に対応してほしい」「複数のターゲットを画面に収めてほしい」「カメラを揺らしたい」 ……etc Cinemachineを使って解決できた！まとめ

Slide 65

Slide 65 text

65 他に出来ること盛りだくさん！ PostProcessingを入れて CinemachinePostProcessing でVC毎にポストエフェクト Noiseを設定して自然な揺らぎを付ける Unityカメラを複数用意してビューポートで画面分割それぞれのカメラで別なキャラ追従まとめ

Slide 66

Slide 66 text

66 他に出来ること盛りだくさん！まとめ合わせ技！

Slide 67

Slide 67 text

67 困った時に見るところまとめ Cinemachine Documentation https://docs.unity3d.com/Packages/[email protected]/manual/index.html

Slide 68

Slide 68 text

68 困った時に見るところまとめテラシュールブログ(Cinemachineカテゴリ) http://tsubakit1.hateblo.jp/ 今回触れた内容もだいたい載っています///

Slide 69

Slide 69 text

69 みんなも Cinemachineで遊ぼう！まとめ

Slide 70

Slide 70 text

70 時間あれば告知 Gotanda.unity / Roppongi.unity UnityXXX完全に理解した勉強会合同でUniteの前々夜祭としてLT大会します！ 8/2(金) 12:00~ 募集開始です！

Slide 71

Slide 71 text

Unity++ ショートセッション勉強会 presented by Unity部よーし、パパ青木とと@lycoris102 Cinemachineを 2Dプロジェクトに適応して遊んじゃうぞー