visionOSにおけるゲームでの入力の詳細

visionOSにおけるゲームでの入力の詳細

visionOSのゲームで優れた入力をデザインし実装する方法を学ぶセッションです。システムのジェスチャを利用して、プレイヤーとゲームの間のインタラクションをスムーズにする方法を解説します。また、カスタムジェスチャとゲームコントローラをサポートする際のベストプラクティスもご紹介します。

関連する章
- 0:00 - Introduction
- 0:56 - Design around gestures
- 3:28 - System gestures
- 6:14 - Combination gestures
- 7:43 - Custom gestures
- 11:24 - Physical controllers
リソース
関連ビデオ

WWDC24
- iOS/iPadOSゲームのvisionOSへの展開
WWDC23
WWDC22
- プラグインと再生：AppleフレームワークをUnityゲームプロジェクトに追加する
WWDC21
- バーチャルゲームコントローラと物理ゲームコントローラの活用
ダウンロード

こんにちは Technology Evangelism チームのCharlynです今日はvisionOSでの優れたゲーム入力を実現する要素について説明します
visionOSで制作できるゲームの種類やゲームの開発に使うことができるフレームワークには非常に多くの柔軟性があります
Apple Vision Proでは視線と手を使用してシステム上のアプリやゲームを操作しますまた外部の物理的な入力デバイスもサポートされていますジェスチャを中心にデザインされたゲーム入力は追加の機器がなくてもプレイヤーがすぐにゲームを始められる最も簡単な方法です選択可能な様々な種類のジェスチャについて見ていきますその後 visionOSでサポートされている物理的な入力デバイスとそれらのサポートを追加する場合の注意事項について説明します visionOSのジェスチャでデザインされた入力は直接的なものと間接的なものに分かれます直接的なジェスチャでは直接手を伸ばしバーチャルオブジェクトを操作します注意点として visionOSの無限のキャンバスではプレイヤーがオブジェクトを操作するために腕を大きく動かす必要があるかもしれません間接的なジェスチャではオブジェクトを見てタップして選択することで離れた場所にあるオブジェクトを操作しますそのため手を体の近くに置いておくことができます間接的な入力ではプレイヤーの手の小さな動きを大きな動作に拡大します表示領域のはるか遠くに手を伸ばしたり大きな動作を繰り返したりする場合間接的な入力のほうが長時間プレイした場合に疲れにくくなります例えばこれは「Loona」という visionOS向けのパズルゲームですが間接的な入力によって離れた場所にあるそれぞれのピースを掴むことができますピースを見て選んで指でピースを移動させ直接パズルにはめることができます指をダブルタップしてピースをはめることもできますジェスチャを使用してパズルを回転させたり動かしたりすることで様々な角度から見ることができますこのように立っていても座っていても快適にプレイできます間接的な入力により椅子にもたれながらでもゲームをプレイできます直接的な入力のほうが適している場合もあります例えば活動量が多いゲームなどがそうかもしれませんそれにバーチャルオブジェクトを直接操作したほうが楽しい場合がありますこれは「Super Fruit Ninja」という宙を飛ぶ果物やメニューボタンをスライスする直接的な入力を中心にデザインされたゲームですこの入力タイプがゲームに適している場合はフィードバックを十分に加えてプレイヤーがオブジェクトに触れるたびに満足感を得られるようにします
手の後ろで光る稲妻や飛び散る果肉などの視覚的なフィードバックを組み合わせることもできますつぶれる音や飛び散る音などを加えることもできます触覚の反応はないですがプレイヤーは接触した瞬間に UIボタンなのか飛び交うパイナップルなのか正確に知ることができます直接的な入力と間接的な入力の両方のジェスチャをゲームでサポートすることをお勧めします実装するにはいくつかの方法がありますゲームは組み込みのシステムジェスチャに応答することができます 2つ以上のシステムジェスチャを組み合わせてゲームが応答する入力をさらに細かく制御することもできます必要に応じて ARKitのハンドトラッキングを使用してカスタムジェスチャを作成することもできますどの方法にするか決定する前に組み込みのシステムジェスチャを使用するいくつかのメリットを覚えておきましょう 1つはプレイヤーがシステムジェスチャの使い方をすでに熟知していることですプレイヤーはすでにそれらを使用してプラットフォームの他のアプリやゲームを操作していますそのためゲームの操作方法を教える必要はありませんし追加の機器も必要ありませんすぐにゲームを始められますプレイヤーはいつでもジェスチャを選択しプレイすることができます加えて visionOS上のどこにゲームがあってもシステムジェスチャはサポートされます共有スペースからフルイマーシブまであらゆるスペースで機能します様々なシステムジェスチャを使用することができます最も簡単なのはオブジェクトを注視して片手の2本の指をタップする方法です 2D画面のゲームでシングルタップを入力に使用している場合 visionOSではそれをタップジェスチャに置き換えるだけです
ダブルタップにも応答させることができますピンチして押さえたままにするジェスチャやピンチしてドラッグするジェスチャもありますいずれもオブジェクトを直接的または間接的に操作できます両手を使用してオブジェクトを拡大縮小したり回転したりできます「What the Golf」はシステムジェスチャを使用してオブジェクトを間接的に制御する visionOSゲームの良い例ですボールを注視してピンチして押さえたままにするジェスチャでボールをアクティブにします手を動かすとボールの方向や指を離した時にボールに加わる力の大きさを制御できます
手に入力が引き継がれたので自由に見回して狙いを定めることができます
ピンチした指を離すとボールが飛びホールインワンできました
システムジェスチャに応答させるのはとても簡単です RealityView内に追加したタップを可能にするすべてのエンティティに InputTargetComponentと CollisionComponentが必要です次にエンティティを含む RealityViewにジェスチャをアタッチしそのビュー内のエンティティがタップ可能であることを示しますジェスチャが検出されるとジェスチャのハンドラで応答できますシステムジェスチャへの応答方法については「Develop your first immersive app」という昨年のビデオと developer.apple.comにあるインタラクティブ性に関するドキュメントをご確認ください Unityでゲームを開発している場合は Unity Input Systemを使用してジェスチャを検出して応答できますタップイベントを受け取るにはゲームオブジェクトに入力コライダーを追加しますタップデータがWorld Touchイベントとして利用可能になります「Create immersive Unity apps」で詳細をご確認くださいシステムジェスチャにはすぐに使えるたくさんのジェスチャがありますがさらに柔軟性が必要な場合はシステムジェスチャを組み合わせてユニークなジェスチャを作ることができます 2つ以上のシステムジェスチャをペアにしてそれらが同時または順番に発生した場合検出することができますジェスチャにキーボードの修飾キーを組み合わせることもできますまた SpatialEventGestureを使用して Tap Begins、MovesまたはEndsなどのジェスチャイベントにローレベルでアクセスすることができますこの機能はプレイヤーが両手を使用して 2つの異なるオブジェクトを同時に操作している場合に便利な機能です SpatialEventGestureを使用して各アクションのターゲットを追跡しますこの例では人工衛星の選択や移動サイズ変更または回転を同時に行うことができますシステムは前のジェスチャが終了していなくても各ジェスチャが発生するたびに認識しますコードではこのようになりますドラッグジェスチャでオブジェクトを移動している時に simultaneously(with:)を追加することで拡大および回転ジェスチャが行われた時にそれらの両方をアプリにリッスンさせることができますこれにより複数のジェスチャ間の遷移がシームレスになりますジェスチャの組み合わせ方法については「Take SwiftUI to the next dimension」という昨年のビデオとそちらのドキュメントをご確認くださいプレイヤーにとって馴染みのあるシステムジェスチャとそれらの組み合わせは visionOSでゲーム入力をデザインする際に最適です入力のレパートリーをさらに充実させる必要がある場合は独自のカスタムジェスチャを定義できますゲーム用にカスタムジェスチャを作成する場合はプレイヤーが簡単に習得でき覚えやすいものにする必要があります直感的に操作できるようにゲーム内の動作にぴったり合ったジェスチャにしましょうカスタムジェスチャをデザインする際はプレイヤーが正しい操作をしていることを認識できるようビジュアルエフェクトと音の両方によって適切な量のフィードバックを追加してください独自のジェスチャを定義するには ARKitを通じて完全な骨格ハンドトラッキングにアクセスする必要がありますシステムジェスチャとカスタムジェスチャを同じゲーム内で組み合わせることもできますこのBlackboxはそれらを独創的な方法で組み合わせた良い例です Blackboxはオンボーディング中に環境内に新しい泡を作るカスタムジェスチャをプレイヤーに教えますこのジェスチャは単純かつ直感的なので学びやすく覚えやすいですこれはとても重要ですこれがゲームに出入りする主な方法だからですただしカスタムジェスチャは多用せず控えめに使用してください Blackboxは適している場合には常にシステムジェスチャを使用します例えば泡を注視して指をタップすると泡を弾けさせることができます
重要な点として Blackboxは visionOSのフルスペースに存在しますゲームが共有スペースでプレイされる場合つまりほかのvisionOSアプリが同時に並んでいる場合 ARKitとハンドトラッキングは利用することができませんフルスペースでは mixed progressive またはfullのいずれであれ表示されるアプリはゲームだけです Blackboxのようにプレイヤーは周囲の環境を見ることができますゲームによっては周囲の環境を新しい環境に置き換えることもできますカスタムジェスチャを作成する場合 ARKitと完全な骨格ハンドトラッキングはフルスペースで利用できますこれは円の形をしたカスタムジェスチャを作成する方法を示していますハンドトラッキングに必要なすべての関節を確認しますワールド座標系で位置を取得します次に円の形をしたジェスチャの場合両方の人差し指と両方の親指の先端の距離を確認しますその距離が4cm未満ならジェスチャが認識されゲームが応答できるようになります Unityでゲームを開発している場合 Unityのハンドトラッキングパッケージを利用してプレイヤーの関節の情報にアクセスします UnityゲームをvisionOSに展開する方法についてはこちらのビデオをご確認ください直接的なジェスチャか間接的なジェスチャかシステムジェスチャかカスタムジェスチャかどのタイプのジェスチャを使用するにしても能力に差があるプレイヤーのために別の方法も用意しておきましょう例えば「Synth Riders」では両手や両腕を使用してオブジェクトに触るように入力がデザインされています片腕でしかプレイできないプレイヤーはどうなるのでしょうかこのゲームの設定には片手モードでプレイするかどうか選択するオプションが用意されておりさらに右手と左手のどちらでプレイするかを選択できますこれで右手だけでゲームをプレイできるようになりましたこれらのアクセシビリティの使用例について検討してプレイヤーのために入力の代替方法を組み込むことは重要です RealityKitを使用する場合ネイティブのアクセシビリティフレームワークを利用できます様々な能力に合わせたデザイン方法については「Create accessible spatial experiences」というビデオをご覧ください Unityでゲームを開発している場合 Apple Accessibilityプラグインを使用してすべてのアクセシビリティ機能にアクセスすることができます詳しくは「Plug-in and play」をご確認ください柔軟性に優れたシステムジェスチャとカスタムジェスチャによりゲームの入力をデザインするうえですでにたくさんの選択肢がありますが場合によっては visionOSで利用可能な物理的な入力デバイスをサポートすることもできます visionOSは iOSやmacOSがサポートする全てのゲームコントローラをサポートしますこれにはXbox Series Xや Sony Playstation DualSenseが含まれますゲームコントローラのサポートは一度に2つ以上の入力が必要な場合適切な選択肢となりますまたは他のプラットフォームからゲームを移植する場合ですでにゲームがコントローラを中心とした入力に基づいている場合にも有効です Bluetoothのキーボードやトラックパッドがゲームに適した入力である場合に備えて visionOSではそれらによる入力もサポートされています
Bluetoothを介してvisionOSに接続された物理的なコントローラやキーボードまたトラックパッドからのゲーム入力には簡単に応答することができます同じデバイスはiOS iPadOS macOS visionOSすべてで動作しますしかもどのプラットフォームでもゲームコントローラフレームワークは同じです複数のタイプのデバイスにわたってゲームを展開している場合でもそれらすべてで同じコードを使えます物理的なコントローラはウインドウ表示のゲームからフルイマーシブ空間まで visionOSのあらゆる体験に使えますアーケードゲームの「Wylde Flowers」はコントローラをうまくサポートしていますゲームコントローラがVision Proとペアリングおよび接続済みである場合はそのコントローラによるゲーム入力が自動的に有効になりますこれは非常に重要なことですコントローラが接続されたことを検出し入力をそのコントローラで動作するように切り替えることはプレイヤーにゲームの設定メニューでスイッチを探させるよりもはるかに良い方法です Wylde Flowersの別の優れたところはゲーム内のすべての操作をコントローラで行えることですプレイヤーがシステムジェスチャを使用して UIの一部にアクセスするようにすると不便なだけでなく混乱を招くでしょうゲーム内のすべての操作に加えて UIの選択もゲームコントローラでできるように入力をデザインしてください
プレイヤーがゲームコントローラを接続したかどうかは簡単に検出できますシステムに接続されたゲームコントローラを通知する GCControllerDidConnectにオブザーバを設定するだけです GCControllerDidDisconnectイベントも必ずリッスンしてゲームコントローラがない場合にシステムジェスチャなどのほかの入力形式が使用されるようにしますゲームコントローラが接続されたという通知を受け取ったらコントローラの特定のボタンの状態をポーリングできます必要であれば入力状態が更新された時通知されるように変更ハンドラを設定することもできますキーボードとトラックパッドからの入力も同じフローです接続をリッスンして入力をポーリングするか変更ハンドラを設定しますこれはゲームコントローラを検出しそれに応答するためのコードですオブザーバを設定してゲームコントローラが接続されたという通知が届くのを待ちますゲームを起動する前にコントローラがすでに接続されていた場合でも visionOSに接続されたすべてのデバイスについて通知を受け取ることができます通知を受け取ったら入力変更ハンドラを設定するかデバイスで予想される入力がないかポーリングできます最後に visionOS 2特有のステップが 1つありますゲームオブジェクトが含まれる RealityViewにゲームコントローラインタラクションモディファイアを追加しますこれはRealityViewに対するゲームコントローラの入力がゲームにより処理されることを示していますジェスチャの場合と同じようにアクションに対してフィードバックを提供することが重要です CoreHapticsフレームワークを使用して画面上のアクションに合わせてコントローラで振動をトリガしますサウンドエフェクトも忘れずに追加してアクションに成功した場合はプレイヤーにすぐに視覚的なフィードバックを提供しますゲームコントローラフレームワークを初めて利用する場合は始めるにあたって役に立つリソースが用意されています Unityエンジンを使うゲームの場合は Unity用のゲームコントローラプラグインを使用してゲームコントローラ入力をサポートできます詳しくはこちらのビデオをご確認くださいここで様々な種類の入力について対応しているスペースを見てみましょうシステムジェスチャや従来のゲームコントローラまたキーボードなどのほとんどの種類の入力については共有スペースのウインドウやボリュームからフルスペースまでのあらゆるタイプのスペースで対応していますカスタムジェスチャによる入力に応答させたい場合はフルスペース向けにゲームをデザインする必要がありますまとめるとゲームにはプレイヤーにとって適切と思える入力をデザインするための様々な選択肢があります組み込みのシステムジェスチャはプレイヤーが簡単かつ自然に使えますさらに柔軟性が必要な場合はカスタムジェスチャを1つか2つ追加することを検討できますゲームの種類によっては物理的なコントローラをサポートし入力の選択肢を広げることができます最後にもう1つ iOSまたはiPadOS向けの既存のゲームがある場合それをvisionOSでよりイマーシブ感のあるゲームに変身させる方法について「Bring your iOS or iPadOS game to visionOS」で詳細を確認してくださいご視聴ありがとうございました

