Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

lycoris102

July 20, 2019
Tweet

More Decks by lycoris102

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. 15
    「いい感じ」の一例
    「遅延移動したりプレイヤーの先読みしたい」

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

    View full-size slide

  16. 16
    「いい感じ」の一例
    「遅延移動したりプレイヤーの先読みしたい」

    「特定の範囲から外を見せたくない」
    「ステージ間の移動に対応してほしい」
    「複数のターゲットを画面に収めてほしい」
    「カメラを揺らしたい」
    ……etc
    Cinemachineを
    使って
    立ち向かっていくぞ!
    いい感じなカメラワーク

    View full-size slide

  17. 17
    Cinemachineとは?
    Cinemachineについて

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. 28
    Lookahead
    ターゲットの動きに基づく先読み移動の設定
    Time: 1(sec)

    Smooth: 3(Min)
    1秒後にいるであろう位置を先読みして移動
    いい感じ(1) 遅延移動したりプレイヤーの先読みをしたい

    View full-size slide

  29. 29
    Lookahead
    ターゲットの動きに基づく先読み移動の設定
    Time: 1(sec)

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  36. 36
    Cinemachineの拡張機能を使う
    CinemachineCameraOffset

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

    View full-size slide

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

    View full-size slide

  38. 38
    CompositeCollider2Dを使う
    親に設定すると子のColliderをマージしてくれる君
    ・子のColliderには「Used by Composite」のチェックを入れる
    ・今回は親のRigidbody2Dの「Simulated」のチェックを外す

    ・CompositeColliderのGeometryTypeを「Polygon」にする
    いい感じ(2) 特定の範囲から外を見せたくない

    View full-size slide

  39. 39
    CinemachineConfinerの

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  53. 53
    いい感じ(4) 複数のターゲットに対応してほしい
    GroupFramingMode
    縦軸/横軸/両方のいずれをグループ化
    GroupFramingSize
    画面に対するグループの大きさの比率
    MinimumOrthoSize

    最拡大時のOrthographicSize
    MaximumOrthoSize

    最縮小時のOrthographicSize
    画面の拡大縮小の度合い等
    VirtualCameraのBodyにて調整できる
    CameraのProjectionがPerspectiveの時は項目が異なる

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  56. 56
    Cinemachineの拡張機能を使う
    CinemachineCameraOffset

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

    View full-size slide

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

    (他の座標計算等の後に実行される)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  63. 63
    「いい感じ」の一例
    「遅延移動したりプレイヤーの先読みしたい」

    「特定の範囲から外を見せたくない」
    「ステージ間の移動に対応してほしい」
    「複数のターゲットを画面に収めてほしい」
    「カメラを揺らしたい」
    ……etc
    まとめ

    View full-size slide

  64. 64
    「いい感じ」の一例
    「遅延移動したりプレイヤーの先読みしたい」

    「特定の範囲から外を見せたくない」
    「ステージ間の移動に対応してほしい」
    「複数のターゲットを画面に収めてほしい」
    「カメラを揺らしたい」
    ……etc
    Cinemachineを
    使って解決できた!
    まとめ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide