推しアイデア
・朝、学校に行くまでの一連の流れを実際に体験できる！ ・画像認識を使って、体を動かして遊ぶゲーム！ ・PCとスマホで連携して遊べるゲームシステム。
寝過ごしパニック！
寝坊したぁぁぁぁぁ！ 学校へ急げ！！！！
作った背景
良く電車で寝過ごす友人がいるので、その友人をモデルにした
推し技術
【MediaPipe】 ・体の動きや顔を認識して実際にその場にいるような体験をできるゲームに仕上げた【LineAPI(LineBot)】 ・スコアやユーザーidをFireStoreと連携して管理できるようにした。 ・その他面白い無駄(無駄だけど面白い)機能もいっぱい！
プロジェクト詳細
寝過ごしパニック！
概要
やばい！寝坊したぁぁ！！急いで学校へ！！！
バイクに乗って最寄駅近くの駐車場 →走って電車に乗り込む →電車で寝過ごさないようにする という３ステージ制のゲームです
遊ぶ前に以下のQRコードから公式LINEを追加してください。
読み取れない場合は以下のURLから追加してください。 [https://lin.ee/OFxguYv]
使用技術
- Unity
- webGL
- React
- React-unity-webgl
- Mediapipe
- Flutter
- LineMessagingAPI/LineログインAPI
- Firebase Hosting/Function/FireStore
何気にアーキテクチャ図初めて作成してみた（リタ）
STAGE1+STAGE2
ゲーム概要
ゲーム開始前：LineでID発行
- ID発行をするとLineに登録されたメールにステージ1へのリンクが届く
- リンクにid情報を含めてます
stage1:バイクゲーム
- カメラの前で手を傾けることで左右に移動できます
- 障害物に当たると減速
- 緑色のゾーンに入ると加速
stage2:ランゲーム
- 手を振ることで加速
- 両手を上げることでジャンプ！
- 障害物をジャンプで避けよう！
技術
- ReactとUnityをReact Unity WebGLで連携
- mediapipeでハンドトラッキング
- Viteでサクサクビルド
- Vercelデプロイ
- FireStoreでゲームIDやゲーム進捗・スコアを管理
→IDが存在しない場合、前ステージをクリアできていない場合、既にクリアしているステージの場合はプレイできないようにしている
STAGE3 電車でうとうとチキンレース
【Flutter&Dart】 Flutterは、ゲーム画面、UI部品、アニメーション、カスタムペインターによる電車や背景の描画など、アプリ全体のフロントエンドを構築に使用。 Dartは、ゲームロジック（スコア計算、駅の進行管理、状態管理）、非同期処理、サービス連携（FirestoreやLINE API呼び出し）など、アプリの全てのロジックの記述に使用。
【Firebase (Firestore, Hosting, Functions)】 FireStoreは、ゲーム進行状況やスコア、ニックネームなどのデータをクラウドで保存・管理。 ユーザーごとの進捗管理やランキング、LINE連携のためのデータベースとして使用。 Hostingは、Webの公開に使用。 Functionsは、ゲームクリア時のLINE通知など、サーバーサイドの処理を自動化。
【MediaPipe】 Webカメラから顔ランドマーク・目の開閉を検出。 Webでのリアルタイム顔認識・目の状態判定に使用。
無駄技術 タイトル画面の背景を変更できる
ニックネーム変更可能
LINE (STAGE4)
認証に成功・失敗したときの画面
ゲーム終了後にLIneにクリアメッセージが送信される
ランキング機能もあり
隠しコマンドもあるよ！！！ 【コマンド一覧】 ・ちんかに ・リタ猫 ・ヤッピー
ちんかにゆるすまじ！！！
使用素材
- MOMIZizm MUSiC（もみじば）｜フリーBGM
- 効果音ラボ
- 魔王魂
