Unity 5でコインプッシャーゲームを作ろう（後編）

開発ツール

技術解説

連載 :

Unity 5で取り組むゲーム開発はじめの一歩

2015年8月19日(水)

古波倉正隆（こはぐらまさたか）

前回まで、前編・中編とコインプッシャーゲームを製作してきましたが、後編の今回はいよいよ仕上げに入ります。ゲームのメインとなるコインの動作に関するスクリプトを中心に記述していきます。

今回は、以下のことを習得します。

テキスト（コインの枚数）を表示してみる（uGUIの利用）
コインの枚数を増減させる（Textをスクリプトで制御、他のGameObjectに付けたスクリプトを呼ぶ）
コインが土台から落ちたときの処理（Tagの利用）
コインが土台から落ちて加点したときに効果音を鳴らす
Assetを利用して、ステージを飾ってみよう（Asset Storeの利用）

テキスト（コインの枚数）を表示してみる（uGUIの利用）

Unity 4.6から実装されたUnityのUIシステムです。このUIシステムは正式名称ではないのですが、「uGUI」という名称が使用されていることがほとんどなので、本稿でも「uGUI」という名称で紹介していきます。

それでは、uGUIを使用してコイン枚数を表示できるようにしましょう。ヒエラルキーウィンドウから［Create］→［UI］→［Text］を選択してください（図1）。「Canvas」というオブジェクトができ、その下に「Text」というオブジェクトができます。このTextオブジェクトを「ScoreText」と名付けます（図2）。

図1：uGUIのTextの追加

図2：Textオブジェクトを「ScoreText」と名付ける

uGUIではCanvas上にボタンやテキスト、画像を並べてUIを製作していきます。それでは、作ったScoreTextをダブルクリックしてみましょう。ゲームシーンの中に、現在製作中のコインプッシャーゲームとCanvasが共存しています。ここで、ScoreTextが白枠内へ収まるように、設置したい場所に配置してください。筆者は今回、白枠内左下にコインの枚数を表示するようにしました。なお、白枠はゲーム実行時のウィンドウサイズと同じ大きさになっています（図3）。

図3：uGUIの配置（白枠の左下に配置）

ScoreText設置時は文字が小さく、文字色も黒で見難いかと思われるので、文字を大きくかつ文字色も変更しましょう。ScoreTextのInspectorで、「Font size」を見やすいサイズに変更します。なお、フォントを大きくしすぎると先ほどまで表示されていた「New Text」が表示されなくなってしまうと思います（図4）。これは、ScoreTextのテキストサイズが表示される枠内に収まりきらなかったためです。

そこで、Paragraph内の「Best Fit」にチェックマークを付けましょう。これにより、自動的に枠の大きさをフォントサイズに合わせて変更してくれます（図5）。

図4：フォントを大きくすると文字が表示されなくなる

図5：ScoreTextのインスペクタウィンドウ

［Game］タブをクリックして、実際にScoreTextがどのように配置されているか見てみましょう（図6）。

図6：［Game］タブに切り替えてScoreTextがどのように配置されているか確認

コインの枚数を増減させる（Textをスクリプトで制御、他のGameObjectに付けたスクリプトを呼ぶ）

ここからは、スポーナーからコインを生成する際に、コインの表示を減らすスクリプトを書いていきます。なお、本稿ではコインの枚数を「スコア」と表現します。

まず、［Project］→［Create］→［C#Script］と選択して「ScoreScript」という名前でC#スクリプトを作りましょう。そして、このScoreScriptをドラッグ＆ドロップでScoreTextに貼り付けてください。

それでは、スクリプトを記述していきます。ScoreScriptをダブルクリックしてエディタを開き、リスト1のように記述しましょう。

リスト1：ScoreScript.cs

