DTM&プログラミングサークルで音楽ゲームを作った話

DTM&プログラミングサークルで音楽ゲームを作った話 DTM&プログラミングサークルで 音楽ゲームを作った話 2023/07/09 TECH UNIVERSITY LT Summit 1/10

DTM&プログラミングサークルで音楽ゲームを作った話 目次 作ったものの紹介 背景や技術的な話 2023/07/09 TECH UNIVERSITY LT Summit 2/10

DTM&プログラミングサークルで音楽ゲームを作った話 RICORA Beats Webブラウザで動く音楽ゲーム https://github.com/ricora/ricora-beats (Starを頂けるとうれしいです) 2023/07/09 TECH UNIVERSITY LT Summit 3/10

• https://github.com/ricora/ricora-beats

DTM&プログラミングサークルで音楽ゲームを作った話 創作面での紹介 コンピューター系サークルのDTM班&プログラミング班による共同制作 タッチ操作とキーボード操作のどちらにも対応 ノーツは単押しと長押しの2種類、タッチ操作ではスライドでも取れる レーンの数は4, 5, 6, 7から選べる スマホでの親指勢やゲーミングでないキーボードに配慮して同時押しは 原則2つまで 完全固定運指を想定した高難易度枠も用意 (実装が間に合っていない) インターネットランキングでスコアを競える DTM (DeskTop Music): パソコン上で楽曲制作をおこなう手法の総称。 2023/07/09 TECH UNIVERSITY LT Summit 4/10

DTM&プログラミングサークルで音楽ゲームを作った話 技術面での紹介 気軽に遊んでほしいのでWebブラウザゲーとして開発 ユーザーにとってインストール作業は心理的な敷居が高い PWAに対応しているのでスマホでも全画面で遊べる ストア登録の審査とかがないので楽、Macがなくても ゲームクライアントはTypeScript+Phaserで開発 PhaserはPixi.jsをレンダリングに使用する2Dゲームフレームワーク 既存のフロントエンド技術と組み合わせられる 今回はあまり使わなかった 公式のサンプルコードが豊富なのでとっつきやすいかも 2023/07/09 TECH UNIVERSITY LT Summit 5/10

DTM&プログラミングサークルで音楽ゲームを作った話 技術面での紹介 (2) ランキングサーバーはPython+FastAPIで開発 Alt Flaskみたいな感じ OpenAPIとPydanticによる型安全がうれしい TypeScriptとも相性が良い 公式ドキュメントも丁寧でうれしい ランキングの閲覧サイトはSvelte+Tailwind CSS+daisyUIで開発 Svelteの構文はReactよりも従来のHTML+CSS+JSの開発に近い デザインはTailwind CSS+daisyUIで時短&簡単に組み立てられる 2023/07/09 TECH UNIVERSITY LT Summit 6/10

DTM&プログラミングサークルで音楽ゲームを作った話 技術面での紹介 (3) 譜面の形式はBMSを採用 音楽ゲームの創作界隈において歴史の長い形式なのでツールやノウハウが充 実している 譜面作成をDTM勢に投げたいので有名な形式のほうがとっつきやすい 過去にBMSとして作成された楽曲をそのままゲームに組み込める 独自拡張しやすい記述形式 譜面の構文が簡潔&表現力が高い plain textなのでGit管理と相性が良い BMS (Be-Music Script|Be-Music Source file): 初出はBM98の譜面のデータ形式で、様々な派生が存在する。 2023/07/09 TECH UNIVERSITY LT Summit 7/10

DTM&プログラミングサークルで音楽ゲームを作った話 技術面での紹介 (4) フロントエンドのデプロイ先はGitHub Pages 高機能ではないが無料で十分使える 団体のGitHub Organizationがあるので引継ぎが楽 バックエンドのデプロイ先はFly.io Alt Heroku 無料枠だけでも十分使える Dockerfileを書いて簡単にデプロイできる 操作をすべてCLIで行うのが特徴 2023/07/09 TECH UNIVERSITY LT Summit 8/10

DTM&プログラミングサークルで音楽ゲームを作った話 まとめ 頑張って制作したので是非遊んでみてください！ https://beats-ir.tus-ricora.com/ 「RICORA Beats」で検索 同様にゲーム制作企画を検討されている方の参考になれば幸いです 2023/07/09 TECH UNIVERSITY LT Summit 9/10

• https://beats-ir.tus-ricora.com/

DTM&プログラミングサークルで音楽ゲームを作った話 おわり 2023/07/09 TECH UNIVERSITY LT Summit 10/10