// Respond to a tap gesture.

struct ContentView: View {
  var body: some View {
    RealityView { content in
      // For entity targeting to work, entities must have an InputTargetComponent
      // and a CollisionComponent!
    }
    .gesture(TapGesture().targetedToAnyEntity().onEnded { value in
      print("Tapped entity \(value.entity)!")
    })
  }
}

7:08 - Combine dragging, magnification, and 3D rotation gestures

// Gesture combining dragging, magnification, and 3D rotation all at once.
var manipulationGesture: some Gesture<AffineTransform3D> {
  DragGesture()
    .simultaneously(with: MagnifyGesture())
    .simultaneously(with: RotateGesture3D())
    .map {bgesture in
      let (translation, scale, rotation) = gesture.components()

      return AffineTransform3D(
        scale: scale,
        rotation: rotation,
        translation: translation
      )
    }
}

9:33 - Create and detect a custom circle gesture

// Create and detect a custom circle gesture.

// Get all required joints and check if they are tracked.
let leftHandIndexFingerTip = leftHandAnchor.skeleton.joint(named: .handIndexFingerTip)
// ...
// Get the position of all joints in world coordinates.
let leftHandIndexFingerTipWorldPosition = matrix_multiply(leftHandAnchor.originFromAnchorTransform, 
                leftHandIndexFingerTip.anchorFromJointTransform).columns.3.xyz