01using UnityEngine;
02using System.Collections;
03/*
04 * Textの文字列やフォントの大きさをスクリプトで変更する際には、
05 * using UnityEngine.UI;を記述する必要がある。
06 */
07using UnityEngine.UI;
08 
09public class ScoreScript : MonoBehaviour {
10 
11    /*
12     * Scoreの初期値(最初に持っているコインの枚数)を
13     * インスペクタ上から設定できるようにpublic 変数で宣言しておく
14     */
15    public int initScore;
16    int currentScore;
17    Text scoreText;
18     
19    void Start () {
20        currentScore = initScore;
21        scoreText = this.GetComponent<Text>();
22        printScore(initScore);
23    }
24     
25    // スコアを減点する関数
26    public void subScore(int n) {
27        currentScore -= n;
28        printScore(currentScore);
29    }
30     
31    // スコアを加点する関数
32    public void addScore(int n) {
33        currentScore += n;
34        printScore(currentScore);
35    }
36     
37    void printScore(int n) {
38        /*
39         * ScoreTextのTextに整数を代入する。
40         * scoreText.textはstring型(文字列)を受け取るが、nはint型(整数)なので、
41         * nをstring型に変換してあげる必要がある。
42         */
43        scoreText.text = n.ToString();
44    }
45}

また、subScore関数とaddScore関数はScore以外のスクリプトから呼び出せるようにしたいです。具体的に言えば、スポーナーからコインが生成されるときに、スコアからコインを生成した枚数分だけ減点するようにしたいところです。

そこで、Spawnerに貼りつけたSpawnerScriptから、ScoreTextに貼りつけたScoreScriptのsubScore関数を呼び出せるようにしてみましょう。ProjectウィンドウのAssets内から前回作成したSpawnerScriptを開き、リスト2のように記述を追加してください

リスト2：SpawnerScript.cs

01using UnityEngine;
02using System.Collections;
03 
04public class SpawnerSrcipt : MonoBehaviour {
05 
06    float moveSpeed = 2.0f;
07    Rigidbody rb;
08    /* 追加
09     * public で変数宣言をすると、インスペクタ上に項目が表示される。
10     * ここではcoin という変数がインスペクタ上で表示される。
11     */
12    public GameObject coin;
13     
14    /*
15     * シーンに置いたLeftWall 、RightWall をこのスクリプトで使用する。
16     * また、それぞれのx 座標の変数も準備しておく。
17     */
18    public GameObject leftWall;
19    public GameObject rightWall;
20    float leftWallPositionX;
21    float rightWallPositionX;
22 
23    // scoreTextをインスペクタ上に表示させる
24    public GameObject scoreText;
25    ScoreScript scoreS;
26     
27    void Start () {
28        // スクリプトを付けたゲームオブジェクトのRigidbodyコンポーネントを取得する
29        rb = this.GetComponent<Rigidbody>();
30        // leftWall とrightWall のx 座標を取得
31        leftWallPositionX = leftWall.transform.position.x;
32        rightWallPositionX = rightWall.transform.position.x;
33 
34        /*
35         * scoreText内にあるScoreScriptをgetComponentで取ってくる。
36         * これで、ScoreScript内にてpublicで宣言した関数を利用できるようになる。
37         */
38        scoreS = scoreText.GetComponent<ScoreScript>();
39    }
40 
41    // Update is called once per frame
42    void Update () {
43 
44        /*
45         * Mathf.Clamp である変数の最小値と最大値を設定することができる。
46         * 第一引数は設定したい変数、第二引数は最小値、第三引数は最大値である。
47         * Spawner の移動できるx 座標範囲をleftWallPosition のx 座標から、rightWallPostion のx 座標の範囲にしている。
48         */
49        Vector3 currentPosition = this.transform.position;
50        currentPosition.x = Mathf.Clamp(currentPosition.x,
51                                        leftWallPositionX,
52                                        rightWallPositionX);
53        this.transform.position = currentPosition;
54 
55        /*
56         * Inputクラスは入力システムに関する関数が含まれている。
57         * GetAxisでPCの矢印キーの入力を受け付けることができる。
58         * "Horizontal"だと、左右の矢印キーの入力を受け付け、"Vertical"だと
59            上下の矢印キーの入力を受け付けるようになる。
60         * http://docs.unity3d.com/ja/current/ScriptReference/Input.GetAxis.html
61         */
62        float x = Input.GetAxis ("Horizontal");
63         
64        // キー入力された際の移動する向きを決める。
65        // 今回はx軸方向に移動させたい
66        Vector3 direction = new Vector3 (x, 0, 0);
67         
68        // velocity(速度)に代入することによって、このオブジェクトの移動速度が決定される
69        rb.velocity = direction * moveSpeed;
70 
71        /* 
72         * スペースキーが押されたときにcoin を生成する。
73         * 第一引数は生成するオブジェクト、第二引数は生成する場所、
74           第三引数は生成する角度
75         */
76        if (Input.GetKeyDown("space")) {
77            Instantiate(coin,this.transform.position,this.transform.rotation);
78            // スペースキーが押されたら、スコアを1点減点させる
79            scoreS.subScore(1);
80        }
81    }
82}

