【Unity初心者向け】作りながら覚えるゲーム制作講座 #7 (後編) テキスト表示

2021-03-18

前回は、ゴールを設置してそこを通過するとスコアが加算されるように実装しました。

今回は、クリアやゲームオーバーになった時の表示や、スコアの表示を実装していきます！
今回こそ本当にゲームが完成します！！

それでは始めていきましょう！

1. クリア表示とゲームオーバー表示を作成する
2. スコア表示を作成する
3. まとめ

クリア表示とゲームオーバー表示を作成する

現状ではスコアが 5 になってクリアしても、逆に弾に当たってゲームオーバーになっても何も表示されないですね。
ますはクリアとゲームオーバーの時にテキスト（文字）を表示させていきます！

Text オブジェクトを追加する

まずは、テキストを表示させるための Text オブジェクトを追加します。

Hierarchy を右クリックして、 UI -> Text を選択してください。
画面に何か文字が表示されましたね！
これが Text オブジェクトです。

テキストは縮尺の都合上 Scene ビューではかなり大きく表示されますので、追加したときにテキストが見つからないかもしれません。
そんな時は、作成された Text オブジェクトをダブルクリックしてみてください。
Scene ビューの視点が自動的に Text が映る位置に移動します。

ここで、Hierarchy の階層を確認してみてください。
Text オブジェクトが追加されたのと同時に Canvas というオブジェクトも自動的に追加され、その中に Text オブジェクトが入っているような形になりましたね。
この Canvas というのは、 Text などの UI （表示物）を表示するのに必要になりますので、消さないようにしてください。

Text オブジェクトが追加されたら、名前を「GameOverText」に変更してください。

Scene ビューのモードを 2D に変更する

Text などの UI を編集するときは、 Scene ビューの見た目を 2D にしておくことをオススメします。

Scene ビューの上側にあるバーの中の「2D」というボタンを ON にしてみてください。
これで表示が平面的になって、 UI の編集がしやすくなります！

Text の見た目を変更する

Text オブジェクトを追加すると確かに文字が表示されましたが、クリア表示に使うには少し地味な見た目ですね。

これをもう少し派手な感じにしていきます！
いくつか設定が必要になりますので、順に見ていってください。

画面全体に表示させる

まずは、画面全体にテキストを表示させられるように設定します。
それには、 Inspector の一番上にある Rect Transform という項目を見てください。

Rect Transform の左側にある四角形をクリックしてください。
すると、 Anchor Presets という選択肢が表示されます。

この中で一番右下の「stretch – stretch」を選択してください。

そうすると、右側に Left Top Right Bottom という項目が表示されます。
これらを全て 0 に設定してください。

これで、画面全体にテキストを表示させられるようにになります！

文字のサイズを変える

クリア表示は重要なので、文字のサイズを大きくしましょう。

Font Size という項目の数値を好きな値に変更してください。
ここでは 120 に設定してみます。

これで、かなり大きくなりました！

文字を中央揃えにする

デフォルトだと文字が左上を基準に表示されてますね。
これを中央に表示させるようにします。

Alignment というところに3つのボタンの塊が2セットありますね。
これは、横と縦でそれぞれ文字をどこに揃えるかを決めるボタンです。
それぞれ中央のボタンを押してください。

これで、横と縦が両方とも中央揃えになりました！

文字の色を変える

文字の色を変えてみます。

Color をクリックして、好きな色に変えてみてください。
ここでは オレンジ (255, 160, 0) に変えてみます。

文字の中身を空に

デフォルトでは文字の内容が「New Text」となっていますね。
今回は、クリアかゲームオーバーかによって文字の内容はプログラムから変えるようにします。
なので、最初は中身を空にしておきましょう。

Text の欄に書かれている「New Text」という文字を削除してください。
画面から文字が消えますが、テキストオブジェクトはちゃんと存在しています。

自機のスクリプトから GameOverText を参照できるように

