プログラミング初心者がunityでカードゲームを作ってみたい！【その4】〜カードチェンジスクリプト

前回(プログラミング初心者がunityでカードゲームを作ってみたい！【その3】〜カードを配置する - 社畜主婦の挑戦)の続きです。

カードの作成・配置ができたので、いよいよゲームを動かすための中身を作っていこうと思います。

【スポンサーリンク】

配置はこんな形でできています。グー・チョキ・パーのいずれかのカードをタップすると、上の恐竜カードがグー・チョキ・パーいずれかのカードにランダムに変化することにしたいです。

つまり、下の3枚のカードはボタンのような役割を担ってほしいのですが、そんなことができるのでしょうか。

どうやら画像をボタン代わりにする方法は2通りあるようです。

1.スプライトにコライダー(当たり判定)をつけて、イベントトリガーでクリック時にイベントを発生させる方法(下記参照)

【Unity】2DObjectのSpriteにクリック判定をつける方法 - はなちるのマイノート

2.GUIのボタンを作成し、ボタンの見た目に画像を設定する方法(下記参照)

Unity Buttonを好きな画像にする方法 Unity学習13 - Unityでゲーム、アプリ開発

今回は既にスプライトを配置しているので、1の方法を採用したいと思います。次の機会では2の方法も試してみます。

【スポンサーリンク】

グーのカードをボタンにする準備

まずはヒエラルキービューで右クリックしてUI→Event Systemを作成します。イベントトリガーを使用する場合は、シーン自体にこれを追加する必要があるみたいですね。

次にヒエラルキービューのMain Cameraをクリックし、インスペクタビューのAdd ComponentからPhysics 2DRayCasterをアタッチします。rayは光線という意味で、レイキャスターはカメラから見えない光線を出して、コライダーが設定してあるオブジェクトに衝突した場合にその情報を返してくれる便利な機能です。

次にレイキャスターに反応してもらうために、グーのカードにコライダー(当たりの判定)を付けます。ヒエラルキービューからグーのオブジェクトをクリックし、インスペクタビューのAdd Componentから2dのBox Colliderをアタッチして、Edit Colliderでコライダーの大きさを調整します。これでタップ時に反応する下準備ができました。

さらにAdd Componentをクリックし、今度はEventからEvent Triggerをアタッチします。Add New Event TypeからPointer Downを選択すると、オブジェクトや関数を指定するボックスが出てきます。ここにスクリプトの関数を指定すれば、タップ時にイベントを発生させることができるようです。

【スポンサーリンク】

カードチェンジスクリプト

下準備は完了したので、スクリプトでカードを変化させる関数を作りたいと思います。

プロジェクトビューで右クリックし、C#スクリプトを作成します(GuScriptと名付けました)。ダブルクリックするとエディターが起動するので、早速書いていきます！

ここからは以下の動画を参考にしつつ作っていきます。

書いたコードはこんな感じです。部分ごとに解説していきたいとおもいます。

1. using System.Collections;
2. using System.Collections.Generic;
3. using UnityEngine;
4.  
5. public class GuScript : MonoBehaviour
6. {
7.     public Sprite cardBack;
8.     // アウトレット接続（インスペクタ上で設定）するcardBackという名前のスプライトの宣言
9.     public Sprite[] faces;
10.     // アウトレット接続するfacesという名前のスプライトの配列の宣言
11.     public GameObject Card;
12.     // アウトレット接続するCardという名前のゲームオブジェクトの宣言
13.     public bool show;
14.     // アウトレット設定するshowという名前のブール値の宣言（初期値はfalse）
15.  
16.     SpriteRenderer spriteRenderer;
17.     // spriteRendererという名前のスプライトの宣言
18.  
19.    
20.     void Awake()
21.     {
22.         spriteRenderer = Card.GetComponent<SpriteRenderer>();
23.         // spriteRendererにCardのスプライトを代入
24.     }
25.  
26.     // イベントトリガーに設定するために、publicの関数を作成
27.     public void ToggleFace()
28.     {
29.         // もしカードが裏面（初期値）だったら
30.         if (show == false)
31.         {
32.             spriteRenderer.sprite = faces[Random.Range(0, faces.Length)];
33.             // cardのスプライトにfacesのカードにランダムに代入する
34.             show = true;
35.             // 再度グーをタップした時にcardが変化しないように、showをtrueにしておく
36.         }
37.     }
38.  
39. }

上3行の定型文はデフォルトで記述されており、Unityの機能を使うのに必要です。GuScriptクラスの中身を見ていきます。

