visionOS向けTabletopKitについて

visionOS向けTabletopKitについて

TabletopKitを使用してvisionOS向けのボードゲームをゼロから構築しましょう。ゲームをセットアップする方法、RealityKitを活用して強力なレンダリングを追加する方法や、FaceTimeの空間Personaを使用したマルチプレイヤーでのプレイをコードを数行追加するだけで実現する方法をご紹介します。

関連する章
- 0:00 - Introduction
- 2:37 - Set up the play surface
- 7:45 - Implement rules
- 12:01 - Integrate RealityKit effects
- 13:30 - Configure multiplayer
リソース
関連ビデオ

WWDC24
- Reality Composer Proにおけるインタラクティブな3Dコンテンツの作成
- SharePlayでの空間Personaテンプレートのカスタマイズ
WWDC23
- アプリにSharePlayを追加する
ダウンロード

こんにちは TabletopKitチームの Juliaです今日は新しいTabletopKitと Apple Vision Proでのゲーム制作についてご紹介したいと思いますまず TabletopKitでテーブルゲームを作る際の基本的な要素についてご説明します
ゲームの仕組みとしてはプレイヤーがサイコロを振って盤上を移動しカードを集めていきますゲーム盤の形状は超現実的なもので現実世界の可能性を超えたアニメーションが駆使され後片付けも必要ありませんサンプルコードもご用意しています TabletopKitのフレームワークを使えば Apple Vision Pro用の空間的なマルチプレイヤーのテーブルゲームを制作できますカードゲームやサイコロゲームより複雑なボードゲームも可能ですジェスチャやレイアウトは TabletopKitで処理できるのでデベロッパは楽しく革新的なユーザー体験をデザインすることに集中できます TabletopKitはGroupActivitiesや RealityKitなどのフレームワークとも自然に統合できるのでスムーズなネットワーキングと魅力的なレンダリングを数行のコードで追加できます
スマートなデフォルト設定や多くの便利な機能を提供することで機能的なゲームを素早く立ち上げると同時に自由なカスタマイズを行って真にユニークなゲームを作り上げることができます
テーブルゲームはすでに Vision Proで人気がありますその良い例が App Storeの Game Roomのソリティアです
ただしゲームを開発する時は様々な要素について考慮する必要があります表のレイアウトアニメや物理シミュレーション高性能なマルチプレイヤーなどです
TabletopKitはそのような障壁を取り除きゲーム制作の楽しさと創造性を引き出すように設計されています今日ご紹介するゲームは古典的なボードゲームをアレンジしたものでどこか懐かしく楽しいものですまず最初にゲームの初期状態を設定しますプレイ中に目にしたり操作したりするすべてのものが対象です
その後得点のつけ方や無効な動作の禁止などゲームの論理的な仕組みを決定します
次に RealityKitを使って視覚効果やオーディオ効果を加えゲームに命を吹き込みます最後に GroupActivitiesを使ってコードを数行だけ追加しマルチプレイヤー機能を有効にします
ではまずゲームの設定から見ていきましょう
テーブルゲームについて考えるには盤上を見るのが一番です
まずテーブルを用意して全員の席を決めますそこにマス目を設定した盤を置き具体的なオブジェクトを追加しますプレイの駒カードサイコロなどの要素でゲームに命を吹き込みましょう
ゲームで最初に記述すべきものはテーブルです設定もプレイもすべて盤上で行われるからですテーブルは半径のある円形でも幅と奥行きのある長方形でも構いませんテーブルは各ゲームに必須です少人数のゲームなら小さい円形のテーブルがよいかもしれません例えば友達とのチェッカーなどです広々とした長方形のテーブルは大型のボードや数多くの要素を使用する複雑なボードゲームに最適です
テーブルができたら発生しうるすべての位置や向きをテーブルの原点と座標系を基準に記述します
テーブルを記述するのは簡単ですここでの形状と寸法はこれから作成するゲームのプレイ可能領域を表しますこの形状は多くの場合レンダリングするテーブルエンティティと一致しますがそうである必要はありません
ここでは長方形のテーブルを作成しフレームワークでエンティティのバウンディングボックスを指定しますテーブルを定義した後テーブルの周りに座席を配置します
座席の位置はテーブルの原点を基準に決定します 1つのシートに割り当てられるのは一度に1名のプレイヤーのみで各プレイヤーはゲームに参加するために座席を確保する必要がありますゲームの観戦者は着席できません
プレイヤーはゲーム全体を通じて様々な席を獲得できます
このゲームの参加者は3人までなので固有のIDを割り当てた3つの席をテーブル周りに等間隔に配置し皆がテーブルの中央を向くようにします
マルチプレイヤーセッションでは他のメンバーも観戦できますが着席はできないためテーブル上のオブジェクトを操作することはできませんテーブルと座席を用意したらあとはゲーム自体の設定をするだけですテーブル上にあるものはすべて要素です
この例ではボードマス目駒カードサイコロはすべて種類の異なる要素になります
ではそれぞれの要素を使ってどのようにゲームのコンポーネントを表現するのかをご紹介します
まず駒の記述方法を説明します駒は各プレイヤーがボード上で動かすものでゲーム内の物理的なオブジェクトであり RealityKitエンティティとして- 表示されるため固有のサイズがありプレイヤーが操作できます
駒はそれぞれの対応する座席の前から出発しその座席の所有物なのでその座席のプレイヤーだけが動かすことができます
これがサンプルの駒のコードです駒はEntityEquipmentプロトコルに準拠しているため RealityKitエンティティがアタッチされておりゲーム内の有形オブジェクトになります
初期状態では駒の主要なプロパティを設定します seatControlは対応する座席のみに設定したので自分の駒を動かせるのはその席のプレイヤーだけです
駒の開始位置はテーブルを基準に設定したため駒はまず各プレイヤーの目の前に配置されます
またエンティティを引き渡せば駒のバウンディングボックスがフレームワークによって決定されます
このゲームの要素のもう1つの例はマス目です高架のベルトコンベヤがゲーム盤の役割を果たし駒はその上にあるマス目に沿って移動します
個々のマス目は盤上の特定の地点を表します
ゲームの中ではプレイヤーが自分の駒を様々なマス目に移動させます
2人のプレイヤーが同じマスに到達した場合 1つのマスに複数の駒が同時に入ることができます
各マスにはカテゴリもありそれがゲームプレイや表示されるアニメーションに影響します
これがコンベヤのマスで Equipmentプロトコルに準拠しています
駒と同じように初期状態のマスの様々なプロパティを記述します
まずボードを親に設定しますこれはマス目がボードのバウンディングボックス上にあることを意味します
次に位置を設定しますマス目はボードの子なので位置はすべてボードの座標系を基準としたものになります
最後にマスのエンティティはレンダリングしないのでバウンディングボックスを明示します
同様のパターンでカード1組サイコロそしてカードを受け取る各プレイヤーの手を追加します
これでゲームを始めるために必要なものがすべて揃いましたのでゲームの仕組みを構成していきましょうゲームは通常様々なプレイヤーがオブジェクトを操作することで進んでいきますゲームをどの程度自動化しどの程度をユーザーが自分で操作できるようにするかは設定によって変更できます例えばカードの配布が退屈なら自動的に全員にカードを配るボタンを追加できますそれでもプレイヤーが手で山札からカードを引けるようにしておけばより臨場感を演出できますこの例ではプレイヤーがサイコロを振り駒を動かしてカードを集めます TabletopKitではシステムジェスチャが監視されるので SwiftUIのシーンを利用してアプリをビルドする時と同じジェスチャが処理されたうえでインタラクションの形で戻されます
インタラクションにはアクションを追加してゲームの状態を変えることができます具体的な例を見てみましょうプレイヤーが山札からカードをつまみ出してドラッグしいずれかの山の上に置くとしますそしてシステムのピンチ動作を監視しそれをTabletopKitのインタラクションにしてそのカードを新しい山に移動するアクションを追加します
システムジェスチャによって TabletopKitのインタラクションが生成されますジェスチャが変わるたびに TabletopKitはインタラクションのコールバックを呼び出しますコールバックでは対象となる要素と現在のフェーズが指定されますジェスチャフェーズはシステムジェスチャのフェーズを示すのでユーザーがピンチすると同時に開始されピンチ動作をやめると終了しますインタラクションフェーズは TabletopKitのインタラクションのフェーズなので例えばユーザーがサイコロを拾うと開始され投げられたサイコロがテーブルに落ちると終了します
ジェスチャは開始されると同時に開始フェーズに入り持続中はずっと更新フェーズになりますジェスチャは実行中にいつでもキャンセルできます例えば手でドラッグしている最中にその手を背中の後ろへ回したりした場合ですキャンセルは例えばピンチをやめてオブジェクトを落とすような意図的な終了とは異なります
ゲームをRealityViewにアタッチする時は TabletopInteractionオブジェクトの実装を指定します
更新のコールバックはジェスチャの更新のたびに呼び出されますコンテキストには対象となる要素やその配置場所といった書き込み可能なプロパティがいくつかありインタラクションのキャンセルや終了などの変更を行う関数もあります
値にはジェスチャやインタラクションのフェーズ提案される移動先関連するポーズなど読み取り可能な情報が含まれますインタラクションが更新される時がゲーム状態を調整する機会です
アクションはゲーム状態に適用される個別の操作で駒を移動したりカードをめくったりすることです
アクションは指示されるとキューに入り 1つずつ実行されます
一般的な例は親同士の間でのオブジェクト移動などですこのコードスニペットでは操作可能なオブジェクトをあらゆる有効な親要素にドロップできるようにしています
ジェスチャが終了したというコールバックを受信したら提示された有効な親があるかどうかを確認します
ある場合は操作のコンテキストにアクションを追加してその要素を提示された親要素に移動します
これでプレイヤーは盤上で駒を移動したりカードを引いたりサイコロを振ったりできるようになります
ゲーム状態の変化についてはユーザーが完全にコントロールできます TabletopKitは何が動かされたかについての情報を示し何が起こるべきかについてはユーザーが選択できます例えばチェスのゲームを作るとしたらまず 1つのモードでゲームのルールを紹介し可能な動きを紹介して実演しますそしてもう1つの練習モードでルールを強制することなく少しゲームを楽しめるようにします
ゲームメカニクスは楽しいゲーム体験の重要な要素ですがソーシャルダイナミクスも同じですそれらをゲームごとに組み合わせるのですこの時点でサンプルゲームは技術的にプレイ可能ですでも Apple Vision Proのゲームは単にプレイ可能なだけではありません RealityKitはすでにほとんどの作業を行ってゲームに魔法のような視覚効果を与えてくれています影と光を使った非常にリアルなモデルや風変わりな定型アニメーションなど制作できるものはみな RealityKitでレンダリングできますこのサンプルアプリでは駒がいい位置に到達するとロボットが喜んではしゃぎ悪い位置に着くと落ち込みますとても可愛いです
さっき見たようにインタラクティブな要素はゲームの進行に合わせて自動的に動き回りますエンティティは手動でロードするので様々な特殊効果を自由に追加しユーザーの操作に合わせてトリガすることができます RealityKitで効果音を再生するのは非常に簡単なのでサイコロを転がす時に音を鳴らしてみますこれが先ほど説明したインタラクションの更新コールバックです
ここでプレイヤーがサイコロを離すというジェスチャの終了を監視します
オーディオライブラリコンポーネントで好きな音を探します
音響リソースが見つかったらそれをサイコロで再生するよう RealityKitに伝えるだけです RealityKitは空間オーディオに対応しているため音はどこでもサイコロがある場所で鳴らすことができます
では実際にサイコロを投げてみましょう
テーブルゲームは他の人と一緒にプレイする時が一番楽しいものです FaceTimeの空間Personaはすばらしい機能で非常にリアルなのでこれを利用して新しい作品を生み出せば家族や友人が同じ部屋にいない時でも一緒にゲームを楽しむことができます
デフォルト設定があるネットワークゲームの場合は数行のコードで GroupActivitiesセッションを開始しそれをフレームワークに渡しますそこから優れた新機能やカスタムの空間テンプレートを活用してゲーム体験をカスタマイズしプレイヤーや観戦者を室内の好きな場所に配置することができます TabletopKitはマルチプレイヤーネットワークに対応しておりとても簡単に設定できますこのフレームワークではアクションが同期され全プレイヤーのゲーム状態が一致します
プレイヤーがカードを拾うなどのアクションを送信するとそれが検証され決定論的な順序でゲーム状態に追加されます
アニメーションや物理シミュレーションなど処理負荷の高い機能の一部は各自のローカルで処理されるためマルチプレイヤー画面は素早くスムーズに動作し続けます
この例ではプレイヤーがいつでも好きな時に SharePlayを開始できるようツールバーにボタンを用意してみますこのコードは単純な SharePlayボタンを示しています SharePlayシンボルを使った SwiftUIボタンです
このボタンが押されたら新しいGroupActivitiesセッションを開始します
セッションが有効になったらそれをTabletopKitに伝えそのGroupActivitiesセッションと調整しますこれで基本的な設定は完了ですゲームの状態はすべてのプレイヤー間で同期されますゲームで独自の空間レイアウトを使用するなら空間PersonaのカスタムテンプレートAPIを利用できます
デフォルトでは最初の設定時に記述した座席を使って GroupActivitiesセッションのデフォルトのテンプレートが定義されます
そのためこのサンプルではそれぞれの人物がテーブル上の座席の脇に配置され中央を向いて回転します
別の空間設定を使用したい場合は Custom Spatial Template APIを利用して任意のテンプレートを設定すればデフォルトのテンプレートがオーバーライドされます詳しくはビデオをご覧ください
TabletopKitを使えばゲームに命を吹き込むことができます魅力的な体験をかつてなく簡単に作り上げ FaceTimeの空間ペルソナで社会的な交流をサポートすることができます
私たちはゲーム開発の際によくある複雑な問題のいくつかを解決していますがゲームの見た目や雰囲気動作などは皆さんが自由に決定できます
また RealityKitや GroupActivitiesなど他の優れたAppleフレームワークとも自然に統合できるので開発プロセスはさらにシンプルになります詳細はこれらのビデオでご確認ください
TabletopKitを使えばすべてのデベロッパがゲームを開発できます皆さんの作品を楽しみにしています

