見出し画像

初めてのゲーム開発でつまづいたところ１

しん@YouTube

先日ゲームを開発した。その開発でつまづいたところについて記事にする。

・これからゲームを開発する人
・プログラミングを使ってWebアプリを開発しようとしてる人

の参考になれば幸いだ。

私はエンジニア歴2年目で、普段はシステム開発の仕事をしている。今回開発したゲームは、プログラミング学習サービス「ウェブカツ」の学習のアウトプットとして開発した。プログラミング歴は2年目だが、ゲームの開発については初めてだ。

今回は、初めてゲームを開発したときにつまづいたポイントについて記事にする。

ちなみに、ゲームの開発背景については、下記で記事にした。よかったらこちらものぞいてみてほしい。

初めてのゲーム開発でつまづいたポイント

早速本題だ。下記ポイントでつまづいた。

・ボタン入力時のページ読込直しの改善
・ボタンを連打したときの誤動作の修正
・ページ再読み込み時のエラー
・使う画像のサイズの違いによるレイアウトの崩れ
・読み込み速度の低下
・サウンドON/OFFの切り替え

印象に残ってるものをあげてみた。

各つまづいたポイントについて述べていく。一部専門的な言葉も入ってくるが、この文章にたどり着いた人ならば、きっと理解できるだろう。

ボタン入力時のページ読込直しの改善

開発はPHP言語で行った。「こうげき」「まほう」などのボタンを押すたびに、POST送信され、サーバー処理されページが更新する仕様で開発していた。しかし、ここで問題が発生した。

ボタンを押すたびに、背景が点滅する

のだ。ボタンを押すたびにページをリロードして背景画像の読み込み直しが行われる。読み込み直しのたびに画像が点滅するので、非常に目に悪い。

ゲームの中ではボタンを何度も押すため、そのたびに背景が点滅していては、不快感極まりなかった。目がチカチカして、ストレスになるのだ。

なので、ほぼすべてのボタンを「非同期処理」に変更した。ここからが、長い時間を有する開発の始まりとなったのである。

非同期処理とは、言ってしまえば、ページの読み込み直しすることなく、サーバーの処理を走らせることができるものだ。これにより、いちいち背景画像が読み込み直されることはなくなり、点滅も起こらなくなった。

しかし、非同期処理に変更したことで、PHPのみの処理で済んでいたものを、JavaScriptを用いてブラウザ側での処理を追記する必要が出てきた。何かしらアクションをするたびにJavaScriptさんにお世話になることになる。快適なゲームを作るには、手間がかかることを知る。

ボタンを連打したときの誤動作の修正

ソフトを開発したときに、誤ってボタンを連打することがままある。そのたびにボタンを押したときの処理が連続で流れてしまうと、よきせぬ不具合に見舞われる。

そのため、ボタン連打による誤動作が起こらないように修正を行った。正直、プログラミングを始めたての頃は、正しい使い方で、ボタンを一つ一つ押して動作を確認してOKって感じで流していた。

しかし、実際に使ってもらうものになると、ユーザーがどんな操作をしてしまうか分からない。実際に連打してみると、処理が連続で走って予期せぬ動きをさせてしまっていた。これを防止した。

誰かに遊んでもらおうという緊張感が、そうさせてくれたのは間違いない。自己完結するアプリであるなら、単にボタンを連打しないように使えばいいだけだ。

ボタン連打防止の仕組みとしては変数を一つ用意いて、ボタンを押した瞬間に変数に値を格納。格納されてる間は、ボタン処理が走らないようにしているといった仕組みだ。ボタンを無効化にするCSSをあててみたりといろいろやったが、このやり方がうまくいった。

ページ再読み込み時のエラー

これからWebアプリを開発する人にとっては、ページ再読み込み時のケアは不可欠に思う。

というのも、ページを再読込すると、同じものが何度も読み込まれたり、急に初期化されたりなど、思わぬ動作を起こしうるからだ。

私は、ゲーム内の操作を非同期通信化したことで、この問題にぶちあたった。再読込すると、データが初期化されてしまう。

初期化処理は、ゲーム開始時点で行う処理だった。その部分の処理を再読み込み時に走らせないような処置を施した。具体的には下記である。

if($startFlg && empty($_SESSION)){

       if(!empty($_POST['hero'])){
         $mode = GAME_MODE::HERO;
       }else if(!empty($_POST['magician'])){
         $mode = GAME_MODE::MAGICIAN;
       }
       $_SESSION['mode'] = $mode;
       $_SESSION['soundON'] = $audioFlg;
     init($mode);
   }

セッション変数が空のときのみ、初期化処理を流した。逆にそうでない場合は、セッションの値を参照したページ全体の読み込むようにした。

セッションというのは実に便利で、前のページの情報をブラウザ上やサーバー上に記憶できる。

ゲーム初期化時点で、セッションにデータを保持しておくことで、再読み込み時にセッションデータを判別し、初期化すべきかどうかの判定をさせた。

これにより、ゲームの途中でブラウザのページが再読込されることがあっても、よきせぬ動作を防ぐことができる。

続きはまた次回にする

ここまで書いてきて思うのが、

実際作ってみないと分からないことがたくさんある

ということだ。何に気をつけたらいいのか。事前に頭に入っているつもりでも、想定外の動きはしてしまう。そのときいかに素早く正確にケアできるかは、経験が大事に思う。

その他の点については、また別の機会に記事にすることにする。

それでは。

いただいたサポートは、夫婦でのクリエイター活動に利用させていただきます。