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

Unity++ 〜ショートセッション勉強会 presented by Unity部〜
https://meetup.unity3d.jp/jp/events/1112

Transcript

1. Unity++ ショートセッション勉強会 presented by Unity部 よーし、パパ 青木とと@lycoris102 Cinemachineを 2Dプロジェクトに 適応して遊んじゃうぞー
2. 2 このスライドはgifが多用されていますが SpeakerDeckでは再生されません 諸注意 後日 UnityLearningMaterials にて 動画が公開される予定です またQiitaに同一の内容の掲載も考えております ＼ごめんなさい／
3. だれ？ 3 @lycoris102 青木とと ねんれい:29 しごと: 株式会社キッズスター かぞく: 妻と3歳の息子 ・Unityアンバサダー ・Gotanda.unity ・UnityDesigner’sCafe ・勉強会主催/サポート ・ゆるふわゲームクリエイター
4. だれ？ 4 #unity1week でゲームを作るのも好きです https://unityroom.com/users/lycoris102
5. 5 2Dプラットフォーマー 前提 今日のお題
6. 6 このアセットのサンプルプロジェクトを使います 元々はインク効果/飛沫表現を実現するためのアセット 前提
7. 7 本来はこういうことができるアセット 前提 Qiitaで紹介してます: [Unity] StainSystemを使用してオブジェクトにインク効果を適用する
8. 8 突然ですが…… 「カメラをプレイヤーに追従させる処理」 どう実装しますか？ カメラをプレイヤーに追従させる
9. 9 カメラとプレイヤーを親子関係にする カメラをプレイヤーに追従させる
10. 10 (Fixed)Updateでtransform.positionを 追従させる もしくは カメラをプレイヤーに追従させる
11. 11 ParentConstrainを使う もしくは カメラをプレイヤーに追従させる 指定したTransformに追従する / 任意のオフセットも設定可能で親子関係にしたくないときに使う
12. 12 どれも 「カメラをプレイヤーに追従させる」 という要件を満たす!! やったー カメラをプレイヤーに追従させる
13. 13 どれも 「カメラをプレイヤーに追従させる」 という要件を満たす!! うーん…… もっといい感じに 動かしてほしいですね 上司 …… カメラをプレイヤーに追従させる
14. 14 「いい感じ」とは？ いい感じなカメラワーク
15. 15 「いい感じ」の一例 「遅延移動したりプレイヤーの先読みしたい」
 「特定の範囲から外を見せたくない」 「ステージ間の移動に対応してほしい」 「複数のターゲットを画面に収めてほしい」 「カメラを揺らしたい」 ……etc いい感じなカメラワーク よくばりセット
16. 16 「いい感じ」の一例 「遅延移動したりプレイヤーの先読みしたい」
 「特定の範囲から外を見せたくない」 「ステージ間の移動に対応してほしい」 「複数のターゲットを画面に収めてほしい」 「カメラを揺らしたい」 ……etc Cinemachineを 使って 立ち向かっていくぞ！ いい感じなカメラワーク
