初めてのゲーム開発でつまづいたところ2
先日ゲームを開発した。その開発でつまづいたところについて記事にする。
・これからゲームを開発する人
・プログラミングを使ってWebアプリを開発しようとしてる人
の参考になれば幸いだ。
この記事は、下記記事の続きになる。先に読んでもらいたい。
私はエンジニア歴2年目で、普段はシステム開発の仕事をしている。今回開発したゲームは、プログラミング学習サービス「ウェブカツ」の学習のアウトプットとして開発した。プログラミング歴は2年目だが、ゲームの開発については初めてだ。
今回は、初めてゲームを開発したときにつまづいたポイントについて記事にする。
初めてのゲーム開発でつまづいたポイント2
早速本題だ。下記ポイントでつまづいた。
・ボタン入力時のページ読込直しの改善
・ボタンを連打したときの誤動作の修正
・ページ再読み込み時のエラー
・使う画像のサイズの違いによるレイアウトの崩れ
・読み込み速度の低下
・サウンドON/OFFの切り替え
使う画像のサイズの違いによるレイアウトの崩れ
当ゲームには、キャラクターの画像にフリー素材を使用した。当然ながら、画像のサイズは異なっている。
特に、敵キャラクターの画像の縦サイズをそろえることは必須だった。ページの構成上、縦の長さが統一されていないと、敵キャラの画像領域が、敵キャラが変わるたびに変更されてしまう。
通常敵キャラ
また、地味にこだわっているが、主人公である「ゆうしゃ」「まどうし」の２キャラの画像の縦横比を揃える加工をしている。これは、トップ画面で、画像が２つ並びになったときに、キレイに配置されるためである。
さらに、中ボス画像では、通常敵キャラクターのサイズよりも画像サイズを大きく表現したいという思いがあった。ボスだということを分かりやすく表現し、プレイヤーにわくわく感を与えるためだ。
表現には、
・通常敵キャラクター画像の透過（visibility:hidden;）
・main要素のbackgroundに画像URLを指定
することで実現した。
中ボス画像
中ボスは中ボスで、別途画像サイズの調整を行ったりもしている。
読み込み速度の低下
ページを読み込む速度が、軽快でないと、ゲームは面白くない。今回は、敵キャラによって画像の読み込み速度が違うことに気づいた。
これに気づいたのは、実際にサーバー上のドメインに開発ファイルを配置してプレイしてみたときだ。ローカルでの開発環境では気づけなかったが、明らかに画像の読み込み速度が違うのを感じた。
そこで敵キャラ画像のファイルを圧縮し、軽量化を行った。（容量が1Mを超えるものを圧縮した）
実際に公開しようとしてなかったら気づけなかったポイントだ。
サウンドON/OFFの切り替え
面白いゲームには、音楽が付き物だという考えは、開発当初からあった。
しかし、Webページを読み込んだ際に、急に音楽が出るのは、ユーザーを不快にさせてしまうらしい。なので、ほとんどのサイトで、サウンドのON/OFFの切り替えを行えるようにしている。
私が詰まったのは、実は、このサウンド機能のON/OFFの切り替え機能の実装を開発の終盤に持ってきたためである。
音楽を鳴らす部分を、jsファイルの各所に書いた状態だった。すべての音声ファイル読み込み箇所に条件分岐を書くのも煩わしかった。
しかも、jsファイルでは、指定した要素がない場合、エラーを吐いてしまい、以降の処理が行われなくなる状態に見舞われていた。
そこで、結局、以下のような対応をした。
サウンドON/OFFをポスト送信した結果に応じて、音声ファイルのパスの指定を切り替えたのだ。
<audio id="push-sound" src="<?php if($_SESSION['soundON']) echo 'audio/push_sound.mp3' ;?>" pause="pause"></audio>
<audio id="escape-sound" src="<?php if($_SESSION['soundON']) echo 'audio/escape.mp3' ;?>" pause="pause"></audio>
<audio src="<?php if($_SESSION['soundON']) echo 'audio/attack.mp3' ;?>" id="attack-audio" pause="pause"></audio>
<audio src="<?php if($_SESSION['soundON']) echo 'audio/heal.mp3' ;?>" id="heal-audio" pause="pause"></audio>
<audio src="<?php if($_SESSION['soundON']) echo 'audio/powerup.mp3' ;?>" id="powerup-audio" pause="pause"></audio>
<audio src="<?php if($_SESSION['soundON']) echo 'audio/magic_attack.mp3' ;?>" id="magic-audio" pause="pause"></audio>
<audio src="<?php if($_SESSION['soundON']) echo 'audio/magic_elevator.mp3' ;?>" id="randam-magic-audio" pause="pause"></audio>
<audio src="<?php if($_SESSION['soundON']) echo 'audio/enemy_attack.mp3' ;?>" id="enemy-attack-audio" pause="pause"></audio>「『もっとベストな書き方がありそう』とは思いつつも、とりあえずはこれで動いてるので、よしとする」姿勢でここは乗り切ることにした。
学びがたくさんあった。
今回は、プログラミング学習サービス「ウェブカツ」でのアウトプットをきっかけに開発した。オブジェクト指向を用いれば、簡単にキャラクターを追加したり、技を追加することを身を以て体感できた。
それに加えて、今回は、「面白いゲームを作る」ために必要なことを自分で調査し、その必要なことを実現しようとした次第だ。
実際に、未知の課題に対して対応し、実現した経験というのは、今後の糧になると信じている。
ちなみにですが、ゲームはここから遊べます。Chromeブラウザ推奨（スマホ非対応）
それでは。
いただいたサポートは、夫婦でのクリエイター活動に利用させていただきます。