気ままなUnityエンジニアブログ

新米Unityエンジニアが送る解説アウトプットブログです。Twitter : @UjinUnity

MENU

【Unity ゲーム制作】神経衰弱ゲームを作ろう!〜その5 (カードを選択しよう!)

スポンサーリンク

今回は前回表示したカードオブジェクトを実体にタップ (クリック) してカードをめくる処理を作ってみましょう!

Card.prefabを編集しよう!

Unity 2018.3以降ですとPrefabを選択すると編集モードに切り替わります。

f:id:Wojtek:20190925122120p:plain


右上のOpenを押してみてください。


f:id:Wojtek:20190925122106p:plain


Prefabの中身が表示されました。
この状況では、PREFABに新しいコンポーネントを追加するなどの処理を行うことができます。
ただし、変更したら保存しないと反映さ」ないので注意しましょう。

それでは、Card.Prefabをいじってみましょう。


Card.prefabに 「Button」コンポーネントを追加する

下のAdd Componentを開いて「Button」と検索してください。

f:id:Wojtek:20190925121957p:plain


Buttonが導入できたいと思います。

ButtonのTransition を 「NONE」に変更しよう!

Transitionは遷移という意味になります。
初期設定のColoeTintはボタンが選択されたらオブジェクトの色を変化させる処理です。

今回は色を変化させる必要がないため、Transitionの機能をオフにしましょう。

Buttonの要素にある「Transition」をクリックしてNONEを選択してください。

f:id:Wojtek:20190925122021p:plain

f:id:Wojtek:20190925122010p:plain

画像の通りになったら成功です!

Card.csに カードを選択した 時の処理を記述しよう!

今度はソースコードに、カードが選択された時の処理を記載します。

Card.csに「OnClick」という関数を作成しましょう。

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

public class Card : MonoBehaviour {

    // カードのID
    public int Id;

    // 表示するカードの画像
    public Image CardImage;

    // 選択されているか判定
    private bool mIsSelected = false;

    // カードの設定
    public void Set (CardData data) {

        // IDを設定する
        this.Id = data.Id;

        // 表示する画像を設定する
        this.CardImage.sprite = data.ImgSprite;

        // 選択判定フラグを初期化する
        this.mIsSelected = false;

    }

    /// <summary>
    /// 選択された時の処理
    /// </summary>
    public void OnClick () {

        // カードが表面になっていた場合は無効
        if (this.mIsSelected) {
            return;
        }

        Debug.Log ("OnClick");

        // 選択判定フラグを有効にする
        this.mIsSelected = true;

    }
}

まずは 変数に bool型のisSelectedを追加しました。
初期設定の時はfalse (未選択)の状態にしておきます。

そして、カードが選択(めくられた)ときにtrue(選択)状態にしています。

Debug.Log は、Unityのコンソール画面にログを表示する関数です。

今回はクリックされたらそれを知らせるようにしております。

Onclick関数はクリックされたとき用の関数です。
これを先程のButtonのOnclickプロパティにアタッチしましょう!


f:id:Wojtek:20190927002025g:plain


まずはButtonのコンポーネントのOnClickをクリックします。
その後、Card.csをアタッチしましょう。

そうしたら、OnClickと書かれた右上のボタンを押し、出てきた一覧から「Card」→ OnClick()を選択してください。

f:id:Wojtek:20190927010051p:plain


f:id:Wojtek:20190927010201p:plain

上の画像の様になれば、ボタンをクリックした時に、OnClick関数が実行する様になりました。

それでは、Gameを起動して実際にカードをクリックしてみましょう!

f:id:Wojtek:20190926013416g:plain


上記の様にクリックしたらConsoleにログが出現したら成功です!