手と音で操る - visionOSで実装する身体的インタラクション

148 Views

December 09, 25

スライド概要

visionOSゲームアプリ『Spatial Monster Magic』の開発を題材に、
• ハンドトラッキングの入力処理
• SwiftUIとRealityKitを組み合わせたチュートリアル実装

などの設計や実装の工夫について

profile-image
スライド一覧

Software Engineer

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

（ダウンロード不可）

関連スライド

slide-thumbnail

猫でも分かるUnreal Engineの学び方 - 超初心者向け編 - 2023 v1.0
ue4 ue5 ue-beginner
user-img エピック ゲームズ ジャパン 1.6M
slide-thumbnail

Unreal Engine5 Lumenの仕組みと肝心なところ
ue5 ue-rendering ue-lumen
user-img エピック ゲームズ ジャパン 1.4M
slide-thumbnail

UE5レンダリングフロー総おさらい(2024) 基礎編！[CEDEC+KYUSHU 2024]
ue5 unreal engine ue-rendering
user-img エピック ゲームズ ジャパン 1.2M
slide-thumbnail

Meta XR SDK(V66-74)でQuestアプリを開発
spatial anchor unity quest pro shaperecognizeractivatestate oculus integration transformfeaturestateprovider building blocks transformrecognizeractivestate ovrsemanticclassification jointdeltaprovider ovrscenemanager jointvelocityactivestate オクルージョン sequenceactivestate scene manager ambisonic depth api metaxraudiosource playerlocomotor meta xr sdk quest3 ovrplayercontroller マルチモーダル meta haptics studio direct touch ui meta xr haptics sdk ovrspatialanchor ovrtrackedkeyboard hapticclipplayer fingerfeaturestateprovider hapticclip ワイドモーションモード wmm mruk mr utility kit voice sdk jointrotationactivestate meta horizon os ui set asw application spacewarp ovr metrics tool unityscene manager colocation discovery コロケーション mx ink passthrough camera api hand tracking microgestures webcamtexturemanager passthroughcamerautils cameraviewermanager hand pose selector recorder
user-img あうぜん 1.1M
slide-thumbnail

最新の6.0で学ぶ！初めてのひとのためのSpring Security
java spring security
user-img tada 1M
slide-thumbnail

猫でも分かる UE5.0, 5.1 におけるアニメーションの新機能について【CEDEC+KYUSHU 2022】
ue5 cedec+kyushu ue-animation ue-optimize ue-bp ue-physics ue-sequencer
user-img エピック ゲームズ ジャパン 1M
各ページのテキスト
1.

手と音で操る visionOSで実装する身体的インタラクション 2025年12月9日 合同会社クウソウ LODGE XR “Tech” Talk #2 Fumiya Yamanaka 1

2.

アジェンダ • 自己紹介 • アプリ紹介 • 開発の工夫 1.影絵の検出 2.魔法の放出 3.アタッチメント 4.チュートリアル • 学びとまとめ •おまけ 2

3.

自己紹介 • Fumiya Yamanaka • iOSエンジニア • mtfum • mtfum • mtfum • 興味 • 3Dプリンター 3

4.

アプリ紹介 内容 • visionOS向け 空間魔法ゲーム「Spatial Monster Magic」 • フルイマーシブ没入型ステージ • 影絵でモンスター召喚 • 魔法詠唱 • 手のひら方向で攻撃発射 • 敵キャラを一定数撃退し、ゲームクリア • 4月開催ハッカソン「Vision Dev Camp Tokyo 2025」で開発 • TAATさんと共同開発 4

5.

アプリ紹介 プレイ動画 5

6.

技術概要 Technical Overview • 画面構成: SwiftUI • RealityKit • ハンドトラッキング: SpatialTrackingSession • メニューなど: Attachment • 音声入力: Speech Framework • アーキテクチャー: ECS • AI • モデル生成: Luma AI • 音楽生成: Suno 6

7.

開発の工夫 1.影絵の検出 2.魔法の放出 3.アタッチメントの使い方 4.チュートリアル 7

8.

影絵の利用 狐、鳥、カタツムリの識別 • visionOSらしさを活かす • ❌ UIの操作 • 👌自身の手でコントロールができること • SpatialTrackingSessionを用いて手指の検知 8

9.

影絵の検出 サンプルコード: 狐🦊 • 親指を起点に指ごとの距離を計算 • 距離が近いもの • 中指、薬指 • 遠いもの • 人差し指、小指 9

10.

魔法の放出 音声入力と手の方向 • 音声認識をグー・パー制御 • 呪文の連続発火/不具合防止 • 開く = 入力中 • 手の方向にモンスターが追従 • 多言語展開 • SFSpeechRecognizer(locale: ) • Fireとファイヤーの違い 10

11.

アタッチメントの使い方 • 2DのViewを3D空間に貼り付ける仕組み • ゲームメニューやチュートリアルに利用 11

12.

チュートリアル • ユーザーに影絵のやり方、呪文の種類、魔法の方向を教える • 文字説明と画像表示 • 実際のアクションをトリガーにして次のチュートリアルへ 12

13.

身体的インタラクション • 人間らしいUI（音声、動作）を活かす • リモコン、キーボード、タッチスクリーンという歴史 • 「Aボタン」を押して攻撃、というはもう古い • 説明の不要さ • 狐、は誰もが経験のあるジェスチャー • グー(停止)・パー(放出)の感覚的理解 • 体験としてのチュートリアル • 身体知として覚えられる • 自然な動作で直感的な体験 13

14.

学びとまとめ • visionOSらしさ • ハンドジェスチャー • 音声入力 • 空間上のUI • ゲーム開発について • ECSで開発可能 • 新しいUIがゲーム性にどう影響するのか 14

15.

おまけ・空の作り方 • scale.x = -1 にすることで反転させ、球Entityの内側にマテリアルを貼る 15

16.

おまけ2 CollisionComponentの利用 • 衝突判定はEntityにそれぞれ特定のComponentを付与(Ball, Enemy…) • 同時にCollisionComponentも付与しBallとEnemyなら衝突 • 敵キャラに当たらなかったボールの自動消滅 • Systemとして範囲外判定もできたがパフォーマンスに懸念 • WallComponentを境界に設置し判定、削除 16

17.

ありがとうございました 17