スクリプトを記述した後は、SpawnerのインスペクタウィンドウにあるSpawner Scriptに「Score Text」という項目が出現しているので、そこにScoreTextをドラッグ＆ドロップします。ここまで完了したら、ゲームを実行してみましょう。スペースキーを押すたびにスコアが減少していきます（図7）。

図7：左下に設置したScoreTextが減点されていく様子

コインが土台から落ちたときの処理（Tagの利用）

ここまでの操作で、スポーナーからコインが生成されたときにスコアが減点される様子を確認できました。次は、コインが土台から落ちた時にスコアを増加させてみましょう。ここでは、ほとんどのコインプッシャーゲームと同様に、土台より手前にコインが落ちたらスコアを増加するようにします。

まずは、シーンビューで土台の下に受け皿を設置しましょう。［Hierarchy］→［Create］→［3DObject］→［Cube］と選択して受け皿を作成します。CubeのScaleは土台に合わせてX=5、Y=1、X=5に設定し、名前を付けましょう。筆者は「Saucer」と名付けました（図8）。

図8：Saucerの設置

次に、この受け皿にコインが乗ったらスコアを2増加し、受け皿に乗ったコインを消す処理を記述します。先ほどと同じように［Project］→［Create］→［C#Script］と選択して「SaucerScript」という名前でC#スクリプトを作り、リスト3のように書いていきましょう。そして、SaucerScriptをドラッグ＆ドロップでSaucerに貼りつけます。

リスト3：SaucerScript.cs

01using UnityEngine;
02using System.Collections;
03 
04public class SaucerScript  : MonoBehaviour {
05 
06    void OnCollisionEnter(Collision colObject) {
07    // Saucerと衝突したオブジェクト(colObject)の「名前」が"Coin"だったときに、
08    // 衝突したオブジェクトを消す(Destroy)
09        if (colObject.gameObject.name == "Coin") {
10            Destroy(colObject.gameObject);
11        }
12    }
13}

ここで、再度ゲームを実行してみましょう。スペースキーを押しても生成されたコインが消えません。これは、SpawnerScriptでInstantiate関数を使用してオブジェクトを生成すると、オブジェクト名の後ろに（Clone）と付いてしまうからです（本来はInstantiate後に名前を変更することも可能）。

そうなると、if文内のCoinとオブジェクト名が一致しなくなってしまうため、受け皿とぶつかってもコインが消えません（図9）。そのため、別の方法で名前を一致させてコインが消えるようにする必要があります。

図9：Saucerに衝突してもCoin（Clone）が消えない

そこで、タグ機能を使います。タグ機能を使うと、CoinとCoin（Clone）を同じオブジェクトに分類分けすることができます。

タグ機能は、複数のゲームオブジェクトを分類分けするために使用します。例えば、敵キャラクターが「ゴブリン」「スライム」「ドラゴン」と3体いたとして、タグを使うとこれら3体をまとめて「Enemy」と設定できます。

それでは、プロジェクトウィンドウのAssets内にある「Coin」をクリックしてください。続いてInspectorの「Coin」とオブジェクト名が表示されている下にある「Tag」の［Untagged］という項目をクリックし、［AddTag…］を選択します（図10）。

図10：Tagを設定する場所

