ギガノトカップ

バンドブラザー２

https://github.com/KOU050223/BandBrother2-Backend
https://bandbrother2-2764c.web.app/

Go

React

GCP

PostgreSQL

Rails

対バンするぜ！ 作って遊べる音ゲープラットフォーム！

ウオミー

ぎぷそ

gondodo3

るいるい

推しアイデア

自分だけの音ゲーを製作 ローカルとネット通信の対戦機能で遊べる！ 旧ニンテンドーハードも負けてないぞ

作った背景

「２→対→対バン(2グループでライブを行うこと)→音ゲー！」　& 最近ライブにハマっている！

推し技術

DBがあるバックエンドしっかり書いた！ フロントのUI(音ゲー部分・作譜エディター)

プロジェクト詳細

現状

デプロイ済んでます！

オフラインの音ゲーと譜面作成はできます！

デプロイ先でのオンライン対戦はできないです

リンク

figma(アイデア・アーキテクチャ初期案・画面遷移など)

フロントエンドのリポジトリ バックエンドのリポジトリ

機能

本家バンドブラザーズにある機能を再現！

  • 曲に合わせてボタンを押すことで演奏をする
  • 譜面を作成して投稿する

ログイン
  • AuthenticationでメールアドレスとGitHubでログイン Result screen

Result screen

Result screen ホーム画面に遷移する

楽曲を遊ぶ(ソロプレイ)

ローカルではソロプレイと対バン（2人）プレイが可能！

ソロプレイは[d,f,j,k]キーが上から対応している４鍵タイプの音ゲーになっている

Perfect : +5 Good : +2 Miss : -2

でスコアリングをしている

image

Result screen

楽曲を遊ぶ(対バンプレイ[ローカル])

対バンプレイはそれぞれ[q,w,e,r]キー、[u,i,o,p]キーが上から対応している４鍵タイプの音ゲーになっている

image

楽曲を遊ぶ(マルチ対バンプレイ)

譜面作成

image 4つの譜面をクリックで制作 フロント内にある既存曲6曲 | | 自分の好きなmp3ファイルを選択可能 タイトル、長さ、BPM、mp3の長さに合わせて同期する、音声のスライドバーで譜面が連動、過去に作った譜面の上書き等ができる。

作成した曲で遊ぶ

投稿した曲は1人・2人プレイをすることができます image

使用技術

フロント
  • React
  • TailwindCSS

バックエンド
  • Ruby on Rails v 8.0.2 (メインのAPIサーバー)
  • Go v 1.23.5 (対戦用webソケットサーバー)
    • gorilla/websocket v1.5.3
  • PostgreSQL (ユーザー、ルーム、対戦履歴)
  • Redis (マッチングキュー)

インフラ
  • Terraform
  • GithubActions
  • GoogleCloud
    • CloudRun(Rails Goサーバー)
    • CloudSQL (PostgreSQL)
    • Memorystore (Redis)
  • firebase
    • Authentication　（認証）
    • Firestore Database （譜面データ）
    • Firebase Storage （楽曲音声データ）
    • Firebase Hosting （フロントデプロイ）

image

image

各自実装について

マッチング

Redisのキューを使用してマッチングを行っている

いんふら・バックエンド全般について

開発環境

Docker-composeを使用してRails,Go,Posgre,Redisを立ち上げて開発をしていた

Terraform

GoとRailsを使用してみたいという気持ちがあったので両方をまとめてデプロイできるようにTerraformを使用した

Terraformのディレクトリ構成

.
├── apis.tf
├── cloudsql.tf
├── game-server.tf
├── provider.tf
├── rails-server.tf
├── redis.tf
├── terraform.tfstate
├── terraform.tfvars
└── variables.tf

GithubActions

バックエンド・フロントエンドともにGithubActionsを設定し、mainブランチにプッシュされたら自動でデプロイされるようになっている (バックエンドの方は設定こそしたがうまくいっていない[手が回らなかった...])

ディレクトリ構成

規模感がミニマムかつ開発を楽にしたかったのでバックエンド全体にモノレポ構成を採用した

.
├── .git
├── .github
│   └── workflows
├── game-server（Go-Game-Server）
│   ├── bin
│   └── cmd
│       └── server
├── infra
│   └── terraform関係フォルダ
├── rails-server
　   ├── .github
　   │   └── workflows
　   ├── app
　   ├── bin
　   ├── config
　   │   ├── environments
　   │   ├── initializers
　   │   └── locales
       ├── db
　　　　   └── migrate

WiiFitBoard

ラズベリーパイでデータ取得用スクリプトを実行し取得したデータをフロントにwebsocketで送信する予定でした。

＜今回の敗因＞

  • wiiboardの電池残量が少なかったこと
  • wiiboardのセンサーが壊れていたこと
  • Bluetoothの接続に手間取ってしまったこと
  • pythonのバージョンの違いに苦しめられたこと

音ゲー処理
  • Reactをベースに構築
    • リアルタイム処理をrequestAnimationFrameとhowler.jsを組み合わせて高効率なゲームループを実現
    • useGameLoop.js で、Reactの useEffect の中で requestAnimationFrameを呼び出し続けることで、滑らかなノーツの動きが可能
    • howler.js のseek() メソッドで時間の管理と同期
    • 譜面データに基づいて時間ベースの座標計算による滑らかなノーツアニメーション
    • キー入力が行われると、その瞬間の再生時間を基準に判定。ノーツの目標時間と現在の時間差を計算して、その差で判定の処理を行う
  • スコアリング
    • 判定枠の〇から±0.4以内ならperfect，枠に触れたらgood,それ以外ならmiss(同時推し対策で、譜面に関係ないところで別のキーを押したら、missになるように工夫)image

アイデアについて

テーマ「２」

最近バンドアニメ(ロックレディ・ガルクラ・バンドリ・ぼざろなど)にハマって、音楽系がパッと思いついた

音楽系 & 2 といえば対バン！（2グループで合同ライブ）

対バンとは

元ネタにしたい神作

image

今後実装したいこと
  • 音ゲーの入力処理を増やす
    • wiiboardからデータを取得しフロントへ送信する
      • プログラム自体はできているので使用する機体を変えて挑戦したい
    • Joyconで振り動作を音ゲーの判定処理に入れる
    • webカメラを使用してチューニズムのAirみたいに手を挙げる動作
  • オンライン対戦(フロントで手一杯でした・基盤はあるので調整したい)

ウオミー

@KOU050223