仕事でReactを使う機会があったので、練習も兼ねて、ブラウザで遊べる謎解きアクションゲームを作っていました。
忍者になって、謎を解いたり、敵を倒したりするゲームです。
先日、そのReactゲームの第3弾を作ったので、気を付けた点や、感想を書いていきたいと思います。
Reactゲームの概要
言葉で説明するより見てもらった方が早いと思うので、興味がある方は以下のリンクから遊んでみてください。
ブラウザゲームなので、リンクから直接遊べます。
簡単に言うと、謎を解いて、巻物を手に入れて、技を覚えて敵を倒す… というゲームです。
僕が作っているReactのアクションゲームの基本的な作りは以前の記事にも書きましたが、基本的には一定時間ごとに呼び出される処理の中で、オブジェクトの位置計算を行い、再描画を行う流れです。
Reactを使う利点としては、仮想DOMの仕組みのおかげで、描画されているすべての要素に対して再描画を行うことをしないため、素のJavaScriptで作るよりはパフォーマンスが良くなっていると思います。
（あと個人的には、HTMLとかCSSなどのマークアップ言語を書いて、それをいちいちJavaScriptで動かすよりも、最初からReactコンポーネントとしてJavaScript内に埋め込めちゃった方が、全てをプログラムとして管理できるので、開発もしやすいです。）
今作から取り入れたこと
上記のReactゲームは「第3弾」ですので、第1弾と第2弾が存在しました。
以下のものです。
3作目も、遊んだ感じは前作とそんなに変わり映えしませんが、プログラム的には結構根本的な修正を入れました。
タイムステップを細かくした
アクションゲームはノートに書いたパラパラ漫画みたいなものなので、「どれぐらいのスピードでノートのページをめくるか」ということを決めておかなければいけません。
ただ何も考えずにforループで処理を繰り返すだけでは、ユーザーが使っている端末やブラウザの性能によって、ゲームの中の物体が動くスピードが左右されてしまうことになります。
そのため、ある一定のタイムステップを決めて、その時間毎に位置計算や描画を行う必要があります。
第1弾と第2弾のときは、そのタイムステップを0.1秒としていました。
ただ、0.1秒だと、間隔が大すぎて、「なんか動きがカクカクするな～」というのをずっと感じていました。
そこで、思い切ってタイムステップを、半分の0.05秒にしてみました。
前作よりは滑らかな動きになっているはずです…
雪を降らせた
ゲームを開いてくださった方はわかると思いますが、ゲームの冒頭から雪が降っています。
ちょっとストーリーを進めていくと、風も吹き始めます。
風が吹いているときに主人公の忍者がジャンプすると、風にあおられて忍者が流されます。
これを実装するにあたって不安だったのは「ユーザーの端末の性能」です。
上記のタイムステップを細かくした件とも関わるのですが、今作は、前作までと比べると、クライアント側の性能が必要な感じのゲームになってしまいました…
ブラウザがWebサイトを表示するときに、最も負担がかかる（時間がかかる）処理は、「描画」の処理です。
前述のように、Reactでは仮想DOMの仕組みを用いて、変更があったコンポーネントのみを再描画してくれます。
そのため、最小限の描画の量で済み、結果としてパフォーマンスが向上します。
ただ、今回の雪のように常に動いているオブジェクトは、タイムステップごとに毎回再描画が行われることになります。
基本的にはこのゲームのプレイ中には常に無数の雪が舞っていますから、描画にかかる負荷が、前作までよりも大きくなってしまいます。
それに加えて、前述のように、今作ではタイムステップを細かくしているので、再描画が必要な頻度も２倍になっています。
僕のスマホやPCではちゃんと動いているのですが、どんな方の端末でも正常に、なめらかに動作してくれるかは分かりません…笑
端末で別の重いアプリを動かしているときなどは、ゲームの動きがおかしくなるタイミングもあるかもしれませんね…
import, exportでファイル分けをした
「いや、前作までしてなかったのかよ」と言われそうですが、前作まではゲームの大部分を１つのファイルに書いていました笑
知らないうちに膨れ上がってきたので、JavaScriptのimport, exportを使って、コンポーネントごとにちゃんとファイル分けしました。
ぶっちゃけ、今回のReactゲーム作成で一番時間を使ったのは、ここだと思います笑
前作までで、結構好き放題複雑に絡み合っていた各コンポーネントを、今後も修正しやすいように分けてみました…
ユーザーからすれば、全く気付かない部分ですが、気持ちよく開発するためには大事な部分かと思い、今回はまじめに取り組みました笑
Reactゲームを作ってみて思うこと
第3弾までReactのゲームを作ってみましたが、忍者のアクションゲームシリーズは、今作が最後にしようかと考えています。
今は、別の新しいアプリをリリースし、コンテンツを追加していっています。
忍者のゲームの開発をやめようと思った理由としては、以下のようなものがあります。
ターゲットが明確じゃない、ニーズからスタートしていない
1つ目は、そもそもゲームを作り始めた動機が「Reactの練習」であり、別に誰のために作ったものでもなかったことです。
ゲーム作りや仕事でReactを使っているうちに、最低限の知識はついたと思うので、ここからは、実際に何かユーザーの課題を解決できるような、誰かの役に立つWebアプリの開発を目指してみようかと思います。
また、このReactゲームは英語と日本語の両方に対応していますが、それも、特にターゲットが明確じゃなかったからです笑
自分は主にFecebookで外国人向けに宣伝をしていましたが、「ついでに日本の人たちにも遊んでもらおー」と思って、日本語でTwitterに投稿したりもしていました。
もうちょっとターゲットを絞って、多少は必要とされるものを作ってみようと思います。
ゲーム開発は時間がかかる
ゲーム作りは結構時間がかかります。
それを考えると、もっとスピーディーにコンテンツが作れる方法もあるのでは？と考えたりもします。
SEOに影響を与えない
上記のゲームを遊んでいく中で、色々とゲーム内での場面は切り替わると思います。
ただ、URLとしてはゲーム全体で一つです。
つまり、今回のReactゲーム第3弾、全部丸々ひっくるめて、１つのURLです。
ブログ１記事分ぐらいの扱いです。
といっても、時間をかけて作ったゲームですから、Googleのクローラーも高い評価をくれる？
のかというと、おそらくそんなことはないと思います。
先日見たGoogleの人がしゃべっているYoutubeビデオでは、「Googleのクローラーは、ボタンを押下したりはしない」と言っていました。
アンカータグ（<a href=””>）の記載を見つけるとそのリンクをたどるようなことはしてくれますが、すべてのボタンを押してJavaScriptの動作を確かめるようなことはしないようです。
そう考えると、このゲーム全体で、Googleのクローラーから見えているのは、トップページの「Which language do you prefer? English / 日本語」のメッセージだけの可能性も高いです笑
「コンテンツisキングと言っても、仕組み上、やっぱり多少は文章を書かないと、SEOは厳しいのかもなぁ～」
と考えている今日この頃です。
「せっかくWebアプリとしてインターネットに公開されるものを作るわけですから、検索エンジンにも振り向いてもらえるようなものを作りたいな～」
とも考えている今日この頃です。
次のReactアプリ
上記の課題を踏まえて、次のWebアプリを作っています。
というか、Webアプリ自体はもう作ってあるのですが、定期的にコンテンツの更新が必要なので、それをせっせとやっています。
具体的には、以下のものです。
 |