インスペクタウィンドウが「Tags＆Layers」という表示に変わり、ここでユーザが定義してタグを作ることができます。「Tags」が「List is Empty」になっているはずですので、［＋］を押して新しいタグを作ります。作成したTagに「Coin」と名付けて（図11）、プロジェクトウィンドウのAssets内にあるCoinの［Tag］を「Coin」に変更しましょう（図12）。

図11：Tagの編集ウィンドウ（Coinタグ作成後）

図12：Coinの［Tag］を「Coin」に変更

ここまでの設定に合わせて、SaucerScriptも書き直します（リスト4）。

リスト4：SaucerScript.csを修正（コインが消えるスクリプトを追加）

01using UnityEngine;
02using System.Collections;
03 
04public class SaucerScript : MonoBehaviour {
05 
06    void OnCollisionEnter(Collision colObject) {
07        // 変更 ：Saucerと衝突したオブジェクトの「タグ」が"Coin"だったときに、
08        // 衝突したオブジェクトを消す(Destroy)
09        if (colObject.gameObject.tag == "Coin") {
10            Destroy(colObject.gameObject);
11        }
12    }
13}

これで、受け皿にコインが落ちた時に消えるようになりました。続けて、受け皿にコインが落ちたときにスコアが2点加点されるスクリプトを追加します（リスト5）。

リスト5：SaucerScript.csを修正（スコアを加点するスクリプトを追加）

01using UnityEngine;
02using System.Collections;
03 
04public class SaucerScript : MonoBehaviour {
05 
06    // 追加:scoreTextをインスペクタ上に表示させる
07    public GameObject scoreText;
08    ScoreScript scoreS;
09     
10    void Start() {
11        scoreS = scoreText.GetComponent<ScoreScript>();
12    }
13     
14    void OnCollisionEnter(Collision colObject) {
15        if (colObject.gameObject.tag == "Coin") {
16            Destroy(colObject.gameObject);
17            // 追加
18            scoreS.addScore(2);
19        }
20    }
21}

スクリプトを修正したら、ヒエラルキーウィンドウ内の「ScoreText」を、SaucerのインスペクタウィンドウにあるSaucerScriptの「ScoreText」にドラッグ＆ドロップすることを忘れないでください。

これで、コインプッシャーゲームがひと通り完成しました！

コインが土台から落ちて加点したときに効果音を鳴らす

ゲームがひと通り完成したところで、少しアレンジしてみましょう。コインをゲットしたときに効果音を鳴らします。効果音が鳴るタイミングは、先ほど実装した「コインが受け皿に落ちたとき」です。

まず、効果音をフリーのサイト、もしくは自前で準備してください。準備した素材をUnityのプロジェクトに追加する方法は、入れたい素材をプロジェクトウィンドウにドラッグ＆ドロップして取り込むだけです（図13）。

図13：効果音をドラッグ＆ドロップでUnityプロジェクトに追加

追加した効果音ファイルは波形のアイコンで表示されます。波形のアイコンが音に関するファイルになります。

それでは、取り込んだ効果音を鳴らすための準備をしましょう。まず、Saucerのインスペクタウィンドウから［Add Component］→［Audio］→［Audio Source］を選択して、インスペクタウィンドウに「Audio Source」を付けます。次に、Audio Source内の「AudioClip」に取り込んだ効果音をドラッグ＆ドロップします。なお、「Play On Awake」のチェックマークは外してください（図14）。

図14：Saucerのインスペクタウィンドウの状態（Audio Source追加後）

ここから、SaucerScriptにコインが落ちたときに音を鳴らすスクリプトを追加します（リスト6）。

リスト6：SaucerScript.csを修正（効果音を鳴らすスクリプトを追加）