// Make a rectangular table.

let entity = try! Entity.load(named: "table", in: table_Top_KitBundle)
let table: Tabletop = .rectangular(entity: entity)

4:25 - Place seats

// Place 3 seats around the table, facing the center.

static let seatPoses: [TableVisualState.Pose2D] = [
  .init(position: .init(x: 0, y: Double(GameMetrics.tableDimensions.z)),
        rotation: .degrees(0)),
  .init(position: .init(x: -Double(GameMetrics.tableDimensions.x), y: 0),
        rotation: .degrees(-90)),
  .init(position: .init(x: Double(GameMetrics.tableDimensions.x), y: 0),
        rotation: .degrees(90))
]

5:40 - Define player pawns

// Define an object that describes a pawn for each player.

struct PlayerPawn: EntityEquipment {
  let id: ID
  let entity: Entity
  var initialState: BaseEquipmentState

  init(id: ID, seat: PlayerSeat, pose: TableVisualState.Pose2D, entity: Entity) {
    self.id = id
    self.entity = entity
    initialState = .init(seatControl: .restricted([seat.id]),
                pose: pose,
                entity: entity)
  }
}

6:55 - Define an object that describes a tile

// Define an object that describes a tile on the conveyor belt

struct ConveyorTile: Equipment {
  enum Category: String {
    case red
    case green
    case grey
  }
   
