高校生がRPG風のタイピングゲームを個人開発してみた話
こんにちは！17さい3年生の「ソテツ」です✨
この度、個人開発で「タイピング冒険記」を作ったので紹介します！
応援していただける方は、拡散よろしくお願いします🙇
どんなゲーム？
タイピング冒険記はブラウザから遊べるタイピングゲームです！
敵を倒したりアイテムを獲得しながら冒険を進めていきます
①戦闘システム
お題の文章を打つことで敵にダメージを与えることができ、ミスタイプや敵の攻撃によってダメージを食らってしまいます
そして少しでもHPを温存して敵を倒していき、先へ進もう！というゲームです
②アイテムと回復薬
冒険を進めていくと、武器や回復薬を手に入れることがあります👀
これらによって攻撃力UPやHPの回復が可能です
③分岐点の登場
冒険を進めていくと、分岐点が登場します！
この分岐点によって進むステージが変わり、それによって出てくる敵キャラやラスボスが変化します
ある程度進むと分岐点が登場し、それぞれのステージに分岐します！
分岐によって途中の敵からラスボスまですべて異なります(スコアの公平性のためにどの分岐でも敵の強さは同じにしてあります)
④ランキング機能
タイピングの腕前でのスコアによってランキングで競うことができます✨
このランキングはリアルタイム更新で、Googleアカウントでログインすることで参加できます
なぜ作ったのか？
ここまではゲームの概要について書きました！
しかし、そもそも既に世の中には類似のRPG風タイピングゲームがいくつか存在しています
ではなぜ僕がわざわざこのゲームを作ろうと思ったか🤔
それは現状あるRPGゲーム風のタイピングゲームは「他プレイヤーとの競争や比較がしにくい」という最大のデメリットがあると感じたからです
というのも他の類似ゲームでは、レベルアップによるステータス強化や取得したアイテムを"セーブ"して進んでいくように作られているものが多いのです。
もちろんこれはドラクエとかポケモンみたいな一般的なゲームをタイピングゲームに取り込んでいて、楽しいプレイにつながるのですが、このようなシステムをとると「タイピング力」についての一貫した指標が存在せず、スコアがつけられないという問題が起きます。
人によってキャラの性能自体が異なるからです
となると当然他のプレイヤーとの比較もできないし、個人においてのタイピング力の向上も実感しにくいということになってしまいます。
これは僕が実際にプレイしていてずっと感じていたストレスでした…🤔
それを踏まえて…！
ということで当ゲームでは「RPG風」かつ一貫したスコアによっての「競争のしやすさ、成長の実感のしやすさ」を特に意識して作りました！
そのためアイテムやステータスを繰り越してセーブしておくことはなく、毎回新しく進んでいくようになっています。つまりスコアは腕前によってのみ決まるということです✨
画面の右側にリアルタイム更新のランキングを掲載したり、アカウントごとのハイスコアを常に表示したりもしています！
フィードバックのお願い
自分なりには十分だというところまで作ったつもりなのですが、一人で作っているのもあって気づけてないバグや改善点があるかもしれません
その場合はこの記事の投稿欄やTwitterのDMにご意見を送ってもらえると嬉しいです！
前回開発したQuickURLでもリリース後に頂いたアドバイスが非常に役に立ち、実際に改善させていただきました✨
積極的に取り入れていきますのでよろしくお願いいたします🙇
技術面のお話
ここまではゲームの概要や僕の目的について話してきました
ここからは技術面の話をします🔥
使用した言語、ツール
プログラミング言語はNext.js+TypeScript、スタイリングにはTailwindCSS、ログイン機能の作成にはFirebase、デプロイにはNetlifyを使用しました
その他の使用した細かいツールについてはこの後のセクションで書きます
開発にかかった期間
最初は二週間で作ろうと思ってましたが、初めてのNext.jsでの開発というのもあって1か月かかってしまいました…
タイピングの複数入力対応
日本語でタイピングゲームを作ろうと思ったら必ずぶち当たる問題で、めちゃくちゃ大変なのが複数入力対応です…
「し」を打つ時とかに「si」「shi」両方に対応できるように…のやつです
これについて記事はいくつかあるのですが、試してみてもうまくいかなかったり実装が大変だったりしました
ですが！それを劇的に楽にする神ライブラリがあったので紹介しておきます
下記の記事の通りに行うだけで一瞬で実装できました
キャラクター画像の作成
ゲームを作る際にコーディング以外にやらなければならないこととして「素材の作成」があります
特にキャラクター画像についてはフリー画像を取ってくるとどうしてもしょぼい感じになってしまうので独自の物を用意したい！
しかし高校生の僕に人に依頼できるお金なんかあるはずありません
ということで今回のキャラクター画像作成にはAIを使用しました！具体的にはDALL·E 2というツールを使って生成しました↓
ただまぁ人に頼むよりは安いとはいえ、一応有料なのでこの出費はかなり痛かったです
5000円の貴重なお小遣いが消えていきました…😇
この画像生成については記事を書いているので、気になったらそれを見てみてください！
解決できてない課題
現状の仕様だと画像を使う時になって初めて画像を読み込むため、モンスターが登場してから実際に画像が表示されるまでに1秒程度のラグが生じるという問題があります
この対処法として「事前に読み込んでおく」方法とか「読み込み中はプレースホルダーを表示させる」などという方法があるのですが、画像の変更をImageタグのsrcを切り替えるという方法で行っている関係でどちらの方法も上手く実装できず、結局今も問題は解決していません
これについては今後対処したいと考えています(もし分かる方がいればGithubに投稿してるので協力してもらえると嬉しいです🙇🏻)
まとめ
タイピング冒険記の概要と作った目的について書きました！
少しでも良いと思ってくださった方は拡散よろしくお願いします！僕自身に影響力がないので、ご協力していただけるとい嬉しいです
フィードバックやアドバイスも募集中ですのでガンガンお願いします🙇🏻
現在17歳ですがまだまだ勉強していって面白いサービス開発をすることを目標に、日々精進しています。いつか沢山のユーザーを抱えるサービスを作ります
ここまで読んでいただき、本当にありがとうございました🔥
Discussion
iidesune☆