01using UnityEngine;
02using System.Collections;
03 
04public class SaucerScript : MonoBehaviour {
05 
06    // 追加 ：scoreTextをインスペクタ上に表示させる
07    public GameObject scoreText;
08    ScoreScript scoreS;
09 
10    AudioSource getSE;
11 
12    void Start() {
13        scoreS = scoreText.GetComponent<ScoreScript>();
14        // 追加 : Saucerに付けたAudioSourceコンポーネントをとってくる
15        getSE = this.GetComponent<AudioSource>();
16    }
17 
18    void OnCollisionEnter(Collision colObject) {
19        if (colObject.gameObject.tag == "Coin") {
20            Destroy(colObject.gameObject);
21            scoreS.addScore(2);
22            // 追加 : PlayOneShotでAudioClipに入れた音を一度だけ鳴らす
23            getSE.PlayOneShot(getSE.clip);
24        }
25    }
26}

これで、コインが受け皿に落ちたときに効果音が鳴るようにできました。

アセットストアを利用してステージを飾ってみよう（AssetStoreの利用）

Unity社が提供する「アセットストア」では、ゲーム製作に利用できる3Dモデルや音源、画像などをダウンロードできます（無料・有料）。どのような素材があるか、実際にアセットストアを覗いてみましょう。メニューバーから［Window］→［Asset Store］を選択すると（図15）、別ウィンドウで画面が表示されます。これがアセットストアです。画面右側にある「3Dモデル」「アニメーション」「エディタ拡張」「オーディオ」などから、さまざまな素材や拡張を購入することができます（図16）。

図15：メニューバーから「アセットストア」を開く

図16：「アセットストア」のトップページ

アセットストアから素材をダウンロードするには、アセットストアにログインしなければなりません。アセットストアの右上にある［ログイン］から、本連載の第1回で作成したUnityのアカウントを使ってログインしましょう。

無事にログインできたら、自分の欲しい素材や拡張を探します。例えば、コインのアセットが欲しい場合は、画面右上の検索欄（Asset Storeをサーチする）に「Coin」と打ち込みます。このとき、日本語だとほとんど出てこないので、英語で検索してください。

検索結果を見ると、他の製作者が作ったコインがたくさん表示されます（図17）。ここから無料のものを選んでダウンロードしてみるのも良し、有料のアセットを購入してみるのも良いでしょう。

図17：「Coin」の検索結果

ここでは、「Gold Coins」という無料で利用できるアセットをダウンロードして、コインプッシャーゲームのプロジェクトに入れてみます。

検索結果から「Gold Coins」をクリックし、遷移した画面で［ダウンロード］を押すとダウンロードが始まります（図18）。ダウンロードが終了すると、図19のようなウィンドウが表示されます。

図18：「Gold Coins」のダウンロードページ

図19：ダウンロードの終了画面

ここで［import］ボタンをクリックすると、アセットがUnityのプロジェクト内に取り込まれます。ダウンロードしたGold Coinsをさっそくコインプッシャーゲームに利用してみました（図20）。見た目にも、より本物のゲームらしくなったのではないでしょうか。

図20：コインプッシャーゲームに「Gold Coins」を適用してみた

ここまで、3回にわたってコインプッシャーゲームを製作してきました。お疲れ様でした。皆さんも、上手に製作できたでしょうか？

本連載で紹介した機能はごく一部で、Unityはまだまだたくさんの機能があります。幸いにもUnityは多くの情報がネット上にありますので、目的に応じて実装方法を調べ、さまざまなジャンルのゲーム製作にもチャレンジしてみてください。

そして、本連載が1人でも多くの方々にとって、ゲームを作るための一歩となれば嬉しいです。

次回は、複数人で1つのUnityプロジェクトを管理する方法について解説します。

著者

古波倉正隆（こはぐらまさたか）

この著者の記事一覧この著者の
記事一覧

琉球大学大学院、IGDA 琉球大学代表

2歳の頃から叔父の影響でファミコンを触り始める。5歳の頃に初代ぷよぷよにハマり、そこからゲーム好きが開花。ノベルゲーム以外の幅広いジャンルをプレイしてきた。大学ではゲーム開発者向けコミュニティ IGDA琉球大学を設立し、ゲーム開発者向けに講演会やゲームジャムを開催している。好きなゲームは KOEI 三国志・信長シリーズ、KONAMI 系音ゲなどなど。
個人ブログ（masakoha’s room） : http://www.masakoha.com/