趣味でJavaScript（React）を使って外国人向けにゲームを作っているのですが、先日、ゴールデンウィークの時間を使って、そのゲームの第２段をリリースしてみました。
このゲームを作ってみて感じたことや、今後のゲーム作りの方向性について、備忘録を書いておきたいと思います。
（書きながら自分の頭を整理します 笑）
以下がそのゲームです：
また、JavaScriptでのアクションゲームの基本的な作り方に興味がある方は、以前そういった記事を書いたので、そちらをご参照ください：
JavaScript（React）でのアクションゲーム制作の手順 >>
今回、新たに加えた要素
１作目は単純な謎解きゲームだったので、今回はアクションの要素を加えたいと思い、敵キャラを配置してみました。
また、忍者が出す火の玉を使って、敵を倒せるようにもしてみました。
それにあたって、以下の2つの当たり判定を考慮しました。
- 主人公（忍者）と敵キャラの当たり判定
- 敵キャラと火の玉の当たり判定
主人公（忍者）と、その他のオブジェクトの間での当たり判定は前作から実装していたので、「1. 主人公（忍者）と敵キャラの当たり判定」に関しては、以前からあったものをそのまま流用することができました。
「2. 敵キャラと火の玉の当たり判定」に関しては、タイムステップ毎に、全ての敵キャラから見た、火の玉までの距離を判定する処理を加えました。
タイムステップごとの処理を増やすとパフォーマンスの低下が心配でしたが、前作よりも目立って処理が遅いということもなさそうなので、OKと判断しました。
と、まぁそんな感じで、ちょっとだけアクションの要素を加えてみたのが、今作です。
反省点と対策
反省点としては、以下のようなものです。
- そもそも、Facebookで繋がっている外国人の需要とマッチしてない気がする
- セーブ機能がない
- 操作がムズイ
- 画像読み込みに時間がかかる
- てかDOM操作で良いのか？
一つずつ簡単に見ていきます。
そもそも、Facebookで繋がっている外国人の需要とマッチしてない気がする
なぜ自分がFacebookで外国人向けにゲームを公開しようと思ったかというと、以前自分がフィリピンに住んでいた時に、外国人向けの日本語学習ブログを書いていた時期があったのです。
Lingual Ninja! >>
その記事を書く度にFacebookでシェアをしていて、日本帰国後に記事の更新を止めてからも、継続して友達申請をしてくれる外国人がおり、今ではFacebookの友達が4000人ちょっとという状況です。
つまり、僕がFacebookで繋がっている方々は、「日本語学習者」です。
そのため、ただのアクションゲームを作っても、興味ない方も多いのではないかと思います。
（僕自身、このゲーム作りながら、「需要ないだろうな～」と感じておりした…笑）
対策としては、次回は日本語学習の要素を、ゲームの中に入れていければと思います。
ただ、折角PCとスマホ両方で動くように調整しながらゲームの基盤を作ったので、プログラムの構成は、今のものを引き継いでいければと思います。
操作感はそのままに、キャラクターが日本語に関するクイズを出してくるような感じかな…？？
（詳細はもうちょっと考えます）
まぁ、ものは試しということで、次回はそんな感じでやってみようと思います。
セーブ機能がない
長編のゲームでは全くないので、セーブ機能までは要らないかと思ったのですが、やはりあるに越したことはないように思います。
前作・今作は、僕自身のゲーム作りの練習も兼ねていましたが、今後ある程度長めのゲームを作ることを考えると、セーブ機能がないまま貫くのは厳しいように感じます。
とはいえ、このゲームはスマホアプリではなく、あくまでWebブラウザ上で動いているゲームなので、セーブをするためにはサーバー側でユーザー認証を行わなければいけません。
しかし、この程度のゲームにIDやパスワードの入力を求めたり、Googleアカウント等の外部アカウントと連携させてまでユーザー登録をしてもらうのは、なんだか気が引けます。
対策としては、「Cookieにユーザーを識別するための情報を持たせる」等をして、自動でログインできるようにしていければなぁ、と考えています。
操作がムズイ
自分でプレイしていて思うのですが、このゲーム、結構操作が難しいように思います。
というのも、HTMLのbutton要素でキャラクターの操作を行っていますが、あまり反応が良くないように感じます。
落ち着いてやれる謎解きゲームならまだしも、アクションゲームで思うように操作ができないというのは、結構致命的です。
対策としては、次回作ではあまり難し過ぎるアクションの要素は入れないようにして、日本語学習の部分に重点を置ければと思います。
画像読み込みに時間がかかる
目立って処理が遅いわけではないと思うのですが、敵キャラが遅れて表示されるのは、良くないと感じています。
というのも、画面遷移後に敵キャラが瞬時に表示されないと、「急に目の前に敵が現れる」ということになってしまうからです。
運が悪いときには、画面上には表示されていない敵キャラにぶつかって死んでしまうようなことになるので、プレイヤーとしては、非常に理不尽に感じる状況になってしまいます。
これを技術的に改善する術があるのかは、もう少し勉強を進めてみます…
ただ、アクションの要素を減らし、敵キャラの配置なども工夫すれば、技術的な改善を行わなくても、対策できる部分ではあると思います。
てかDOM操作で良いのか？
今更ですが、JavaScriptでゲームを作ると言ったら、canvas使うことが多いですよね…？
自分は諸事情あり、canvasは使わずに、HTML要素のDOM操作のみでゲームを作っています。
（Reactを使っているので、厳密には「仮想DOM」ってやつですが…）
というのも、自分がこのゲームを作り始めた動機が
「仕事でReactとASP.NET使うことになりそうだから、練習で何か作っとくか」
というものだったので、
かなりReactありきのゲーム制作でした。
そして多分、Reactとcanvasは、相性があまり良くないです。
というより、canvasメインでゲームを作るなら、Reactを使う必要はないと思います。
canvasを使う場合、HTML上の1つのcanvas要素の中に、ゲームの描画内容を全て詰め込めるので、Reactで多くのDOMを管理する必要もないからです。
では僕自身は今後どっちを使うのか？と言うと、仕事のこともありますし、とりあえずは引き続きReactを使っていくと思います。
またReactに飽きてきたら、次の技術を学んでいきたいと思います。
「知ってる」よりも「作れる」を目指したい
自分がゲームを作ろうと思ったのは、本やネットで知識を得るだけでは、実践で使うスキルとしては不十分だと感じたからです。
と言うよりも、「知ってます」だけでは、エンジニアとして仕事をする上では、あまり意味がないように感じ始めてきたからです。
自分はITエンジニア６年目ですが、以前は、休日は資格の勉強や、プログラムの本を読みながら勉強していることが多かったです。
それはそれで意味はあったと思うのですが、実際にシステムを設計したり、プログラムを書いたりするためのスキルとしては、やはり自分で何かを「実装する」ことが、一番の勉強だと感じています。
また、人間「楽しい」「興味が持てる」と、思えるものに取り組んでいるときの方が、集中力も増して、知識も頭に入ってきやすいと思います。
エンジニアライフは長距離走ですから、自分が「楽しい」と思えるものを実装しながらスキルを高めていけたら、理想的ですね！
興味がある方には、ゲーム作りはオススメです！
この記事はかなり自分自身に向けた備忘録で、読者の方々にはあまり読むメリットがなかったと思うのですが、最後までお付き合いくださり、ありがとうございました。
趣味でゲームを作ろうとされている方や、エンジニアを目指されている方の、何かのヒントになりましたら幸いです。
コメント