17. 17 Cinemachineとは？ Cinemachineについて
18. 18 https://unity.com/ja/unity/features/editor/art-and-design/cinemachine Unity2017にてリリースされた 新しいカメラシステム Cinemachineについて
19. 19 現在はPackageManager経由で インストールする Cinemachineについて
20. 20 いい感じ(1) 遅延移動したりプレイヤーの先読みをしたい いい感じ(1) 遅延移動したり プレイヤーの先読みをしたい Cinemachine/Bodyの設定で解決する
21. 21 “VirtualCamera”というコンポーネントで カメラを操作する GameObject Cameraコンポーネント VirtualCameraコンポーネント 座標や角度/拡縮を操作 いい感じ(1) 遅延移動したりプレイヤーの先読みをしたい
22. 22 Cinemachine -> Create 2D Camera で2D用の設定を適応した VirtualCameraを追加する VirtualCameraの設定のプリセットが色々用意されています いい感じ(1) 遅延移動したりプレイヤーの先読みをしたい
23. 23 ChinemachineVirtualCameraでは どういう風にカメラを動かすかを設定できる いい感じ(1) 遅延移動したりプレイヤーの先読みをしたい Follow どのオブジェクトを追従対象とするか Body カメラをどのように移動させるか
24. 24 2D用の設定では BodyがFraming Transposerに設定 Do nothing カメラの移動は行わない Framing Transposer 2D用にXY平面での移動に特化した設定 Hard Lock To Target Tragetの座標と完全に同期する Orbital Transposer ターゲティング+入力によるカメラ移動 Tracked Dolly 指定したパスに沿ってカメラ移動する Transposer Tragetに追従する いい感じ(1) 遅延移動したりプレイヤーの先読みをしたい
25. 25 OrthographicSizeを調整して Followにオブジェクトを追加することで もういい感じにカメラ追従ができる 完全にプレイヤーに同期せず、ちょっと遅延追従している感じがそれっぽい いい感じ(1) 遅延移動したりプレイヤーの先読みをしたい
26. 26 Framing Transposerは設定できる項目が 多く細かい調整が可能 Lookahead ターゲットの動きに基づく先読み移動の設定 Damping カメラの反応/数字が大きいほど反応が遅い ScreenX/Y どの位置にターゲットを配置するか DeadZone 範囲内にターゲットがいる時カメラ移動しない SoftZone 徐々にカメラ移動させる範囲 https://docs.unity3d.com/Packages/com.unity.cinemachine@2.3/manual/ CinemachineBodyFramingTransposer.html いい感じ(1) 遅延移動したりプレイヤーの先読みをしたい
27. 27 Lookahead ターゲットの動きに基づく先読み移動の設定 Time: 0(sec) 先読みをしていない状態 いい感じ(1) 遅延移動したりプレイヤーの先読みをしたい
28. 28 Lookahead ターゲットの動きに基づく先読み移動の設定 Time: 1(sec)
 Smooth: 3(Min) 1秒後にいるであろう位置を先読みして移動 いい感じ(1) 遅延移動したりプレイヤーの先読みをしたい
29. 29 Lookahead ターゲットの動きに基づく先読み移動の設定 Time: 1(sec)
 Smooth: 30(Max) 滑らかな動きになるが 予測が遅れる TimeとSmooth小さい値からすこしずつ調整する いい感じ(1) 遅延移動したりプレイヤーの先読みをしたい
30. 30 ScreenX/Y どの位置にターゲットを配置するか いい感じ(1) 遅延移動したりプレイヤーの先読みをしたい
31. 31 Damping カメラの反応/数字が大きいほど反応が遅い 次に紹介するSoftZoneに侵入した時のカメラの移動に影響 いい感じ(1) 遅延移動したりプレイヤーの先読みをしたい
32. 32 DeadZone 範囲内にターゲットがいる時カメラ移動しない SoftZone 徐々にカメラ移動させる範囲 4PGU;POF %FBE;POF ΧϝϥҠಈ
    ͠ͳ͍ λʔήοτΛऩΊΔํ޲ʹঃʑʹ௥ै ͜ͷൣғΑΓ֎ʹग़Α͏ͱ͢Δͱ໰౴ແ༻ͰΧϝϥ௥ै SoftZoneにおけるカメラの移動スピードはDumpingの設定に依存する いい感じ(1) 遅延移動したりプレイヤーの先読みをしたい
33. 33 2Dに特化したカメラ追従機能 FramingTransposerの設定を調整して 自分だけのいい感じカメラを作ろう！ いい感じ(1) 遅延移動したりプレイヤーの先読みをしたい
34. 34 いい感じ(2) 特定の範囲から外を見せたくない いい感じ(2) 特定の範囲から外を見せたくない Cinemachineの拡張機能: CinemachineConfinerを使って解消する
35. 35 壁や背景の画像を引き延ばして解決する手もあるけど素材によっては厳しいことも 壁の外/背景の上下などが映るとダサい こことか ここ いい感じ(2) 特定の範囲から外を見せたくない
36. 36 Cinemachineの拡張機能を使う CinemachineCameraOffset
 各種処理の後にオフセットを付けられる CinemachineCollider カメラがColliderに衝突した時の設定 CinemachineConfiner 範囲外を描画しないようにする CinemachineFollowZoom ターゲットサイズをキープするようFOV調整 CinemachineStoryboard カメラの出力の上に画像を被せる CinemachineExtension (Cinemachine拡張のBaseClass) CinemachineImpulseListener 振動信号を受け取り、カメラシェイクする https://docs.unity3d.com/Packages/com.unity.cinemachine@2.3/api/ いい感じ(2) 特定の範囲から外を見せたくない