// ...
   
// Circle gesture detection is true when the distance between the index finger tips centers
// and the distance between the thumb tip centers is each less than four centimeters.
let isCircleShapeGesture = indexFingersDistance < 0.04 && thumbsDistance < 0.04
if isCircleShapeGesture {
  // respond to gesture
}

14:00 - Detect a connected game controller

// Detect connected game controller.

// Add handler for when controller connects.
    NotificationCenter.default.addObserver(
	      forName: NSNotification.Name.GCControllerDidConnect,
  	    object: nil, queue: nil) {
    	      (note) in
      	      guard let _controller = note.object? as GCController else { return }
        	    // Add controller input change handlers.
          	  _controller.physicalInputProfile[GCInputButtonA]?.valueChangedHandler = {
            	  //... 
            	}
       	}

// Poll for controller input
    if controller.physicalInputProfile[GCInputButtonA]?.pressed {... }
    if controller.physicalInputProfile[GCInputButtonB]?.pressed {... }

14:24 - Tag a RealityView to handle controller input

// Tag a RealityView to handle controller input.

struct ContentView: View {
  var body: some View {
    RealityView { content in
      // Tag your RealityView to respond to controller input events.
    }
    .handlesGameControllerEvents(matching .gamepad)
  }
}

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

関連する章

リソース

関連ビデオ

WWDC24

WWDC23

WWDC22

WWDC21