こんにちは、ともくんのゲーム作り部屋にようこそ！
このページでは、Unityを使った2Dシューティングゲームの作り方の14回目として、これまで作成してきたゲームの書き出し作業を行っていきます。
前回、ボスの作成を行い起動シーンやクリアシーン、また一部のバグ修正を行っていきました。
ゲーム内容としては前回までで完成となり、今回は仕上げとしてUnityでビルドという作業をしてファイルの書き出しやアップロードを行います。
ビルドというのは、簡単に言えばコンピューター上で実行可能なアプリケーションに変換する作業のことで、コンパイルやリンクという作業が自動で行われます。
今回作成しているシューティングゲームは、ブラウザゲームで公開するためにWebGLというもので書き出してアップロードしていくのですが、そのままビルドするとゲーム画面のサイズや操作方法に不具合が生じてしまいました。
そこで、ビルドの実行方法と、実際に生じた不具合の修正、そしてブラウザゲームとしてのアップロード作業についてまとめていきます。
WebGLでのビルドの実行方法
まずは、ここまで作成してきたゲームをビルドして、Webブラウザ上でゲームができるように書き出しを行っていきます。
Webブラウザでゲームをするためには、UnityからWebGLという形式でビルドしていきます。
このWebGLとは、ゲームコンテンツをブラウザで遊べるようにするための技術のことで、パソコンだけでなくモバイルからでもブラウザゲームにアクセスできるようになります。
ビルドする前の基本設定
ビルドする前に、基本的な部分の設定を先に行いたいので、メニューバーの「File」から「Build Profiles」を選択します。
開いた画面内の左側で選択できるプラットフォームに関しては、2Dシューティングゲームの作り方の1回目で紹介しましたが、今回はブラウザゲームとして書き出したいので、「Web」を選択しています。
また、ゲーム内で使いたいシーンが全て含まれているかどうか、「Scene List」の項目を確認しておきます。
次に、画面上部にある「Player Settings」を選択すると、会社名(Company Name)やゲーム名(Product Name)、ゲームのバージョン(Version)などを入力する画面に切り替わります。
ここでは、上記のように入力しています。
また、下の方にある「Web Settings」の中の「Publishing Settings」にある「Compression Format」で、WebGLとしての圧縮形式を「Brotil」「Gzip」「Disabled」から選択することができます。
基本的には「Brotil」か「Gzip」を選択することになりますが、Gzipの方がサポートされているサーバーが多いようなので、ここでは「Gzip」を選択しています。
他にも、細かく色んな設定を行うことができますが、ここでは最低限の部分だけを入力・設定しています。
ビルドの実行方法
ビルドの設定が一通り終わったら、実際にビルドを実行してファイルを書き出していきます。
ビルドを実行する際は、先ほどの「Build Profiles」の画面から「Build And Run」を選択します。
次に、フォルダを選択する画面に移るので、ビルドしたファイルを保存したいフォルダを設定しておきます。
そして、「フォルダの選択」をクリックすると、ビルドが開始されるので少し待ちます。
ビルドが完了すると、自動的にブラウザが開きUnityのロゴが流れた後に、作成したゲームがブラウザで開始されます。
ですが、上記のようにゲーム画面が崩れて表示されてしまい、失敗しているのが分かります。
ゲーム設定の修正を行う
ゲーム画面が崩れてしまったため、ここからはゲーム画面のサイズを修正していきます。
また、ゲーム画面以外にも実はキー操作で一部不具合があったため、同時に修正を行っていきます。
WebGLのキャンパスサイズを変更する
まず、このシューティングゲームは縦長のゲーム画面を想定して作っていますが、ブラウザに表示された画面サイズは横長になってしまっているのが分かります。
これは、WebGLのビルド設定で、画面サイズを設定せずにビルドしてしまっているためです。
もう一度「Build Profiles」の画面を開き「Player Settings」に進み、「WebSettings」の中の「Resolution and Presentation」を選択します。
この中にある「Default Canvas Width」でゲーム画面の横の長さ、「Default Canvas Height」でゲーム画面の縦の長さを設定できるようになっていて、デフォルトだと960×600と横長になっています。
これを縦長サイズに変更するのですが、縦の長さが長すぎるとブラウザでスクロールしないとゲーム画面が全部映らないため、9:16という比率からここでは「270×480」というサイズで設定してみました。
実際にこれでもう一度ビルドしてみると、
ゲーム画面の表示サイズ自体は縦長になりました。
ただし、ゲーム画面内の表示は引き続き崩れています。
UIのCanvasScalerを変更する
ゲーム画面をフルスクリーンに拡大してみると分かりますが、崩れているのはゲームオブジェクトの配置ではなく、UIの要素であるということが分かります。
そこで、UIオブジェクト(Canvasオブジェクト)に紐づいているCanvasScalerコンポーネントの設定を変更していきます。
このCanvasScalerコンポーネントは、UI要素のサイズを一括して大きくしたり小さくすることができるもので、ゲーム画面のサイズの大きさなどによって調節することができます。
デフォルトでは、ゲーム画面のサイズとは関係ない大きさ設定となっているため、CanvasScalerコンポーネントの中にある「UI Scale Mode」の項目で「Scale With Screen Size」に変更して、「Reference Resolution」の項目にゲーム画面のキャンバスサイズに設定した「270×480」を設定してあげます。
このReference Resolutionは、UIの基準となるサイズのことを表していて、ここで指定した画面サイズの時のUIの大きさをエディター上で設定することになります。
また、ブラウザゲームではフルスクリーンモードなどで表示画面を大きくすることができるので、「Screen Match Mode」の項目を「Expand」にしておくことで、画面サイズが大きくなった際はUI要素を同じ比率で自動的に拡大することができるので、フルスクリーンでもUIが崩れないようになります。
なお、CanvasScalerを変更したら、Unityのエディタ上でUI要素の表示が以下のように大きく崩れるので、UIの大きさをシーン毎にそれぞれ修正しておきます。
修正後に再度ビルドしてみると、
ゲーム内の表示崩れを直すことができました。
カメラの背景色を指定しておく
表示崩れは直りましたが、ゲーム画面をフルスクリーンにしてみると、ゲーム自体は縦長に表示されていますが、それ以外の部分が青色の背景になっているのが分かります。
この青色の部分は、オブジェクトなどが何も配置されていないため、カメラで設定している背景が表示されてしまっています。
今回はこの背景の色を青から白色に変更しておきます。
カメラオブジェクトを選択して、インスペクターウィンドウからCameraコンポーネントの中にある「Environment」の「Background」の項目に、白色を選択しておきます。
なお、先ほどのUIの調整と同じく、全てのシーンのカメラオブジェクトの背景に設定しておきます。
修正できたら再度ビルドしてみると、
フルスクリーンにした際の背景が、白色に変わりました。
キー操作を修正する
WebGLをビルドして実際にブラウザ上でゲームをプレイして気づいたのですが、プレイヤーを操作するWASDキーの操作で不具合が発生していました。
現象としては、キーを押して操作していた後、たまにキーを離しているにもかかわらず、勝手に押されていると判定されてしまい、自動的に移動してしまうという事象です。
Unity上では発生していなかったので、原因はよく分かりませんが、プレイヤーのキー操作はゲーム内で支障をきたすことになりそうなので、キー操作のスクリプトを修正しておきます。
現状のプレイヤーのキー操作は、PlayerControllerというスクリプトで以下のように14行目から29行目で、WASDキーに合わせてGetKeyメソッドを使って移動操作を作っています。
using UnityEngine;
public class PlayerController : MonoBehaviour
{
float playerSpeed = 0.05f;
// 省略 //
void Update()
{
// 省略 //
if (Input.GetKey(KeyCode.W) && transform.position.y < 4.4f)
{
transform.Translate(0, playerSpeed, 0);
}
if (Input.GetKey(KeyCode.S) && transform.position.y > -4.4f)
{
transform.Translate(0, -playerSpeed, 0);
}
if (Input.GetKey(KeyCode.A) && transform.position.x > -2.0f)
{
transform.Translate(-playerSpeed, 0, 0);
}
if (Input.GetKey(KeyCode.D) && transform.position.x < 2.0f)
{
transform.Translate(playerSpeed, 0, 0);
}
// 省略 //
}
}このスクリプトに、上下の移動を表す「upMove」と、左右の移動を表す「rightMove」という変数を制御文に加えて、以下のように修正しています。
using UnityEngine;
public class PlayerController : MonoBehaviour
{
float playerSpeed = 0.05f;
int upMove; // 上下の移動を判定する変数
int rightMove; // 左右の移動を判定する変数
// 省略 //
void Update()
{
// 省略 //
// 上下の移動をキー操作から判定
if (Input.GetKeyDown(KeyCode.W))
{
upMove = 1;
}
else if (Input.GetKeyDown(KeyCode.S))
{
upMove = -1;
}
// 左右の移動をキー操作から判定
if (Input.GetKeyDown(KeyCode.D))
{
rightMove = 1;
}
else if (Input.GetKeyDown(KeyCode.A))
{
rightMove = -1;
}
// 条件を追加
if (Input.GetKey(KeyCode.W) && transform.position.y < 4.4f && upMove == 1)
{
transform.Translate(0, playerSpeed, 0);
}
if (Input.GetKey(KeyCode.S) && transform.position.y > -4.4f && upMove == -1)
{
transform.Translate(0, -playerSpeed, 0);
}
if (Input.GetKey(KeyCode.A) && transform.position.x > -2.0f && rightMove == -1)
{
transform.Translate(-playerSpeed, 0, 0);
}
if (Input.GetKey(KeyCode.D) && transform.position.x < 2.0f && rightMove == 1)
{
transform.Translate(playerSpeed, 0, 0);
}
}
// 省略 //
}16行目から34行目でGetKeyDownメソッドを使って、それぞれのキーを押した際にupMoveとrightMoveの変数の値が代入されるようにしています。
そして、その変数の値が一致している時にだけ、プレイヤーの移動処理が行われるように、37行目から52行目の制御文を変更しています。
このように記述しておくことで、例えばWキーが押され続けてしまいプレイヤーが前方に進み続けている現象が発生しても、後方に進むSキーを押した瞬間にupMoveの変数の値が変わり、前に進む処理が止まるようになります。
不具合の根本を解決しているわけでは無いですが、これで現象が発生してもゲーム操作上はそこまで気にならないかと思います。
ビルドしたファイルをアップロードする
ゲーム画面のサイズや不具合の修正が完了したので、もう一度ビルドを実行し、最後にファイルをサイトにアップロードして、ゲームをサイト内から遊べるようにしていきます。
サーバーへのアップロード作業
WebGLでビルドを実行すると、指定したフォルダ内に、以下のように「index.html」のファイルと、「Build」と「TemplateData」という2つのフォルダが作られます。
サーバーにこれらのファイルとフォルダを全てアップロードしてindex.htmlにアクセスすることで、ブラウザゲームとして遊ぶことができるようになります。
ここでは、このブログ内(ともくんのゲーム作り部屋)にゲームをアップロードしていきます。
アップロード方法は、サーバーや環境によって異なりますが、僕はFFFTPというFTPソフトを使って上記のファイルを以下のようにアップロードしました。
ちなみに、当ブログはワードプレスで運営しているので、ワードプレスの中にある「/wp-content/uploads/」にフォルダを作ってアップロードをしています。
なお、ここではそのままアップロードしていますが、「Build」フォルダに関しては、そのままだと他の人がダウンロードしたり使用したりすることができるようになってしまうため、実際は別ドメインなどを使ってアクセス制限をかけた仕組みを作る必要があります。
.htaccessの修正
サーバーにファイルをアップロードできたら、URLを入れて確認してみますが、以下のようにエラーが発生してゲームを開始することができません。
これは、ビルドの圧縮形式を今回Gzipにしましたが、この際に「.gz」という拡張子のファイルが使われているのですが、そのままだとこの拡張子のファイルをGzip形式として認識することができずにエラーが発生しています。
そこで、サーバーの.htaccessを編集して、.gzの拡張子のファイル形式を正確に読み込むことができるようにしておきます。
<IfModule mod_mime.c>
AddEncoding gzip .gz
AddType application/javascript .js.gz
AddType application/wasm .wasm.gz
AddType application/octet-stream .data.gz
</IfModule>
<IfModule mod_headers.c>
<FilesMatch "\.js\.gz$">
Header set Content-Type application/javascript
Header set Content-Encoding gzip
Header set Cache-Control "public, max-age=31536000"
</FilesMatch>
<FilesMatch "\.wasm\.gz$">
Header set Content-Type application/wasm
Header set Content-Encoding gzip
Header set Cache-Control "public, max-age=31536000"
</FilesMatch>
<FilesMatch "\.data\.gz$">
Header set Content-Type application/octet-stream
Header set Content-Encoding gzip
Header set Cache-Control "public, max-age=31536000"
</FilesMatch>
</IfModule>上記のコードをサーバーの.htaccess内に追加して設定してみたところ、エラーが解消されてゲームを開始することができました。
なお、.htaccessの編集はサーバーによって異なりますので、使用しているサーバーのヘルプページなどを確認しておきましょう。
iframeタグを使って埋め込み
アップロードしたURLのままでも良いのですが、せっかくなのでブログ内にゲームを埋め込みできるようにします。
ブログ記事などに埋め込む際は、iframeタグを使ってアップロードしたURLを埋め込む設定をしてあげる必要があります。
ここでは、以下のようなHTMLコードを作成しています。
<div class="game-container">
<iframe src="https://tomokun-games.com/wp-content/uploads/webgl/unity/2d-shooting/" width="280" height="570">
</iframe>
</div>srcの後ろのURLに先ほどアップロードしたURLを指定して、widthで横幅、heightで縦幅を指定します。
これをワードプレスの「カスタムHTML」というブロック内に貼り付けてあげることで、ブログ内に埋め込んで表示させることができます。
また、真ん中にセンタリングされるように、ページ内で以下のようにCSSを指定しておきます。
.game-container {
text-align: center;
}そして、実際に埋め込んだものが以下となります。
ブログ内で作成したゲームを表示させることができ、プレイすることができています。
今回は、特に大きな変更を加えていませんが、ゲーム画面の細かい設定も色々とできるようになっているので、興味ある方は変更してみましょう。
まとめ
このページでは、Unityでブラウザゲームをビルドして、サーバーにアップロードするまでを紹介していきました。
Unityでビルドを実行してみると、画面サイズが想定していないようなことになることも多いので、設定を何度も確認してみましょう。
なお、2Dシューティングゲームの作り方は、今回の14回目で最後となります。
実際に僕自身が、Unityで初めて作ったゲームなので、ミニゲームっぽい感じではありますが、少しでも参考になれていたら幸いです。
また、これまでの2Dシューティングゲームの作り方の記事は以下のページでまとめていますので、良かったら見てみてください。
最後までお読みいただきまして、ありがとうございました！
コメント