0から2Dアクションバトルゲームを作ろう!⑧ビルドをしてゲームを遊んでみよう

0からアクションゲームを作ろう講座その8です。
今回は、ゲームを実際にビルドしてWebブラウザで遊んでみましょう!

この章でやること

ビルドの機能を学び、ここまで作成してきたタイトル画面とゲーム画面をスクリプトで行き来できるようにします。
その次にビルドを行い、このゲームをWebブラウザ上で遊べるようにしてみましょう。

ビルドとは

Unityでプロジェクトのビルドを行うと、そのゲームを外部で実行できるようになります。
その際ビルド設定でプラットフォームを選択します。プラットフォームによってどの形式でゲームを実行できるかが決まります。

選択できるプラットフォームには例として以下のようなものがあります。モジュールのインストールが必要な場合もあります。

  • PC, Mac & Linux Standalone
    PCで実行するソフトウェアの形式です。Windows、Mac、Linuxに対応しています。
  • iOS
    iPhoneなどのiOS環境で実行できるアプリ形式です。
  • Android
    AndroidOS環境で実行できるアプリ形式です。
  • WebGL
    Webブラウザ上で実行できる形式です。FlashPlayer等は不要です。

 

この講座のサンプルゲームはWebGLでビルドをしています。なのでブラウザで遊ぶ事が出来ていました。
ここからもWebGLでビルドをする解説を行っていきます。(今回は紹介しませんが、WebGLでビルドしたゲームを公開できるunityroomというサイトもあります)

 

タイトル画面からゲーム画面に切り替える処理

前章で未完だったシーン間の遷移は、まずビルド設定に2つのシーンを組み込む作業から始まります。

ビルドの実行には「ビルドされるシーン」の登録が必要です。
これにシーンを登録するとシーンごとにIDが割り振られます。ここで初めてシーン間の移動をスクリプトで行えるようになります。

Build Settingsでの設定

それではビルド対象のシーンを登録していきます。
ビルドに関する設定は「Build Settings」から行えますので、まずはこれを開いてみましょう。
メニューバー[File]→[Build Settings…]から立ち上がります。

開いたウィンドウの中の[Scenes In Build]の下にビルド対象シーンが並んで表示されます。
現在はSampleScene(バトル画面)のみが登録されているので、タイトル画面のシーンも登録する必要がありますね。

まず現在Unityで編集中のシーンがTitleSceneである事を確認してください。(違っている場合はメニューバー[File]→[Open Scene]から選択して開けます。)
確認したら、Build Settingsウィンドウの[Add Open Scenes]ボタンを押下します。
これでリストが更新されて、タイトル画面シーンもビルドの対象に含まれるようになりました。

もう一つ設定が必要です。それはシーンの順番です。
シーンはビルドされる順番に0からIDが振られます。

現在シーンに振られているIDはバトル画面が0、タイトル画面が1となっています。
ビルドされたゲームは起動すると0番に設定されたシーンを最初に開くので、このままではバトル画面が最初に立ち上がりますね。
タイトル画面を最初に開いて欲しいので、順番を入れ替える必要があります。

Scenes In Buildのリストでシーン名をドラッグすると、他のシーンと順番を入れ替える事が出来ます。
今回の場合では「Scenes/TitleScene」の行を上にドラッグしましょう。

ここまで出来たら、ビルド設定は一旦置いておいてシーン間遷移の実装に移りましょう。

タイトル管理スクリプトでの処理

ここからタイトル管理スクリプトに、「ボタン入力を受けとったらバトル画面へシーン遷移する」処理を書き加えていきます。
スクリプト本体は前章の小項目で作成したものなので、これを行わなかった方は「TitleManager」というオブジェクトとスクリプトを作成し、オブジェクトにスクリプトをアタッチしてください。
もう作成してある方はそこに新しいメソッドを追加します。

TitleManager.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement; // Scene機能の利用に必要なusing文

// タイトル管理スクリプト
public class TitleManager : MonoBehaviour {

	(メンバ変数宣言~Update()まで省略)