先ほど、クリアかゲームオーバーかによって文字の内容をプログラムから変えると言いましたね。
そのためには、スクリプト内からテキストを参照できるようにする必要があります。
前回の講座でもゴールオブジェクトを参照できるようにしましたが、その応用です！

using を追加

まず、スクリプト内で UI のプログラムを使えるようにします。
それには、冒頭に using UnityEngine.UI; という行を追加してください。

using とは「使う」という意味で、これで UI に関係するプログラムを使えるようになります。^[1]厳密には using を書かなくても使う方法はありますが、今回は省略します。

public 変数を追加

スクリプト内からテキストを参照できるように、変数を追加します。
外部から値を設定できるようにするには public 変数を使うんでしたね！^[2]前回の講座で public GameObject goal; を追加した部分を参照してください。

変数宣言の部分に public Text gameOverText; という行を追加してください。

追加したら、スクリプトを保存して Unity に戻ってみてください。
Inspector を確認して、 GameOverText という項目が追加されていれば成功です！

GameOverText をドラッグ＆ドロップ

自機の Inspector に追加された GameOverText に、 Hierarchy にある GameOverText をドラッグ&ドロップしてください。

これでスクリプト内からテキストが参照できるようになります！

クリア時に「QUALIFIED!!」と表示されるように

では、クリア時に「QUALIFIED!!」という文字を表示させてみましょう。
表示させる文字は何でも大丈夫です！

GameOverText の中身を変えるには、さっき追加した gameOverText 変数を使います。
それには、下記のように gameOverText.text に対して文字列を設定します。

gameOverText.text = /* 設定したい文字列 */;

これも変数の代入と同じ書き方ですね！
イメージとしては、 gameOverText の中にある text という変数に対して「設定したい文字列」という値を代入しているといった感じです。

そしてポイントとしては、文字列を使うときは内容をダブルクォーテーション「""」で囲む必要があります。
つまり、「QUALIFIED!!」という文字列を設定するにはこのように書きます。

gameOverText.text = "QUALIFIED!!";

では、実際に OnTriggerEnter メソッドの中にあるクリアの部分に処理を追加しましょう！

// 当たり判定が検出されたときに実行される
private void OnTriggerEnter(Collider other)
{
    // ゴールと接触した場合
    if (other.gameObject == goal)
    {
        // スコアを加算
        score++;

        // スコアが5以上になった場合
        if (score >= 5)
        {
            // クリア
            gameOverText.text = "QUALIFIED!!";
            GetComponent<Collider>().enabled = false;
        }
        else
        {
            // スタート地点に戻る
            x = -10.0f;
        }
    }
    else
    {
        // ゲームオーバー（自機を消す）
        Destroy(gameObject);
    }
}

これで、実際にゲームを実行してクリアしてみてください。
画面に「QUALIFIED!!」と表示されれば成功です！

ゲームオーバー時に「ELIMINATED!!」と表示されるように

同じように、ゲームオーバー時「ELIMINATED!!」と表示させてみましょう。
このようになります！

// 当たり判定が検出されたときに実行される
private void OnTriggerEnter(Collider other)
{
    // ゴールと接触した場合
    if (other.gameObject == goal)
    {
        // スコアを加算
        score++;

        // スコアが5以上になった場合
        if (score >= 5)
        {
            // クリア
            gameOverText.text = "QUALIFIED!!";
            GetComponent<Collider>().enabled = false;
        }
        else
        {
            // スタート地点に戻る
            x = -10.0f;
        }
    }
    else
    {
        // ゲームオーバー（自機を消す）
        gameOverText.text = "ELIMINATED!!";
        Destroy(gameObject);
    }
}

ゲームを実行して弾に当たってみてください。
「ELIMINATED!!」と表示されれば成功です！

スコア表示を作成する

前回の講座では、Console のデバッグ表示でしかスコアが増える様子を確認できませんでしたね。
なので、スコアを左上に表示させたいと思います！