37. 37 CinemachineConfiner 範囲外を描画しないようにする PolygonCollider2Dか CompositeCollider2Dを指定する いい感じ(2) 特定の範囲から外を見せたくない
38. 38 CompositeCollider2Dを使う 親に設定すると子のColliderをマージしてくれる君 ・子のColliderには「Used by Composite」のチェックを入れる ・今回は親のRigidbody2Dの「Simulated」のチェックを外す
 ・CompositeColliderのGeometryTypeを「Polygon」にする いい感じ(2) 特定の範囲から外を見せたくない
39. 39 CinemachineConfinerの
 BoundingShape2DにColliderを設定する カメラが追従しないだけで、普通に領域外に出れてしまうので注意 いい感じ(2) 特定の範囲から外を見せたくない
40. 40 いい感じ(3) ステージ間の移動に対応してほしい いい感じ(3) ステージ間の移動に対応してほしい 複数のバーチャルカメラを切り替えて対応する
41. 41 複数のバーチャルカメラを切り替えたり ブレンドすることも可能 GameObject Camera CM vcam1 CM vcam2 VirtualCameraBrain どのVirtualCameraがActiveか 切り替え時にどうブレンドするか VirtualCameraBrainはVirualCameraを生成した時点で自動的にアタッチされる いい感じ(3) ステージ間の移動に対応してほしい 基本Cameraに適応されるVirtualCameraは1つだけど
42. 42 いい感じ(3) ステージ間の移動に対応してほしい 今回はステージごとに異なる ChinemachineConfinerを適応した VirtualCameraを2つ用意 次のステージに侵入したらVirtualCameraを切り替える
43. 43 いい感じ(3) ステージ間の移動に対応してほしい LiveなVirtualCamera Disabled ではない VirtualCamera の中で (statusが Standby になっているもの) 最もPriorityが高い1つが採択されてる
44. 44 いい感じ(3) ステージ間の移動に対応してほしい ざっくりScriptで切り替える方法の一例 OnTriggerEnter2D() 時に 現状のVirtualCameraのPriorityを0に 切り替え先のVirtualCameraのPriorityを int.MaxValue に https://gist.github.com/lycoris102/f63409f198193908c7f5c6267a0c7a1b
45. 45 いい感じ(3) ステージ間の移動に対応してほしい 任意のColliderに先ほどのScriptをアタッチする 切り替え先のVirtualCameraを指定して実行する
46. 46 いい感じ(3) ステージ間の移動に対応してほしい VirtualCameraBrainで切り替わり方を指定 defaultだけでなく特定の2VC間での切り替わり方も指定可能 (CustomBlend) Cutの例
47. 47 いい感じ(3) ステージ間の移動に対応してほしい Timelineを使っても切り替え可能 CinemachieTrackを使用する カットシーンを作る場合にはこちらの方が便利
48. 48 いい感じ(4) 複数のターゲットに対応してほしい いい感じ(4) 複数のターゲットに対応してほしい CinemachineTargetGroupコンポーネントを使用する
49. 49 いい感じ(4) 複数のターゲットに対応してほしい 複数の描画対象を指定した上で 両方がいい感じに収まるように 描画範囲を拡大縮小したい 遠い 近い 2Dプラットフォーマーというより格闘ゲームでよく見るアプローチ 縮小する 拡大する
50. 50 いい感じ(4) 複数のターゲットに対応してほしい CinemachineTargetGroupコンポーネント 複数のTransformを指定することができる
51. 51 いい感じ(4) 複数のターゲットに対応してほしい パラメータで見せ方を調整できる Weight 平均化時の重み(画面を占める比率) Radius アイテムの大きさの半径
52. 52 いい感じ(4) 複数のターゲットに対応してほしい VirtualCameraのFollowに CinemachineTargetGroupを指定する
53. 53 いい感じ(4) 複数のターゲットに対応してほしい GroupFramingMode 縦軸/横軸/両方のいずれをグループ化 GroupFramingSize 画面に対するグループの大きさの比率 MinimumOrthoSize
 最拡大時のOrthographicSize MaximumOrthoSize
 最縮小時のOrthographicSize 画面の拡大縮小の度合い等 VirtualCameraのBodyにて調整できる CameraのProjectionがPerspectiveの時は項目が異なる