	// SampleScene(バトル画面)へのシーン遷移を行うメソッド
	// ボタンUIの入力時に呼び出される
	public void TransitionScene ()
	{
		// SampleSceneをロードする
		SceneManager.LoadScene ("SampleScene");
	}
}

Sceneに関する処理を行う時は「using UnityEngine.SceneManagement;」というusing文が必要になります。

SceneManager.LoadScene()メソッドの引数に行先シーン名、もしくはシーンのIDを渡せばすぐにシーン遷移が行われます。

ボタン押下時にメソッドを呼び出す

シーン遷移を行うメソッドが完成しました。
後はこれをタイトル画面のスタートボタン押下時に呼び出させるだけでOKですね。

Unityの編集画面に戻り、ButtonオブジェクトのButtonコンポーネントを確認してください。
最下部に[On Click()]というパラメータがありますが、ここに他コンポーネントのメソッドを指定すると、ボタン押下時にそのメソッドを呼び出してくれるようになります。(メソッドはpublicである必要があります。)
ここでは先ほどのTransitionScene()メソッドを呼び出せば良いですね。

まず最初はOnClick()パラメータに選択欄がありませんので、右下の+マークをクリックし呼び出しメソッドの数を1増やします。

メソッドの指定には「どのオブジェクトの」「どのコンポーネントの」「どのメソッドか」という3つの選択が必要です。それぞれ順番に行いましょう。
枠の左下にある欄でオブジェクトを選択します。TitleManagerオブジェクトをこの欄にドラッグアンドドロップするのが一番簡単です。

すると右上欄(画像の[No Function]という箇所)が選択可能になるので、これをクリックし[TitleManager]→[TransitionScene()]を選択してください。
これでボタン押下時にメソッドを呼び出す設定が完了しました。テストプレイで確認してみましょう。

タイトル画面に戻ってくる処理

引き続き、今度はバトル画面からタイトル画面に戻ってくるプロセスを用意しましょう。
プレイヤーかボスのどちらかが消滅した後、数秒が経過したら自動的にタイトル画面に戻るようにしてみます。
こうする事によって、いちいちゲームを再起動せずとも何度もバトルを行えるようになります。

バトル画面の編集ですので、SampleScene(バトル画面シーン)を開きましょう。
そしてゲームの進行管理をしているGameManagerスクリプトを編集します。(GamaManagerスクリプトのみアイコンが通常のスクリプトとは異なるので注意してください)

GameManager.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI; // UI機能の利用に必要なusing文
using UnityEngine.SceneManagement; // Scene機能の利用に必要なusing文

// ゲーム管理スクリプト
public class GameManager : MonoBehaviour {

	// メンバ変数宣言
	public Text text_BossHealth;    // テキスト(ボス残り体力表示用)
	public GameObject imageObj_Health_1; // プレイヤー残り体力1を示すUI
	public GameObject imageObj_Health_2; // プレイヤー残り体力2を示すUI
	public GameObject imageObj_Health_3; // プレイヤー残り体力3を示すUI

	public GameObject playerObj;		// プレイヤーオブジェクト
	public GameObject bossObj;			// ボスオブジェクト
	private bool afterFinish;			// 戦闘が終了しているかのフラグ
	private float afterFinishTime;      // 戦闘終了後の経過時間(秒)

	// 毎フレーム呼び出されるメソッド
	void Update ()
	{
		//-----戦闘終了後処理-----
		if (!afterFinish)
		{ // 戦闘が終了していなければ
			if (playerObj == null || bossObj == null)
			{ // プレイヤーかボスどちかが消滅していたら
			  // 戦闘終了のフラグを立てる
				afterFinish = true;
				afterFinishTime = 0.0f;
			}
		}
		else
		{ // 戦闘が終了していたら
		  // 経過時間をカウント
			afterFinishTime += Time.deltaTime;
			if (afterFinishTime > 2.0f)
			{ // 戦闘終了から2秒が経過したら
			  // タイトル画面に遷移
				SceneManager.LoadScene ("TitleScene");
			}
		}
	}