  let id: ID
  let category: ConveyorTile.Category
  let initialState: BaseEquipmentState

  init(id: ID, boardID: EquipmentIdentifier, position: TableVisualState.Point2D, category: ConveyorTile.Category) {
    self.id = id
    self.category = category
    initialState = .init(parentID: boardID,
              pose: .init(position: position, rotation: .init()),
              boundingBox: .init(center: .zero, size: .init(x: 0.06, y: 0, z: 0.06)))

9:53 - Monitor interactions

// The view contains all the content in the game.

RealityView { (content: inout RealityViewContent) in
  content.entities.append(loadedGame.renderer.root)
}.tabletopGame(loadedGame.tabletop, parent: loadedGame.renderer.root) { _ in
  GameInteraction(game: loadedGame)
}


// Define an object that manages player interactions.

struct GameInteraction: TabletopInteraction {
  func update(context: TabletopKit.TabletopInteractionContext, 
                value: TabletopKit.TabletopInteractionValue) {
    switch value.phase {
      //...
  }

10:48 - Respond to interaction updates

// Respond to interaction updates.

func update(context: TabletopKit.TabletopInteractionContext, 
              value: TabletopKit.TabletopInteractionValue) {
  switch value.phase {
    //...
    case .ended: {
      guard let dst = value.proposedDestination.equipmentID else {
        return
      }
      context.addAction(.moveEquipment(matching: value.startingEquipmentID, childOf: dst))
    }
 }

12:52 - Add a sound effect to the die roll

// Respond to interaction updates.

  func update(context: TabletopKit.TabletopInteractionContext, 
                value: TabletopKit.TabletopInteractionValue) {
    switch value.gesturePhase {
      //...
      case .ended: {
        if let die = game.tabletop.equipment(of: Die.self, 
                                       matching: value.startingEquipmentID) {
          if let audioLibraryComponent = die.entity.components[AudioLibraryComponent.self] {
            if let soundResource = audioLibraryComponent.resources["dieSoundShort.mp3"] {
              die.entity.playAudio(soundResource)
            }
          }
        }
      }
    }
  }

14:44 - Set up multiplayer with SharePlay

// Set up multiplayer using SharePlay.
// Provide a button to begin SharePlay.

import GroupActivities
func shareplayButton() -> some View {
  Button("SharePlay", systemImage: "shareplay") {
  Task {try! await Activity().activate() }
  }
}


// After joining the SharePlay session, start multiplayer.

    sessionTask = Task.detached { @MainActor in
      for await session in Activity.sessions() {
        tabletopGame.coordinateWithSession(session)
      }
    }

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

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

関連する章

リソース

関連ビデオ

WWDC24

WWDC23