Edited at

【Unity】スコアの表示:「はじめてのUnity」のブロック崩しを改造しながら学ぶ

More than 1 year has passed since last update.


はじめに

JunShimuraさんの「[超初心者向け]Unityチュートリアル「はじめてのUnity」のブロック崩しと同等をC#で ::(1)ステージ配置~(6)ブロックを手作業で並べる)」をよりゲームらしく改造する。

作成する記事は下記の通りです。


スコアの表示

スコアの表示はScene上はカメラの影響で傾いて表示されますが、実際のGame上は垂直に表示されます。

Unity_ScoreScene.png

Unity_ScoreGame.png


テキストの追加

メニューの[GameObject]>[UI]>[Text]を選択して下さい

Unity_TextAdd.gif


Canvasの設定変更(Score GUI)

Canvasの[Inspector]タブにて名前を「Score GUI」にします。CanvasコンポーネントにあるRender ModeScreen Space - Cameraに変更します。次にRender Cameraのところにある○をクリックし、開いたリスト画面からMain Camera(Camera)を選択します。

Unity_ScoreGUI.gif

※CanvasのRenderModeのデフォルトがScreen Space - Overlayになっているのですが、初心者に操作させるのは難しいので、今回はScreen Space - Cameraにしています。

Screen Space - Overlayはゲームで使われる他のオブジェクトの描画が終わったあとにGUIが描画されます。つまりGUIが絶対に最前面になります。本来はこれが望ましいです。その場合、Scene上ではGUIが別の位置に配置されますが、Game上では重なって表示されます。CanvasをクリックすればScene上のGUI位置に移動するので、慣れればこちらを使う方がいいかも知れません。


スコアラベルの作成(Score Label)

Score GUI配下のTextの[Inspector]タブにて名前を「Score Label」にします。

[Rect Transform]を下図のように変更します。次にTextScoreと入力します。Font StyleBoldFont Size48にしてColorを白(255,255,255)にします。

Unity_ScoreLabel.png


スコアの作成(Score)

得点をセットするTextを作成します。

Score Labelを選択して、右クリックメニューのDuplicateで複製します。ついでにEventSystemは使わないので右クリックメニューのDeleteで削除しておきます。

Unity_HieScore.png -> Unity_HieScore2.png

複製時のScore Label(1)を[Inspector]タブにて名前を「Score」にします。

[Rect Transform]を下図のように変更します。次にText0と入力します。Alignmentを右寄せにします。

Unity_Score2.png


ハイスコアの作成

Score LabelScoreの2つを選択した状態で、右クリックメニューのDuplicateで複製してHighScore LabelHighScoreを作成します。

Unity_HieScore3.png

複製時のScore Label(1)を[Inspector]タブにて名前を「HighScore Label」にします。[Rect Transform]を下図のように変更します。

Unity_HighScoreLabel.png

次にTextHigh-Scoreと入力します。

unity_HighScoreText.png

複製時のScore(1)を[Inspector]タブにて名前を「HighScore」にします。[Rect Transform]を下図のように変更します。

Unity_HighScore2.png


スクリプトの作成

Score GUIの[Inspector]タブの一番下にある[Add Compornent]ボタンをクリックして、Scriptアセットを作成、追加します。ファイル形式はcsを選びます。

Unity_ScoreAddScript.gif

ファイル名をScoreとします。そうすると、Assetsの中に「Score.cs」が出来ています。

※先頭は英大文字です。間違えた場合、ファイル名と中身のクラス名の両方を修正してください。

Unity_AssetScore.png


Score.csを編集する

Assets内のScoreスクリプト(C#のアイコン)をダブルクリックすると、エディタが開きます。

優先的に開かれるエディタは、多くの場合はMonoDevelopというソフトが起動されます。

今回のスコアのスクリプトは、Unityチュートリアルの「第12回 Waveを5個にする、スコアの実装」を参考にしています。

少し長いのでコピー&ペーストで入力してしまいましょう。

※MonoDevelopでペーストが効かないに時はMonoDevelopを閉じ直してください。


Score.cs

using UnityEngine;

using UnityEngine.UI;

public class Score : MonoBehaviour {

// スコアを表示する
public Text scoreText;
// ハイスコアを表示する
public Text highScoreText;

// スコア
private int score;

// ハイスコア
private int highScore;

// PlayerPrefsで保存するためのキー
private string highScoreKey = "highScore";

void Start ()
{
Initialize ();
}

void Update ()
{
// スコアがハイスコアより大きければ
if (highScore < score) {
highScore = score;
}

// スコア・ハイスコアを表示する
scoreText.text = score.ToString ();
highScoreText.text = highScore.ToString ();
}

// ゲーム開始前の状態に戻す
private void Initialize ()
{
// スコアを0に戻す
score = 0;

// ハイスコアを取得する。保存されてなければ0を取得する。
highScore = PlayerPrefs.GetInt (highScoreKey, 0);
}

// ポイントの追加
public void AddPoint (int point)
{
score = score + point;
}

// ハイスコアの保存
public void Save ()
{
// ハイスコアを保存する
PlayerPrefs.SetInt (highScoreKey, highScore);
PlayerPrefs.Save ();

// ゲーム開始前の状態に戻す
Initialize ();
}
}



ScoreとHighScoreを設定する

スクリプト内でpublicにした型はInspectorに表示されます。

Unity_ScoreAddText.png

ここにスコアとハイスコアを表示するTextコンポーネントをセットします。Score Textの右横にある○をクリックし、開いたリスト画面からScoreを選択します。

Unity_ScoreText.png

High Score Textも同様にします。

Unity_ScoreAddText2.png


スコアを実装する


Block.csを編集する

得点を入るのはブロックが削除されたタイミングとなりますので、Block.csを編集します。

「FindObjectOfType().AddPoint(10);」の部分を追加します。


Block.cs

void OnCollisionEnter(Collision collision) {

//衝突判定
if (collision.gameObject.tag == "Ball") {
//スコア処理を追加
FindObjectOfType<Score>().AddPoint(10);

//相手のタグがBallならば、自分を消す
Destroy(this.gameObject);
}
}


これでブロックがボールに当たったときにスコアに10点が加算されるようになります。


FindObjectOfType<スクリプト>

他スクリプトのアクセス(値参照/メソッド呼出)方法として、今回FindObjectOfType関数を使っています。対象コンポーネントが1つしか使用されないことが確定している場合に使用するといいでしょう。


実装を確認する

エディタ画面中央の実行ボタンを押してみましょう。

ブロックがボールに当たったときにスコアに10点が加算するのが確認されます。またハイスコアも変更されているのが確認できるでしょう。

Unity_ScoreAddGame.png

ちなみに実行を終了し再実行しても、ハイスコアは初期値に戻ってしまいます。これはハイスコアの保存(Save)の処理を呼んでいないためです。

ハイスコアの保存を実装するとしたら、ゲームオーバー時になりますので次回に組み込みます。


学んだこと


  • uGUIのTextコンポーネントを使って文字を表示できること

  • スクリプトでPublic変数に定義したものをInspectorでセットできること

  • 他スクリプトからメソッドの呼び出しができること

  • PlayerPrefsクラスを使用してハイスコアを保存できること


参照