推しアイデア
VRプレイヤーを定点カメラで撮影し、とるポーズによって出す魔法が変わるゲームです!
ステゴカップ
PosaMagica
―
Next.js
GitHub
React
Docker
TailwindCSS
ポーズをとって魔法を出すVRゲーム！
作った背景
VRとスマホを使って何か面白いことができないかなと思い作るに至りました。
推し技術
Next.jsにてサーバーの実装 Tensorflow.jsで姿勢推定。 通信にはWebSocketを使用し、リアルタイムに送信 フロントページでスマホのカメラを起動し、そのデータをサーバーに送信、そのままペアリングしているゲームクライアントへ送信しています。
プロジェクト詳細
使用技術
UnrealEngine5(BluePrint) Next.js Tensorflow.js Socket.io Docker TypeScript TailwindCSS
UE側の実装
プレイヤーの魔法発動 UEとアセットを使ったルックの強化 敵の種類ごとの挙動 敵はプレイヤーの近くに来たら一定時間ごとに攻撃
敵の基本挙動
プレイヤーを見つける>プレイヤーの場所に移動する>攻撃>3秒待つ
サーバー側の実装
フロント
- /connection アクセストークン(6桁程度の数字)の入力欄の表示。 入力が完了するとトラッキングページへと遷移する。
バック
- /api/server ゲーム側からアクセスを受けると、即座にWebSocket通信開始。 アクセスPINコード(6桁程度の数字)を返す。 フロント側で数字の入力があると接続完了の通知を飛ばす。
ここからテストできます カメラ側のページ ゲームクライアントを模したページ
Tensorflow.jsによる姿勢推定
鼻、手首、肩や腰など、キーポイントになるものをそれぞれX,Y座標で測定し、それらの位置関係によって魔法属性を分けています
- 両手を胸の前で合わせる
この後のポーズで属性が変わります。
- Fire: 両手を胸の高さで前に広げる
- Wind: 両手を顔より上の高さで広げる
- Rock: 両手を膝より下に降ろす
技術構成図
