推しアイデア
それぞれの画面でユーザーの入力方法が変わっていく (スマホ→加速度検知→カメラ検知→キーボード)
コンフリクトバトル
―
同時作業で発生したコンフリクトを直すまでを描くゲーム
作った背景
コンフリクトが起こり、チーム内に亀裂が生まれリアルでも衝突しあう過程をゲームで表しました
推し技術
web socket,photon,WebRTC
プロジェクト詳細
じょぎハッカソン２０２５０５
概要
アプリ名「コンフリクトバトル」
どちらのコミットが修正されるのか、対戦相手と競い合います
りぽじとり
技術縛り
「Line messaging API」「Flutter 」「Unity」「React」を1画面ずつ使うこと
使用技術・担当技術
起(kuroko)
- Line Messaging API
- GAS
承(kuroko)
- Flutter
- Node.js
- web socket
- render
- url luncher
- next.js
- vercel
転(yanai)
- Unity
- TensorFlow
- photon （実装間に合うか否か）
結(yanai)
- React
- WebRTC
共通(kuroko)
- firebase
アーキテクチャ図
旧
新
各デプロイ先
機能詳細
起 (line messaging API)
大まかな説明
- ユーザー登録:lineからuserIDを取得後、名前,合言葉を設定し、firebaseに保存する。
- ユーザー削除:結(react)から遷移した際にfirebase上のユーザー情報を削除すると同時にメッセージを送信する
- 承に遷移:QRコードによりユーザーを遷移させた後、スマホはコントローラー画面に遷移する 細かな説明
- GASをwebhookとしたline messaging APIを作成
- GASをfirestoreと連携し、lineのuserIDをドキュメントIDとして利用したDBを作成
- リッチメニューとQRコードを用いたパソコン遷移を設計
承(flutter)
大まかな説明
- コントローラー検知:firestore内のuserIDをパソコンとスマホそれぞれから選択し、websocketにてコントローラとゲーム画面を認証する
- スマホで操作:スマートフォンからボタンや加速度といった入力をパソコン画面に反映させる
- 複数のゲーム:スマホの各種検知機能を用いたランダムなミニゲームを行う
- ミニゲーム一覧
- テトリス
- ぷよぷよ
- シューティング
- フラッピーバード
細かな説明
- キーボードで遊べる仮ゲームを4つ開発
- firestore内のuserIDを用いたユーザー認証
- scoreをfirestore内に保存
- websocketを用いて外部からの信号を受け入れる準備
- Node.jsとwebsocketを用いたサーバーを作成。renderデプロイ
- Next.jsでスマホ用コントローラー画面を作成。vercelデプロイ -ゲームのwebsocket対応と一部修正
- 転へのリダイレクト:firestore内にスコアを転送
転
大まかな説明 1.迷路を自動生成 2.WASD移動or体の傾きで移動 細かな説明
- 深さ優先探索のアルゴリズムで迷路作成
- TensorFlowで体の傾きで操作
- React内でUnityを表示
(Photonの進捗)
終わって欲しいな → Unityでバックするだけでもコンパイル走ってWebGLでBuild&Runで実行とUnityエディター上でのデバックつらい
追記：正午ごろ：やったね！なんか動いた(おかしいな....)
結
大まかな説明
- WebRTCでオンラインタイピングゲーム
- 同じWifiのみ使用可能
細かな説明
- 同じWi-Fiしか繋げられない理由は、Googleの無料のSTANサーバーしか準備しておらず、違うIPアドレス（WI-Fi）の場合、 NAT超えなどするのに TURNサーバーの準備が必要だが準備が手間なので省きました。 →同じwifi上ではWebRTCを使ってすることができます。
でも動画
タスク管理
1日00:00付近にGITHUB_ISSUE_TEMPLATEを建てて、作業スレを立てて進捗を確認
YAML
お互いの進捗を確認
リポジトリが多かったので、ちょっと管理しやすくしてました https://github.com/Yanai1005/greendme-jyogihack
ストーリー
- [Line] リポジトリを作る
- [Flutter]コードを書いてコミットする
- [Unity]conflictが起きたので言い争い
- [React]やっと直せたがforse pushされてしまう