1.     public Sprite cardBack;
2.     // アウトレット接続（インスペクタ上で設定）するcardBackという名前のスプライトの宣言
3.     public Sprite[] faces;
4.     // アウトレット接続するfacesという名前のスプライトの配列の宣言
5.     public GameObject Card;
6.     // アウトレット接続するCardという名前のゲームオブジェクトの宣言
7.     public bool show;
8.     // アウトレット設定するshowという名前のブール値の宣言（初期値はfalse）
9.  
10.     SpriteRenderer spriteRenderer;
11.     // spriteRendererという名前のスプライトの宣言

ここでは関数に使うオブジェクトなどを宣言しています。publicが付いているものはGuのオブジェクト外から持ってくる(アウトレット接続)ので、この後インスペクタビューで指定します。

publicが付いていないspriteRendererはこの後このスクリプト内で代入します。

ではまずアウトレット接続をしていきます。一旦スクリプトをセーブしてunityに戻ります。今作っているプロジェクトビューのGuScriptをヒエラルキービューのGuへドラッグ&ドロップするとスクリプトがアタッチされます。

Guをクリックしインスペクタビューを見るとGuScriptの欄に先程publicで宣言した4つのものが指定できる部分があるので、ここに画像やオブジェクトを指定していきます。

まずcardBackは右側の丸から恐竜のカード(カード裏面)を指定します。

次にCardはヒエラルキービューのCardオブジェクトをドラッグ&ドロップします。

showについてはブール値で、デフォルトをFalseにしたいのでチェックが外れたままでOKです。

問題はfacesです。グー・チョキ・パーの3枚のカードを指定したいのですが、プロジェクトビューのカードをクリックするとインスペクタビューがカードのものに切り替わってしまいます。そこで、グーのインスペクタビュー右上の南京錠マークをクリックして鍵が閉まった状態にするとインスペクタビューを固定することができます。この状態でプロジェクトビューのカードの三角からグーをクリックし、shiftを押したままパーをクリックして3つのカードを選択できたらインスペクタビューのfacesにドラッグ&ドロップします。これでアウトレット接続が完了しました！！

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

1.     void Awake()
2.     {
3.         spriteRenderer = Card.GetComponent<SpriteRenderer>();
4.         // spriteRendererにCardのスプライトを代入
5.     }

ここではAwake (ゲーム起動時)に、先程宣言したspriteRendererにCardオブジェクトのスプライトを代入しています。CardオブジェクトはこのスクリプトをアタッチしているGuとは別のオブジェクトですが、きちんと宣言してアウトレット接続を行っているので呼び出すことができました。

【スポンサーリンク】

1.     // イベントトリガーに設定するために、publicの関数を作成
2.     public void ToggleFace()
3.     {
4.         // もしカードが裏面（初期値）だったら
5.         if (show == false)
6.         {
7.             spriteRenderer.sprite = faces[Random.Range(0, faces.Length)];
8.             // cardのスプライトにfacesのカードにランダムに代入する
9.             show = true;
10.             // 再度グーをタップした時にcardが変化しないように、showをtrueにしておく
11.         }
12.     }

ここからが本題の、イベントトリガーに設定するToggleFaceという関数です。

showの値 (true、false )でカードが裏面であるかを判断し、裏面だったらCardオブジェクトのスプライトをグー・チョキ・パーのいずれかの画像に差し替える処理を書いています。

Random.Rangeは指定した数字の中からランダムなものを返してくれる便利な関数です。整数の場合引数1以上、引数2未満の中から返してくれます。facesの配列は0 (グー)、1 (チョキ)、2(パー)の3つなので、引数1を0、引数2をfaces.Length (配列の大きさ＝3)として、0・1・2のいずれかを返してくれるようにしています。

これでスクリプトが完成しました！！

早速イベントトリガーに関数を指定してみます！スクリプトを保存してunityに戻ります。Guのインスペクタに追加してあるEvent TriggerのPointer Downにある +をクリックします。左下の四角にヒエラルキービューのGuをドラッグ&ドロップし、右のリストボックスからGuScript→ToggleFaceを選択します。

これでOK！

ゲームを再生してみます。

グーのカードをクリックすると・・・

上のカードがランダムに変化しました！！上手くいきました〜。

次は、カードが変化する際のアニメーションを付けていきたいと思います！

じゃんけんゲーム作成の流れ→初心者がiPhoneアプリを作ってみる〜じゃんけんゲーム〜 - 社畜主婦の挑戦

【スポンサーリンク】