はじめに
私の所属しているコンピューター系の学生団体RICORA(DTM[1]とプログラミングをする学生団体です)の有志部員で制作をしていたゲームがある程度完成してきたので紹介いたします。
概要
タッチパネルやキーボードを使って遊ぶ、Webブラウザで動作するクロスプラットフォーム対応の音楽ゲームです。
ゲームクライアント
タイトルシーン
選曲シーン
プレーシーン1
プレーシーン2
リザルトシーン
ランキングサイト
ホーム
楽曲一覧
楽曲別ランキング
総合ランキング
できたもの
制作したゲームは以下のリンクから遊ぶことができます。
GitHubのリポジトリはこちらです。(よろしければStarを頂けると幸いです)
ユーザー向けの詳しいゲーム説明はリポジトリのWikiに記載しているので興味のある方はこちらもご覧ください。
技術選定
より多くの人にプレーしてほしいという思想の元、アプリ導入の敷居が低いPWA[2]対応のWebアプリとして開発し、タッチ操作とキーボード操作のどちらでも遊べるマルチプラットフォームゲームとして設計しました。
フロントエンド(ゲーム本体)
TypeScript, Phaserを使用しています。
PhaserはPixiJSがベースのデスクトップとモバイルのWebブラウザでWebGLとCanvasレンダリングを提供するOSSのHTML5ゲームフレームワークです。
サンプルコードが豊富でとっつきやすい点を考慮して採用しました。
ゲームをWebアプリとして作成する利点
技術系や創作系の学生団体は、作品を学園祭や外部のイベントに出展することが一般的ですが、学園祭の性質上、来場者はあまり多くなく、また来場された方のみしか作品を楽しめないというのは少し勿体ないと感じます。
作品がアプリケーション等個人の端末のみで体験できる形態であれば、Webで配布や宣伝をすることも可能ですが、アプリを個人の端末に導入するというのは単純に面倒であったり、ウイルスの懸念などからユーザーにとっては億劫で敷居が高いものになります。PCゲームであればなおさらです。
ここで作品がWebアプリの形態であれば、ユーザーは現代的なWebブラウザが動作する端末さえあれば、インストール作業などをすることなくアプリを起動することができ、また開発者にとってもマルチプラットフォーム化が容易であったり、App StoreやGoogle Playへの申請などの負担が減るといった利点があります。ネイティブアプリでないことによる制約こそ発生しますが、これはPWA化することでこれはある程度軽減できます。またWebフロントエンドの技術をすべて使用できるという大きな利点もあります。
音楽ゲームの基幹部分について
譜面ファイルはBMSという形式を採用しており、ゲーム本体ではこのBMSのパーサーであるbms-jsを使用しています。
BMS形式を採用した理由としては以下の事項が挙げられます。
- 歴史の長い形式なのでツールが充実している
- 譜面作成をDTM勢に投げたいので有名な形式のほうがとっつきやすい
- 過去にBMSとして作成された楽曲をそのままゲームに組み込める
- 独自拡張しやすい記述形式
- 譜面の記述が簡潔&表現力が高い
- Gitと相性が良い
まずBMSは歴史の長い形式なのでOSSかつ機能面で優秀な譜面エディタやビューアーが複数存在しています。これによって既存のツールを流用することでゲーム本体の開発と楽曲の譜面作成を平行して進められます。また独自拡張しやすい記述形式であるため独自仕様にも短時間である程度対応できます。
譜面パーサーについても既存のライブラリを使用することで短時間でゲームの基幹部分を実装できました。
フロントエンド(ランキング閲覧)
TypeScript, Svelte, Tailwind CSS, daisyUIを使用しています。
Svelteについては後発のフレームワークであるためReact等と比べるとWeb上の情報量が少ないですが、HTML+CSS+JavaScriptという昔ながらのWeb開発に忠実でとっつきやすく、また将来性がありそうという理由で採用しました。
バックエンド(ランキング管理)
Python, FastAPIを使用しています。
元々Pythonに慣れていたことに加え、ドキュメントが充実していてOpenAPI[3]とPydantic[4]による型安全とそれによるTypeScriptの相性の良さを理由に採用しました。FastAPIのおかげでデータベースのCRUD操作[5]やJWT[6]による認証などを簡単に実装することができました。
インフラ
フロントエンドはGitHub Pages、バックエンドはFly.ioを使用しています。
GitHub Pages
GitHub PagesはGitHubが提供している静的ページのWebホスティングサービスです。
弊サークルではGitHub Organizationを運用しており、ここでサークルのWebサイトや活動に必要な各種ツール等のソースコードやドキュメントを管理しています。今回制作したゲームは単発で作って終わりではなく、楽曲や譜面の追加や新機能の実装等を行いながら長期にわたって運用して欲しいという思いがありました。ただ運営引継ぎの際には可能な限り引継ぎ事項を減らしたかったので、GitHubの機能であるGitHub Pagesを使用し、Organizationの招待だけで引継ぎが完結するようにしました。
楽曲と譜面についてはゲーム本体やランキング閲覧サイトとは別のリポジトリで管理し、GitHub Actionsでのゲーム本体のビルドとデプロイの際にdegit[7]を使用して呼び出しています。GitHub Actionsのワークフローは以下の通りです。
# 省略
jobs:
deploy:
# 省略
steps:
- uses: actions/checkout@v2
- name: Setup Node.js
uses: actions/setup-node@v2
with:
node-version: '18'
cache: npm
- name: Install
run: npm install
- name: Fetch beatmap repository
run: npx degit RICORA/ricora-beats-beatmap ./dist/assets/beatmaps # RICORA/ricora-beats-beatmapは楽曲を譜面を管理しているリポジトリ名。
- name: Build
run: npm run build
# 省略
Fly.io
Fly.ioはNode.js, Python, Ruby等の実行環境やPostgreSQL, MySQL等のデータベース環境を有したWebホスティングサービスです。Fly.ioではデプロイ等の操作を全てCLIで行うのが大きな特徴です。
似たようなサービスとしてはHerokuが有名ですが、2022/11/28で無料プランが廃止されてしまいました。代替サービスを探していた所このサービスを発見し、ドキュメントが充実していて無料枠もあり機能面でも使い勝手が良さそうだったので採用しました。
以下のドキュメントにあるようにDockerfileからアプリを簡単にデプロイできます。
今後の展望
今後の展望は以下の通りです。
- 楽曲と譜面の追加
- ランキングの不正対策
- ユーザーの反応を見ながら新機能追加&バグ修正
- リファクタリング
- bms-jsに任せている譜面制御の部分を1から書き直し
おわりに
今後も楽曲と譜面の更新や新機能追加は続きます。よろしければ是非遊んでみてください。IssuesやPull Requestもぜひお待ちしております。
またこの記事がどなたかの参考になれば幸いです。
-
DeskTop Music コンピューターを利用して楽曲制作をおこなう音楽制作手法の総称。 ↩︎
-
Progressive Web Application Webアプリをあたかもネイティブアプリかのように利用できる技術。 https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps ↩︎
-
旧Swagger REST APIのためのAPI記述形式。 https://swagger.io/specification/ ↩︎
-
実行時の型ヒントや、バリデーション時のエラー設定などを提供するPythonライブラリ https://docs.pydantic.dev/ ↩︎
-
Create, Read, Update, Delete 永続的なデータを取り扱うソフトウェアに要求される4つの基本機能。 ↩︎
-
JSON Web Token JSONデータに署名や暗号化を施す方法を定めた規格。認証用のトークンなどで用いられ、電子署名により改竄を検知できる。https://jwt.io/ ↩︎
-
Gitリポジトリの全部または一部をダウンロードできるCLIツール。 https://github.com/Rich-Harris/degit ↩︎
Discussion