	// プレイヤーの残り体力をUIに適用(PlayerControllerから呼び出される)
	// 引数health : 残り体力
	public void SetPlayerHealthUI (int health)
	{
		(省略)
	}

	// ボスの残り体力をUIに適用(BossControllerから呼び出される)
	public void SetBossHealthUI (int health)
	{
		text_BossHealth.text = "ボス体力 : " + health.ToString ();
	}
}

Update()メソッド内でプレイヤ・ボスオブジェクトの生存を毎フレーム確認しています。
コンポーネントでのオブジェクトの指定は忘れずに行ってください。

これでタイトル画面とバトル画面は行き来できるようになりました。
この後ビルドを行いますので、もう一度動作確認を行い問題がないかと見ておきましょう。

GIF動画だとわかりにくいですが、このように画面遷移が行えていればOKです!

ビルドして遊ぼう

ゲームの仕上げも一通り完了しました。
次はいよいよゲームをブラウザ上で遊べるようにビルドしてみましょう。

プラットフォームの指定

章の冒頭でも解説したように、今回はWebGLによるビルドを行います。
まずは先ほどと同様に、Build Settingsウィンドウを開きましょう。

左下にプラットフォームを指定できる欄があります。
そこでWebGLを選択し、更に下にある[Switch Platform]ボタンを押すとプラットフォームの変更が適用されます。
ただし、WebGLのモジュールがインストールされていない場合は選択できません。


その場合は右側にある「Open Download Page」ボタンを押し、モジュールをダウンロードする必要があります。

ダウンロードしたファイルを実行し、完了すると無事プラットフォームの切り替えができます。

*なお、WebGLモジュールダウンロードしたファイルを開くと下のような画面になります。

基本的には順番通りにクリックしていくだけです。

いくつかの画面を経た後に上ような画面になるのでインストールを選択しましょう。なお、保存先によってはインストトールエラーが起こる場合があります。どうしても解消できない場合には、UnityHubからコンポーネントとして追加するという方法もあります。

Player Settingsの変更

最後に行う準備としてPlayer Settingsという設定があります。
SwitchPlatformボタンの隣にある[Player Settings…]というボタンを押すと設定画面がインスペクターウィンドウに現れます。

ここでは指定したプラットフォームによるビルド時の詳細設定ができます。
プラットフォームによって設定項目に差異はありますが、主にゲーム画面の解像度や起動時のスプラッシュスクリーン、動作時の環境設定等が出来ます。
今回確認するのは解像度です。ここまで960×600の解像度でテストプレイを行ってきたので、ビルドする時もこのサイズで行って欲しいですね。
[Resolution and Presentation]タブをクリックして展開し、横幅と縦幅を入力しましょう。

Build and Runでテストプレイ

長かった準備もついに終わります。いよいよブラウザ上でこれを遊んでみましょう。
Build Settingsの画面に戻り[Build And Run]ボタンをクリックすると、ビルドと起動を続けて行ってくれます。

ボタン押下時フォルダの選択ダイアログが立ち上がりますが、ここで選択したフォルダにゲームのデータファイルが作成されます。

データファイルは本来、それをサーバーにアップロードしないとブラウザで遊ぶ事はできません。
しかしBuildAndRunならそのままブラウザが立ち上がり、ゲームが起動されます。

お使いのブラウザにもよりますが、このようにブラウザ上でゲームが起動します。

フォントについて

早速ブラウザでこのゲームを遊ぶと「あれ?」と思う箇所が一点あると思います。
ボスの体力を表示するUIが少々おかしい事になっていますね。

これは現在テキストUIで使用しているフォントが、本来は日本語に対応していない為に起こった不具合です。
対処法は2つであり、別の日本語に対応したフォントに切り替えるか文字列を変更するかです。

フォントの追加の場合、まずはプロジェクトウィンドウにフォントファイルをインポートする必要があります。
それをTextコンポーネントの[Font]パラメータまでドラッグアンドドロップすると変更が完了します。フリーフォントの掲載サイトやUnityでの変更方法はこちらで解説しています。

