Unity学習サイト

ホーム / クリア時の評価と背景

第6回目の講座になりました。この講座で最終回になります。前回までの講座では得点とタイマー機能を付けました。
今回の講座ではシーン変遷時の数値の受け渡しと背景を変化を実装していきます。最後もなかなか長くなりますので頑張っていきましょう!

今回の講座では下のミニゲームの内容まで作ることができます。

この講座での最終完成形

Clearシーン

クリアシーンへ変遷したときに取れたネギの本数が表示できるようにしていきましょう。 前回の講座で作った手順と同じです。復習しながらやっていきましょう。
シーンフォルダからClearシーンを開いてください。ネギの本数を表示する用のテキストボックス を作りましょう。ヒエラルキーウィンドウで右クリック→UI→TextでCanvasとその配下にTextボックス が作られます。Textの名前をTokutenに変更してください。このままだとCanvasがとても大きいのでカメラのサイズに合わせます。
ヒエラルキーでCanvasをクリックしてインスペクターのCanvasコンポーネントを確認し Render ModeをScreenSpace-Cameraに変更、Render CameraをMainCameraに設定で CanvasがMainCameraのサイズに変更されます。

出来たら次はTextの位置、フォントを整えます。ヒエラルキーでTokutenを選択しインスペクター を確認してRect TransfromのPos Xを0、Pos Yを60に変更してください。 次に、Textコンポーネントを確認してStyleをBold、Sizeを20、Alignmentを真ん中の へ、colorをネギ色へそれぞれ変更してフォントを整えてください。

出来たらスクリプトを組んで行きましょう。スクリプトフォルダで右クリック→Create →C#で名前をTokutencにしてください。

usingのところにUIを使用する宣言をしましょう。

using UnityEngine.UI;

ネギの本数を表示させているスクリプト(Textc)をいれる箱をフィールドに作ります。

public int negi;

作った箱にTextcスクリプトのnegi(ネギの本数)を入れ込みます。Start関数へ記述

negi = Textc.negi;

次に、このスクリプトがくっつくゲームオブジェクト(Tokuten)からTextコンポーネント を取得しその中のtextを書き換える作業をします。

GetComponent<Text>().text = string.Format("ネギ{0}本", negi);

以上でクリアシーンにネギの本数を表示するスクリプトは完成です。アタッチして Tokutenオブジェクトにドラックアンドドロップしてスクリプトを登録しましょう。 以下Tokutencスクリプトの全文です。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class Tokutenc : MonoBehaviour
{
    public int negi;
    // Start is called before the first frame update
    void Start()
    {
        negi = Textc.negi;
        GetComponent<Text>().text = string.Format("ネギ{0}本", negi);
    }
}

次にクリアっぽくするためにTextボックスでClearの文字を表示しましょう。 これに関しては作らなくても構いません。
クリアシーンのヒエラルキーウィンドウで右クリック→UI→Textでテキストボックスを つくってください。名前はそのままでいいです。

出来たら上の画像のようにテキストボックスのコンポーネントを編集しましょう。
Text→Clearへ編集 PosX→0、PosY→130、Height→60、Style→Bold、Size→50、Alignment 真ん中、Color→黄色
これで、Clearの文字が大きめに表示されました。次は、背景をいじっていきます。

クリアシーン背景

さて、今回の章では捕まえたネギの本数に応じて背景を変化させていこうと思います。 2本ならCランクの背景、5本ならAランクの背景といった具合に背景を変化させて行きましょう。

学習素材の入手

下記の画像は、クリックすると自動でダウンロードされます。

まずは、上の画像たちを保存してください。Aランクの画像はnegimaa Bランク の画像はnegimabといった具合に保存するとミスが少ないです。保存したら Itemフォルダに画像を登録してください。
Mainの画像を用意しておいて得点に応じてMainの画像を入れ替えて背景を交換していく仕組みなので 何でもいいのですが何となくAランク用の画像をMainの画像としてやっていきます。 Aランク用の画像をシーンへ登録してトランスフォームコンポーネントで Xを0 Yを-2にしてください。
次に背景を変更するスクリプトを組んでいきましょう。 スクリプトフォルダ→右クリック→Create→C#で名前をBackgroundcで保存してください。 そのまま、スクリプトをヒエラルキーウィンドウのnegimaaオブジェクトにドラックアンドドロップして 登録しておきましょう。 できたらスクリプトを開いてコードを書いていきましょう。
まず、Textcスクリプトのネギの本数を 取り出します。フィールドにネギの本数が入る空箱を用意します。

public int negi;

次に、Textcスクリプトのネギの本数を先ほど作った箱に入れます。Start関数に記述

negi = Textc.negi;

また、フィールドに戻って次は背景のスプライトレンダラーコンポーネントを取得するために それが入る空箱を用意します。Mainの画像を最初に取得するのでMainという箱にしました。

SpriteRenderer Main;

箱にスプライトレンダラーコンポーネントをいれていきます。

Main = GetComponent<SpriteRenderer>();

またまた、フィールドに戻って今度は、入れ替える画像を入れる空箱を画像の分用意します。 わかりやすく a,b,c,s といった具合にしました。aにはAランクの画像 cにはCランクの画像 を登録していきましょう。

    public Sprite a;
    public Sprite b;
    public Sprite c;
    public Sprite s;

次に、得点(ネギの本数)により背景を入れ替えるスクリプトを組んでいきましょう。 If文でネギの本数が2より下の数ならCランクの画像をMainの画像と入れ替える、ネギの本数が2以上 かつ3以下ならBランクの画像をMainの画像と入れ替える。というIf文で制御します。評価を 出す作業は一度だけでいいのでStart関数に記述します。

if (negi < 2)
        {
            Main.sprite = c;
        }
        else if (2 <= negi && negi <= 3)
        {
            Main.sprite = b;
        }
        else if (4 <= negi && negi <= 5)
        {
            Main.sprite = a;
        }
        else if (6 <= negi)
        {
            Main.sprite = s;
        }

以上でスクリプトは記述が完了したので、画像の登録をドラックアンドドロップで行っていきます。 下記の画像のようにヒエラルキーウィンドウのnegimaaをクリックしてコンポーネントを確認してもらうと 画像を登録できるようになっているので、AのところにAランクの画像をという感じですべて登録してください。

出来たら再生してネギをある程度倒して、、あ、捕まえて確認してみましょう。
出来ていますか??

以上ですべての講座が終わりました。お疲れ様でしたぁ!!!


ホームへ