アプリ制作⑦アプリ制作ワークフロー
このレッスンでは、ここまでに学んできたことを使って、簡単なアプリを制作してみたいと思います。簡単なアプリを作ってみることで、アプリ制作全体のワークフローを把握ことができますよ。それでは早速、制作に取りかかりましょう。
例として考えるのは、目の前に並んだ３つの箱をクリックすると、箱が消えて動物が現れるというものです。今回は3Dアプリとして進めていきますが、同様のスクリプトを使って2Dのアプリを作ることも可能です。
素材の準備
必要な素材の確認
まず最初に、必要な素材を集めます。このアプリを構成するパーツには、３つの箱と３つの動物が必要です。箱は簡単にUnityエディター内で作ることができるので、ここで必要なのは３つの動物ということになります。それから、箱が消えるときの効果音の音声ファイルも１つ用意しておくことにしましょう。
素材のダウンロード
もちろん動物の3DモデルはBlenderなどの3D制作ソフトで手作りしても良いのですが、今回はアプリを制作することが目的なので、Sketchfabというサイトからダウンロードすることにします。このサイトには無料のもの有料のもの両方含めて幅広い素材がありますので、うまく活用してください。
音声ファイルも同様にフリー素材を利用します。フリー素材のサイトなどからお好きなものをダウンロードしてください。
シーンの準備
素材をインポートする
Unityエディターのプロジェクトウィンドウのアセットフォルダーの中に、右クリックで新しいフォルダーを作成します。このフォルダーの名前は「Resource（素材）」としておきます。ここに先ほどダウンロードしたモデルと音声ファイルをドラッグ＆ドロップでインポートしてください。
箱を作成する
続いて動物を入れる箱を作成します。これはUnityエディターの中で作ることにします。ゲームオブジェクトタブからキューブ（Cube）を選択してシーンに追加します。これを繰り返して３つのキューブ、つまり箱を用意してください。
それから箱に色をつけます。やり方はマテリアルとテクスチャについてのレッスンで学びました。簡単に復習しておくと、まずプロジェクトウィンドウで右クリックして、新しいマテリアルを作成します。それからインスペクターウィンドウで色を変えるという手順でしたね。
この例では３つの箱に異なる色を割り当てるために、同じ手順でマテリアルを３つ作成してください。青、ピンク、オレンジの３つの色のマテリアルを作ります。これを先ほど作った３つのキューブにドラッグ＆ドロップで割り当てていくと、カラフルな箱が完成します。
3Dモデルを配置する
続いて、３つの箱の中に動物のモデルを配置します。動物のモデルをプロジェクトウィンドウで選択して、階層ウィンドウにドラッグ＆ドロップすると、シーンにモデルを追加することができます。
オブジェクトの位置・回転・スケールのレッスンで学んだように、インスペクターウィンドウの数値を変えながら、モデルが箱の中に入るように調整します。
ボタンを作る
それからもう一つ、何度も再プレイできるように最初の状態にリセットするボタンもつけておくことにします。これは、ユーザーインターフェイスのレッスンで学んだボタンを使います。まずメニューバーからキャンバスをシーンに追加します。続いてボタンを追加します。
音声ファイルをシーンに追加する
音声ファイルをシーンに追加するためには、ゲームオブジェクトにアタッチする必要があります。メニューバーからエンプティオブジェクト（Empty Object）をシーンに追加します。それからプロジェクトウィンドウにある音声ファイルを、階層ウィンドウにあるこのエンプティオブジェクトにドラッグ＆ドロップしてアタッチします。
シーン背景を変える
ここで、デフォルトでは青空の風景になっている、シーンの背景も少し変えてみたいと思います。階層ウィンドウでメインカメラ（Main Camera）を選択した状態で、インスペクターウィンドウを見ていただくと、シーン背景としてドロップダウンメニューからソリッドカラー（Solid Color）を選択することができます。ここで背景を好きな色に変えることができます。
スクリプトの作成
ここまででシーンに必要なものの準備が整いました。ここからシーン内のオブジェクトの動きをコントロールするスクリプトを書いていきます。
新しいスクリプトを作成する
このアプリでは２種類のスクリプトが必要になりますので、まずプロジェクトウィンドウを右クリックして、２つの新しいスクリプトを作成します。１つはボタンをコントロールするためのもので「button」、もう一つは箱をコントロールするためのもので「cube」という名前をつけておきます。
ボタンにつけるスクリプト
まずbuttonスクリプトの方から見ていきましょう。以下が全体像です。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class button : MonoBehaviour
{
[SerializeField] private GameObject cube1;
[SerializeField] private GameObject cube2;
[SerializeField] private GameObject cube3;
[SerializeField] private GameObject bear;
[SerializeField] private GameObject bunny;
[SerializeField] private GameObject dog;
public void Start()
{
cube1.SetActive(false);
cube2.SetActive(false);
cube3.SetActive(false);
bear.SetActive(false);
bunny.SetActive(false);
dog.SetActive(false);
}
public void Button()
{
cube1.SetActive(true);
cube2.SetActive(true);
cube3.SetActive(true);
bear.SetActive(true);
bunny.SetActive(true);
dog.SetActive(true);
}
void Update()
{
bear.transform.Rotate(new Vector3(0, 150, 0) * Time.deltaTime, Space.Self);
bunny.transform.Rotate(new Vector3(0, -150, 0) * Time.deltaTime, Space.Self);
dog.transform.Rotate(new Vector3(0, 150, 0) * Time.deltaTime, Space.Self);
}
}
フィールドのところで３つの箱と３つの動物を定義しておきます。[SerializeField]と書かれているのは、エディターでそこに該当するオブジェクトをドラッグ＆ドロップして当てはめられるようにするものです。
続いて、アプリが立ち上がったとき、シーンにはスタートボタンのみが存在した状態にするために、Start()のところで３つの箱と３つの動物を、SetActive(false)を使って見えない状態にしておきます。
ここでボタンがクリックされるとButton()メソッドが呼び出されて、６つのオブジェクトが見える状態になるようにスクリプトを書いておきます。後ほどエディターでボタンのOnClick()イベントで開始されるように設定します。
それからUpdate()のところでは、動物が回転するようになっています。オブジェクトの回転についてのレッスンで学んだコードを使って、動物たちがくるくる回るように設定することができます。
キューブにつけるスクリプト
今度はcubeスクリプトの方を見てみます。短いですが、以下が全体像になります。こちらは、箱のオブジェクトがクリックされると、箱が消えて、効果音が鳴ることを表すコードです。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class cube : MonoBehaviour
{
[SerializeField] private AudioSource beep;
private void OnMouseDown()
{
gameObject.SetActive(false);
beep.Play();
}
}まず、フィールドのところでは音声ファイルが定義されていて、ユーザーインターフェイスのレッスンで学んだOnMouseDown()メソッドを使って、オブジェクトがクリックされた時のアクションを表現しています。
箱がクリックされると箱自体のオブジェクトはSetActive(false)で見えなくなり、音声ファイルはPlay()メソッドを使って音が鳴るという形になっています。
スクリプトとオブジェクトを関連づける
スクリプトをオブジェクトにアタッチする
これでスクリプトの準備も整ったので、スクリプトをオブジェクトにつけていきます。buttonスクリプトは、ボタンのオブジェクトにつけます。cubeスクリプトは、３つのキューブにつけていきます。同じスクリプトを３つのオブジェクトにそれぞれつけてください。
スクリプトをアタッチしてからボタンが選択された状態でインスペクターウィンドウを見ると、buttonスクリプトのコンポーネント欄に「Cube1」や「Bear」といったフィールドができているのがわかると思います。ここに該当するオブジェクトを階層ウィンドウからドラッグ＆ドロップで割り振ります。
キューブを選択してインスペクターウィンドウを見ると、こちらには「Beep」というフィールドができているのがわかるはずです。ここには、音声ファイルをつけたオブジェクトをドラッグ＆ドロップします。
オンクリックイベントの設定
再びボタンを選択した状態でインスペクターウィンドウを見てください。ボタン（Button）コンポーネントのOnClick()と書かれている部分の下に、階層ウィンドウからボタンオブジェクトをドラッグ＆ドロップしてください。すると、その右側にあるドロップダウンメニューにbuttonというオプションが表示されます。
その中からButton()というメソッドを選択します。これは、先ほどのbuttonスクリプトに書いたButton()というメソッドを指しています。つまり、このボタンがクリックされると、このアクションが開始されるということです。
ゲームビューでの確認
最後に、ゲームビューでアプリを再生して、正常に機能しているか確かめます。ボタンや箱をクリックして、動物が現れるかどうか確かめてみてください。コンソールにエラーメッセージが表示されず、アプリが思い通りの動きをしていれば完成です。
まとめ
簡単なアプリですが、１つのプロジェクトを完成させることができました。次回のレッスンでは、ここで作成したアプリをビルドして、スマートフォンやパソコンなどのデバイスで使えるようにするやり方について学びます。
