Tweet
Tweet

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/com.unity.cinemachine@2.3/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の拡張機能: CinemachineConfinerを使って解消する

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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) 特定の範囲から外を見せたくない

Slide 37

Slide 37 text

37 CinemachineConfiner 範囲外を描画しないようにする 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 CinemachineConfinerの
 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) ステージ間の移動に対応してほしい 今回はステージごとに異なる ChinemachineConfinerを適応した 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の拡張機能を使う CinemachineCameraOffset
 各種処理の後にオフセットを付けられる CinemachineCollider カメラがColliderに衝突した時の設定 CinemachineConfiner 範囲外を描画しないようにする CinemachineFollowZoom ターゲットサイズをキープするようFOV調整 CinemachineStoryboard カメラの出力の上に画像を被せる CinemachineExtension (Cinemachine拡張のBaseClass) CinemachineImpulseListener 振動信号を受け取り、カメラシェイクする https://docs.unity3d.com/Packages/com.unity.cinemachine@2.3/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/com.unity.cinemachine@2.3/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/com.unity.cinemachine@2.3/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プロジェクトに 適応して遊んじゃうぞー