| Japanese Folktales |
よかったら、下記のリンクから覗いてみてください。
Japanese Folktales >>
ターゲットとしては、日本語を勉強中の外国人を想定しています。
日本昔話が読めるアプリです。
もともとFacebookで、外国人向けに日本語を教えるブログの宣伝をしていたりして、Facebookの友達を地道に4000人以上に作っていたので、せっかくだったらそこにアプローチしよう、と思いました…
参考にしたものとしては、「洋販ラダーシリーズ」という本です。
↓ラダーシリーズ↓
ラダーシリーズは、僕が英語の勉強に使っていた本のシリーズで、「星の王子様」などの物語を、簡単な英語で読めるものです。
本の中に必要な単語集も入っているので、分からない単語があれば、調べながら読み進めていけます。
それの、日本語学習版を作れればと思いました。
10月4日に1発目の「Momotaro」をリリースしたので、まだリリースから１か月たっていないぐらいです。
検索エンジンからも少しずつ流入が来ているので、今後も順調に伸びていって、より多くの人に使ってもらえれば、面白くなるんだけどな～
と思っています。
こちらの日本語学習用アプリの詳細に関しては、また別の記事で書いていければと思います。
この記事が、Reactゲームなどを作ろうかと思っている方の、何かヒントになれば幸いです。
大した内容は書いていませんが、最後まで読んでくださり、ありがとうございました。
コメント