ただしボスのHP表示は応用編にてゲージ形式に変更する為、この状態で他の人に見せたい等が無ければ気にしなくても良いでしょう。

ここまで作ってきたゲームを振り返ろう

ゲームがついにUnity外でも遊べるようになり、ようやくこのゲームは一区切りがついた形になります。
ここまで覚える事が多くて大変だったかもしれませんが、こうして遊べる形にまで持ってこれると達成感を覚えられる事でしょう。
この講座で学んできた事は数あるゲーム開発の手法のうちの1つです。アクションバトルだけでなく、他のジャンルでの開発にも挑戦してみるとより理解が深まるかと思います。

しかし折角ここまで開発してきたゲームですので、ここで終わりにはせずもう少し「楽しめる」ゲームを目指してみませんか?
ここから講座は応用編に入り、ゲームにプラスアルファを追加していく作業と、それに伴う新たな重要テクニックを学んでいきます。

楽しめるゲームにする為には

まずは今この状態のゲームがゲームとして楽しいかを考えてみましょう。
多くの方はまだ「楽しくない」と感じるかと思います。そもそも要素が少なすぎて、楽しめる以前の問題かもしれません。

実際今のままではアッサリしすぎており、ボスの攻撃は激しいとはいえゲーム開始直後にショット連発をすればそれで終わってしまいます。
またバリアが強力すぎるのもあり難易度がとても低いです。

そして、難易度以外でも遊び心地が悪いです。
タイトル画面でGameStartを押すとすぐに戦闘が始まり、どちらかが倒れるとすぐにタイトルへ戻っていきます。
もう少しユーザーを考えた設計にしていく必要があると思います。

ゲームを楽しくしていくプロセスは無数にありますが、その内の1つは「今のゲームのどこが悪いのかを考える」事です。その問題点を1つ1つ洗い出し、それを改善していく事で品質を上げていくというのもとても大事な事です。

次章からは新しい要素を沢山実装しますが、全て「こうあったら良い」という発想の元に追加していくものとなります。

フォルダ構成を整える

新たな仕様の開発に移る前に、今一度プロジェクトウィンドウを見直してみます。
インポートしたテクスチャや作成したスクリプト等がゴチャゴチャと入れ混じっていて、このまま開発を続けるとどのファイルがどこにあるかが分からなくなってしまいます。

これを整理する為、ファイルの整理の整理を行っていきましょう。
プロジェクトウィンドウで右クリック→[Create]→[Folder]を選択するとフォルダを作成する事が出来ます。
フォルダをいくつか作成し、現在あるAsset達を種類によって分類してみましょう。

今回作成および分類に使用したフォルダの名前です。
このフォルダ名は一般的に使われやすいものですが、今回は自分が分かれば何でも良いでしょう。

  • Scenesフォルダ
    Sceneを格納するフォルダです。最初から存在していました。
  • Scriptsフォルダ
    作成したスクリプトを格納します。
    以降のAssetも、開発規模が大きくなったら更に機能で分類する事をおすすめします。
  • Prefabsフォルダ
    作成したプレハブを格納します。
  • Texturesフォルダ
    インポートしたテクスチャを格納します。
  • Audiosフォルダ
    インポートしたBGM・効果音データを格納します。
    応用編で使用する為、現在は空になります。

次章以降で学ぶこと

9章と10章では応用編として、今のゲームをアレンジしていく方向で様々な追加要素を実現していきます。
講座としてはやや難しい部分にまで踏み込んでいく場合もあり、スクリプトやUnity上での細かい操作等は時によって説明を省略します。
よってここまでの基礎を理解されている事を前提としていますので、作ってきたスクリプトやオブジェクトの設定等はもう一度振り返っておくと良いでしょう。

 

<前回>  <=  「⑦ゲームに要素を追加していこう

<次回>  =>  「⑨アレンジ編:ゲームの完成度を高めよう(前半)