Text オブジェクトを追加する

これは GameOverText のときと同じですね。
Text オブジェクトを追加して名前を「ScoreText」にしてください。

このとき、新しく作った Text オブジェクトがさっきと同じ Canvas オブジェクトの中に作られたことを確認してください。
もし違うオブジェクトの中に入ってしまった場合は、Text オブジェクトを作り直すかドラッグ&ドロップで Canvas の中に移動させておいてください。

Text の見た目を変更する

ScoreText の見た目も必要なところを設定していきます！

画面全体に表示させる

先ほどと同じで「stretch – stretch」にしてください。

文字のサイズを変える

スコア表示に合いそうな好きなサイズを設定してください。
ここでは 30 に設定してみます。

文字の色を変える

スコア表示に合いそうな好きな色を設定してください。
ここでは 白 (255, 255, 255) にしてみます。

文字の中身を変える

ここにはスコア表示を表す文字を設定しますが、デフォルトは 0 点なので「SCORE:0/5」にしておいてください。

これを、スコアが増えるたびにプログラムで「SCORE:1/5」「SCORE:2/5」と変更していきます。

自機のスクリプトから ScoreText を参照できるように

これもさっきと同じですね！
変数宣言の部分に public Text gameOverText; という行を追加して、Inspector に追加された ScoreText に Hierarchy にある ScoreText をドラッグ&ドロップしてください。

public class Player : MonoBehaviour
{
    float x = -10.0f;           // X座標
    int score = 0;              // スコア

    public GameObject goal;     // ゴールオブジェクト
    public Text gameOverText;   // ゲームオーバー表示用テキスト
    public Text scoreText;      // スコア表示用テキスト

スコア加算時にスコア表示を更新

さて、ついに最終工程です。
今追加した scoreText 変数を使って、スコアが加算されるたびに表示を更新していきます。

テキストの設定は gameOverText のときと基本的に同じですが、先ほどは「QUALIFIED!!」や「ELIMINATED!!」といった固定の文字列でした。
今回は、score という変数の値を文字列に含める必要があります。

まずは、仮で 0 点のときの文字列「SCORE:0/5」を設定してください。

scoreText.text = "SCORE:0/5";

文字列の中に変数の値を含めるには、まず先頭にドルマーク「$」を付けてください。

scoreText.text = $"SCORE:0/5";

そして、変数の値を入れたい場所を {変数名} に変えてください。
今回は score という変数なので {score} と書きます。

scoreText.text = $"SCORE:{score}/5";

この書き方ですが、実は前回のデバッグ表示でスコアを表示するときも使っていましたね。
前回は変数の中身だけでしたが、今回のように普通の文字列の中に変数を埋め込むことも可能です。

まとめ

お疲れさまでした！！
ついにゲームが完成しました！！

いかがでしたでしょうか？
Unity や C# に慣れてくれば簡単に作れるミニゲームなのですが、最初は思ったよりも時間がかかってしまったかもしれません。
ですが、今回の講座で取り上げた基本的な内容は Unity でゲームを作るうえでは繰り返し出てきますので、ゲーム制作を続けていくことで着実に慣れていけるのではないかと思います！

余裕があれば、今回のゲームをベースに少しアレンジを加えたゲームなども作ってみてください。
例えばこんな感じでしょうか。

・自機の形や色を変える
・弾の形や色を変える
・弾の軌道を変える
・背景を変える
・カメラの視点を変える

徐々にアレンジができるようになると、それが最終的に自分でゲームを作る力になってきます！

そしてこのブログや YouTube のチャンネルでは今後も Unity ゲーム開発の情報を発信していきますので、自分でゲームを作りたい方はぜひチェックしてみてください！

脚注[+]

↩1	厳密には using を書かなくても使う方法はありますが、今回は省略します。
↩2	前回の講座で public GameObject goal; を追加した部分を参照してください。

Unity

Posted by karakuri_colla