👾

Next.jsでレトロなRPGをつくった

2023/10/19に公開

コンセプトはプログラミングのマスコットキャラクタがバグを退治するRPGというもので、Next.jsでレトロなRPGを作成しました。（単一の戦闘シーンのみ実装）以下、戦闘画面になります。

いかがでしょう！？ポップな印象でワクワクしませんか。ピクセルアートも自分で描いたので、ものづくり要素を結集させた作品になっています。以下のURLから遊ぶことができます（BGMをONにすることで臨場感が上がります）

状態変化に基づく表示切替はReactの得意領域なので、UIの表示切替は実装しやすかったです。しかし一方でキャラクタのイメージ画像の再描画にラグが生じ、ちらつきます。高価なコンポーネントの頻繁な表示切替には適さないようです。
開発環境と本番環境におけるサウンド機能の違いでつまづきました。Audioコンポーネントは開発環境では機能しましたが、本番環境では、ビルドの段階でエラーで引っかかってしまいます。最終的にuseRefでaudioタグを操作する方向で落ち着きましたが、開発初期の段階から本番環境で使用できない機能を調査しておいたほうが、より効率的に開発を進められました。

Next.jsはゲームを開発するためのフレームワークではないので、既存提供の仕組みを上手にゲーム開発に適用しなければいけないこと。
- 管理すべき変数が多いため、context fooksのスコープが膨大になり、管理しづらい……
フロントエンド及びゲーム領域におけるテスト実装の知見がないので、機能追加・リファクタリングにおけるプログラム全体の影響を検証できないこと
UI実装部分にゲームロジックコードが侵襲するので、明瞭性に関して課題があること
機能要件に加えて、キャラクタのステータス等、ゲームとしてのバランスを考慮すべきパラメータが沢山あるので、それを一人で考える点も大変でした。
正直な話、Next.jsはゲーム開発に適用できなくはないが、Next.js及びReactの学習目的でなければ、特に使用する必要はないと思いました笑

私自身の個人開発で最も規模の大きなソフトウェアになっています。今まで業務を含め大規模なソフトウェアへの携わり方はリファクタリング・改修・機能追加がメインでしたが、今回初めて0 ⇒ 1のフェーズを経験しました。この工程は1⇒10, 10⇒100よりも頭を使うことが多く、とても良い経験になりました。