プログラミング初心者がunityでカードゲームを作ってみたい！【その6】〜u GUIで勝敗判定表示

前回 (プログラミング初心者がunityでカードゲームを作ってみたい！【その5】〜カードチェンジアニメーション - 社畜主婦の挑戦)の続きです。

今回はuGUIというUnityのUI (ユーザーインターフェース)を使って、ゲームの判定と調整をしたいと思います。

具体的には、

1.選択していないチョキ・パーの画像を非表示にする

2.勝敗を判定してテキストで表示

3.勝敗を判定したら再挑戦できるようにリセットボタンを作る

の流れで行っていきます。

【スポンサーリンク】

GUIの作成

今回使用するGUIはテキストとボタンです。

まずはヒエラルキービューで右クリックし、UIからTextを作成します。名前をJudgmentとします。

f:id:hot_houjitea:20210212181510j:image

ダブルクリックしてみると、今まで編集していたゲーム画面よりとても大きいサイズで作成されているのがわかりますが、GUIの編集画面はゲーム画面のものとスケールが異なるので、ゲームビューに切り替えながら調整していきます。ゲームビューでみると逆に小さく見えますがこれが実際プレイするときに見えるサイズです。インスペクタビューのRect Transform欄で位置とサイズを調整します。

f:id:hot_houjitea:20210212181540j:image

サイズが小さいとフォントサイズによってはテキストが見えなくなるのでシーンビューにも切り替えながら調整します。

f:id:hot_houjitea:20210212181552j:image

Textコンポーネントのparagraph欄で中央揃えにし、font size欄で文字の大きさを変更します。

f:id:hot_houjitea:20210212181607j:image

text欄には初期値として「なにをだす？」と入力しました。

次にヒエラルキービューでUIからbuttonを作成 (Resetと名付けました)し、インスペクタビューで位置・大きさの調整をします。

また、ボタンの配下にある textも先程の要領で調整し、text欄には「Reset」と入力しました。

このボタンは最初は表示させず、勝敗が決定した際に表示させたいため、インスペクタビューの左上にあるチェックボタンを解除して非表示にしておきます。

f:id:hot_houjitea:20210212181735j:image

これでGUIの下準備は完了です。

【スポンサーリンク】

GuScriptの変更

プロジェクトビューのGuScriptを開きます。ここからGUIを動作させるためのプログラムを書いていきます。

全体のスクリプトについては長いのでこちらに記事を作っています。

【コードのみ】GuScript - 社畜主婦の挑戦

以下のように変更しました。変更点を説明していきます。

using UnityEngine.UI; // UIを使う際は記載する

まずはクラスの外にUIの機能をインポートしています。UIを利用する場合は記載が必要です。

public Text Judgment;
// アウトレット接続するJudgmentという名前のテキストの宣言
public GameObject Reset;
// アウトレット接続するResetという名前のボタンの宣言
public GameObject Tyoki;
// アウトレット接続するTyokiという名前のゲームオブジェクトの宣言
public GameObject Pa;
// アウトレット接続するPaという名前のゲームオブジェクトの宣言

次に宣言を4つ増やしています。

テキストは勝敗判定、ボタンはリセットのため、チョキとパーのオブジェクトはグーを選択した際に非表示にするために必要です。

ボタンについては SetActive (表示関数)のみ使用するため、ゲームオブジェクトとして取り込みます。

ここまで書いたらセーブして一旦 GuオブジェクトのGuScript欄でアウトレット接続します。

f:id:hot_houjitea:20210212181802j:image

それぞれの欄にヒエラルキービューから同名のオブジェクトをドラッグ&ドロップします。

ここでまたスクリプトに戻ります。

【スポンサーリンク】

1.選択していないチョキ・パーの画像を非表示にする

Tyoki.SetActive(false);
// チョキを非表示
Pa.SetActive(false);
// パーを非表示

SetActive関数は引数trueでオブジェクト表示、falseで非表示にします。グーを選択しているので、ここで関係のないチョキ・パーのオブジェクトを非表示にしています。

2.勝敗を判定してテキストで表示

if(spriteRenderer.sprite == faces[0]) // もしCardのスプライトがfaces[0]（グー）なら
{
Judgment.GetComponent<Text>().text = "あいこだよ！";
//　Judgmentのテキストに「あいこだよ！」と表示
}
else if(spriteRenderer.sprite == faces[1])　// もしCardのスプライトがfaces[1]（チョキ）なら
{
Judgment.GetComponent<Text>().text = "あなたのかち！";
//　Judgmentのテキストに「あなたのかち！」と表示
}
else　// それ以外（パー）なら
{
Judgment.GetComponent<Text>().text = "あなたのまけ！";
//　Judgmentのテキストに「あなたのまけ！」と表示
}

ここで勝敗判定をしています。Cardオブジェクトのスプライトがfaces[0](グーのカード)ならあいこ、faces［1］(チョキ)なら勝ち、faces［1］(パー)なら負けの文言をテキストUIのテキストコンポーネントを取得してテキスト欄に代入しています。

3.勝敗を判定したら再挑戦できるようにリセットボタンを作る

Reset.SetActive(true);

ここでリセットボタンの非表示をしています。SetActive関数はボタンをUIとして宣言していると使えないので注意です。

ここまでで GuScriptの変更ができました！

次はリセットボタンを押すとシーンを再ロードしてゲーム起動時に戻せるようにしたいと思います。

【スポンサーリンク】

リセットボタンの設定

リセットボタンの内容についてはボタンのオブジェクトにアタッチしたいため、プロジェクトビューで右クリックし、新しく C#スクリプトを作成します。(ResetButtonとします。)

中身を以下のように書きます。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement; // シーンを制御する際は記載
public class ResetButton : MonoBehaviour
{
public void ResetScene()
{
SceneManager.LoadScene("Janken");
// シーンを再読み込み
}
}

シーンを扱う際はシーンの機能のインポートが必要です。

関数でシーンをリセットします。 Scene ManagerクラスのLoadScene(シーン名)関数で、シーンの再ロードができます。

スクリプトをセーブしたら、プロジェクトビューのResetButtonスクリプトをヒエラルキービューのResetにドラッグ&ドロップしてアタッチします。これだけではクリック時に関数が作動しないので、ResetのインスペクタビューにあるOn Click欄の右下の＋をクリックします。関数を登録する欄が出てくるので、左下の四角にヒエラルキービューのResetをドラッグ&ドロップします。右のNo FunctionからResetScene関数を選べば完了です！

f:id:hot_houjitea:20210212181632j:image