![見出し画像](https://assets.st-note.com/production/uploads/images/51262312/rectangle_large_type_2_744540df854724507bfda351c778807c.png?width=1200)
初めてのゲーム開発でつまづいたところ1
先日ゲームを開発した。その開発でつまづいたところについて記事にする。
・これからゲームを開発する人
・プログラミングを使ってWebアプリを開発しようとしてる人
の参考になれば幸いだ。
私はエンジニア歴2年目で、普段はシステム開発の仕事をしている。今回開発したゲームは、プログラミング学習サービス「ウェブカツ」の学習のアウトプットとして開発した。プログラミング歴は2年目だが、ゲームの開発については初めてだ。
今回は、初めてゲームを開発したときにつまづいたポイントについて記事にする。
ちなみに、ゲームの開発背景については、下記で記事にした。よかったらこちらものぞいてみてほしい。
初めてのゲーム開発でつまづいたポイント
早速本題だ。下記ポイントでつまづいた。
・ボタン入力時のページ読込直しの改善
・ボタンを連打したときの誤動作の修正
・ページ再読み込み時のエラー
・使う画像のサイズの違いによるレイアウトの崩れ
・読み込み速度の低下
・サウンドON/OFFの切り替え
印象に残ってるものをあげてみた。
各つまづいたポイントについて述べていく。一部専門的な言葉も入ってくるが、この文章にたどり着いた人ならば、きっと理解できるだろう。
ボタン入力時のページ読込直しの改善
開発はPHP言語で行った。「こうげき」「まほう」などのボタンを押すたびに、POST送信され、サーバー処理されページが更新する仕様で開発していた。しかし、ここで問題が発生した。
ボタンを押すたびに、背景が点滅する
のだ。ボタンを押すたびにページをリロードして背景画像の読み込み直しが行われる。読み込み直しのたびに画像が点滅するので、非常に目に悪い。
ゲームの中ではボタンを何度も押すため、そのたびに背景が点滅していては、不快感極まりなかった。目がチカチカして、ストレスになるのだ。
なので、ほぼすべてのボタンを「非同期処理」に変更した。ここからが、長い時間を有する開発の始まりとなったのである。
非同期処理とは、言ってしまえば、ページの読み込み直しすることなく、サーバーの処理を走らせることができるものだ。これにより、いちいち背景画像が読み込み直されることはなくなり、点滅も起こらなくなった。
しかし、非同期処理に変更したことで、PHPのみの処理で済んでいたものを、JavaScriptを用いてブラウザ側での処理を追記する必要が出てきた。何かしらアクションをするたびにJavaScriptさんにお世話になることになる。快適なゲームを作るには、手間がかかることを知る。
ボタンを連打したときの誤動作の修正
ソフトを開発したときに、誤ってボタンを連打することがままある。そのたびにボタンを押したときの処理が連続で流れてしまうと、よきせぬ不具合に見舞われる。
そのため、ボタン連打による誤動作が起こらないように修正を行った。正直、プログラミングを始めたての頃は、正しい使い方で、ボタンを一つ一つ押して動作を確認してOKって感じで流していた。
しかし、実際に使ってもらうものになると、ユーザーがどんな操作をしてしまうか分からない。実際に連打してみると、処理が連続で走って予期せぬ動きをさせてしまっていた。これを防止した。
誰かに遊んでもらおうという緊張感が、そうさせてくれたのは間違いない。自己完結するアプリであるなら、単にボタンを連打しないように使えばいいだけだ。
ボタン連打防止の仕組みとしては変数を一つ用意いて、ボタンを押した瞬間に変数に値を格納。格納されてる間は、ボタン処理が走らないようにしているといった仕組みだ。ボタンを無効化にするCSSをあててみたりといろいろやったが、このやり方がうまくいった。
ボタンの連打防止策。
— しん@エンジニアx夫婦 (@shinshin4n4n) April 26, 2021
ボタンを1回押したら、3秒経たないうちは、ボタンの処理は走りませんよ〜っていう処理。 pic.twitter.com/dzgbkTN3kS
ページ再読み込み時のエラー
これから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);
}
セッション変数が空のときのみ、初期化処理を流した。逆にそうでない場合は、セッションの値を参照したページ全体の読み込むようにした。
セッションというのは実に便利で、前のページの情報をブラウザ上やサーバー上に記憶できる。
ゲーム初期化時点で、セッションにデータを保持しておくことで、再読み込み時にセッションデータを判別し、初期化すべきかどうかの判定をさせた。
これにより、ゲームの途中でブラウザのページが再読込されることがあっても、よきせぬ動作を防ぐことができる。
続きはまた次回にする
ここまで書いてきて思うのが、
実際作ってみないと分からないことがたくさんある
ということだ。何に気をつけたらいいのか。事前に頭に入っているつもりでも、想定外の動きはしてしまう。そのときいかに素早く正確にケアできるかは、経験が大事に思う。
その他の点については、また別の機会に記事にすることにする。
それでは。
いただいたサポートは、夫婦でのクリエイター活動に利用させていただきます。