54. 54 いい感じ(5) カメラシェイクに対応してほしい いい感じ(5) カメラシェイクに対応してほしい CinemachinepulseListener/Sourceにて振動を送受信する
55. 55 いい感じ(5) カメラシェイクに対応してほしい カメラを揺らしたい!! 適切な場面で使うと気持ちのいい”めまい”を提供できる！
56. 56 Cinemachineの拡張機能を使う CinemachineCameraOffset
 各種処理の後にオフセットを付けられる CinemachineCollider カメラがColliderに衝突した時の設定 CinemachineConfiner 範囲外を描画しないようにする CinemachineFollowZoom ターゲットサイズをキープするようFOV調整 CinemachineStoryboard カメラの出力の上に画像を被せる CinemachineExtension (Cinemachine拡張のBaseClass) CinemachineImpulseListener 振動信号を受け取り、カメラシェイクする https://docs.unity3d.com/Packages/com.unity.cinemachine@2.3/api/ いい感じ(5) カメラシェイクに対応してほしい
57. 57 CinemachineImpulseListener 振動信号を受け取り、カメラシェイクする いい感じ(5) カメラシェイクに対応してほしい ChannelMask 特定の信号のみ受け取れるようにする Gain 信号の増幅/減衰(大きいほど揺れる) Use2DDistance 距離計算にZ軸を無視(2Dゲーム用) ChinemachineExtension.PostPipelineStageCallBackにて実行される
 (他の座標計算等の後に実行される)
58. 58 ListnerはSourceから信号を受け取ってから 画面を振動させる CinemachineImpulseListener CinemachineImpulseSource いい感じ(5) カメラシェイクに対応してほしい Scriptで信号を送る ChinemachineCollisionImpulseSource 継承 衝突時に信号を送る
59. 59 信号の形状や時間による減衰 距離に応じた挙動を設定することができる CinemachineImpulseSource いい感じ(5) カメラシェイクに対応してほしい https://docs.unity3d.com/Packages/com.unity.cinemachine@2.3/manual/ CinemachineImpulseSourceOverview.html 設定項目の詳細はドキュメントに結構丁寧に記載されてます
60. 60 GenerateImpulse() / GenerateImpulseAt() で任意のタイミングで信号を送ることも可能 CinemachineImpulseSource いい感じ(5) カメラシェイクに対応してほしい CinemachinepulseListener/Sourceにて振動を送受信する GenerateAt() は発生源/衝撃の方向 強さを引数に設定できる
61. 61 いい感じ(5) カメラシェイクに対応してほしい ChinemachineCollisionImpulseSource アタッチすると衝突時に信号を送るようになる
62. 62 いい感じ(5) カメラシェイクに対応してほしい Collisionで揺らすサンプル
63. 63 「いい感じ」の一例 「遅延移動したりプレイヤーの先読みしたい」
 「特定の範囲から外を見せたくない」 「ステージ間の移動に対応してほしい」 「複数のターゲットを画面に収めてほしい」 「カメラを揺らしたい」 ……etc まとめ
64. 64 「いい感じ」の一例 「遅延移動したりプレイヤーの先読みしたい」
 「特定の範囲から外を見せたくない」 「ステージ間の移動に対応してほしい」 「複数のターゲットを画面に収めてほしい」 「カメラを揺らしたい」 ……etc Cinemachineを 使って解決できた！ まとめ
65. 65 他に出来ること盛りだくさん！ PostProcessingを入れて CinemachinePostProcessing でVC毎にポストエフェクト Noiseを設定して 自然な揺らぎを付ける Unityカメラを複数用意して ビューポートで画面分割 それぞれのカメラで別なキャラ追従 まとめ
66. 66 他に出来ること盛りだくさん！ まとめ 合わせ技！
67. 67 困った時に見るところ まとめ Cinemachine Documentation https://docs.unity3d.com/Packages/com.unity.cinemachine@2.3/manual/index.html
68. 68 困った時に見るところ まとめ テラシュールブログ(Cinemachineカテゴリ) http://tsubakit1.hateblo.jp/ 今回触れた内容もだいたい載っています///
69. 69 みんなも Cinemachineで 遊ぼう！ まとめ
70. 70 時間あれば告知 Gotanda.unity / Roppongi.unity UnityXXX完全に理解した勉強会 合同でUniteの前々夜祭としてLT大会します！ 8/2(金) 12:00~ 募集開始です！
71. Unity++ ショートセッション勉強会 presented by Unity部 よーし、パパ 青木とと@lycoris102 Cinemachineを 2Dプロジェクトに 適応して遊んじゃうぞー