ぼくの息抜き

ぼくの息抜き

気ままな二人が記事を書くことで息抜きしていくブログ

CSS MenuMaker

unity サクッと作れる 脳トレ系ゲームTapSmallNum

ついこの前unityでのアニメーションの簡単なやり方をテストした。

 

www.bokunoikinuki.com

 

学んだことを使って少しミニゲームを作ってみようと思う。

こんな脳トレ的ゲームを知っているだろうか。

f:id:bokunoikinuki:20180805221456p:plain

ランダムに数字があって小さい数字からタップしていくゲームだ。

ほんのちょっとおしゃれな放置ゲーム的要素も追加して、この『小さい数字を順番に見つけていく』ゲームを作ろうと思う。

正式名称がわからん。

命名は毎度適当だが、『小さい数字を順番に見つけていく』ゲーム。

TapSmallNumber

を作っていく。

さてTapSmallNumberを作っていく

アニメーションは転用

四角のImageの中に四角のアニメーション用Imageを入れて、タップされたら広がって消えるエフェクトだ。

文章じゃ伝えられない。

f:id:bokunoikinuki:20180805221852g:plain

下の番号を押した時のエフェクトだ。

エフェクトのAnimはこの時のを転用する。

Prefab化させて四角を9つ並べる

並べるのはさっきのgifでやったので、できないことない。

だが、番号をランダムにする方法だ。

まぁとりあえず、復習をかねて9つPrefabを並べるところから始めよう。

f:id:bokunoikinuki:20180805224406g:plain

うm。できた。並べるのは簡単だ。

public class GameManager07 : MonoBehaviour {

    // Use this for initialization
    void Start () {
        GameObject canvasBack = GameObject.Find ("CanvasBack");

        GameObject square = Resources.Load<GameObject> ("Prefabs/Square");

        for (int i = 0; i < 3; i++) {
            for (int j = 0; j < 3; j++) {
                var x = (i * 100) - 100; 
                var y = (j * 100) - 100;
                var pf = Instantiate<GameObject> (square);
                pf.transform.SetParent (canvasBack.transform, false);
                pf.transform.localPosition = new Vector3 (x, y, 0f);
            }
        }
    }

そしてタップしたら消えるようにしておいた。

以下squareというPrefabに紐づけているスクリプト

public class SquareManager : MonoBehaviour {

    Animation squareEffect;

    // Use this for initialization
    void Start () {
            
        Button btn = GetComponent<Button> ();
        btn.onClick.AddListener (TapSquare);
        squareEffect = transform.Find ("SquareEffect").GetComponent<Animation> ();
    }
    
    // Update is called once per frame
    void Update () {
        
    }

    void TapSquare () {
        squareEffect.Play ();
        Destroy (this.gameObject, 0.4f);

    }
}

数字を振る

数字を振ることに関してもアニメーションをテストしている時に作っている。

f:id:bokunoikinuki:20180805225047p:plain

生成順にuniqueNoをテキストに入れて表示すればいいだけだ。

ランダムに数字を表示させるには?

問題はランダムにはどうやって表示させるかというところだ。

実は頭の中での正解はあってそれが実際に使えるか試してみる。

listを使って9つ数字を入れて、ランダムに取り出すというやり方だ。

ランダムに取り出すのは

Random.Range (0, List.Count);

で行けると思っている。

取り出した数字はどんどん削除していく。

削除したらList.Countが自然と減っていくのでそれを9回繰り返して四角を生成するだけでいい。

Listは多分Prefab生成側のGameManagerで作った方がいい気がする。

できた

f:id:bokunoikinuki:20180809165831g:plain

思ったよりサクサクできてしまった。

時間と放置ゲーム的な感じでタッチした番号分ポイントが増えるようにした。1~9まで順番にタップしないと番号は消えない。

9まで消すと即リセットされる。

void CreateSquare () {
        // List生成
        for (int i = 1; i <= createSquareCount; i++) {
            squareNo.Add(i);
        }

        for (int i = 0; i < 3; i++) {
            for (int j = 0; j < 3; j++) {
                var x = (j * -100) + 100; 
                var y = (i * -100) + 100;
                var pf = Instantiate<GameObject> (square);
                pf.transform.SetParent (canvasBack.transform, false);
                pf.transform.localPosition = new Vector3 (x, y, 0f);

                var manager = pf.GetComponent<SquareManager> ();
                int num = SelectRandomNo();
                manager.SquareUniqueNo(num);
            }
        }
    }

 

int SelectRandomNo () {
        int a = UnityEngine.Random.Range (0, squareNo.Count);
        int b = squareNo[a];
        squareNo.RemoveAt(a);
        return b;
    }

四角の数を選べるように

ここまで作ったら四角数を自分で選べるようにしよう。

できた。

f:id:bokunoikinuki:20180809182853g:plain

今気がついたが、数を変更した時、時間がリセットされていない。直した。

ちなみにやったことを簡易的にまとめると

  • 四角の一辺の数を決めるボタンPrefabを作る
  • いい感じにボタンPrefabを表示するように
  • 四角が一辺の数によってきちんと中心で生成されるように
  • ボタンを押したら全部の四角を削除できるように
  • 削除後に一辺が新しく押されたボタンの数での四角を生成
  • 押されたら秒数がリセットされるように

振り返ると実際今まで習ったものだけで作れている。

アイデアさえあれば大抵のミニゲームなら作れる気がしてきた。

デザインは置いておいて。

 

 

この脳トレ × 放置ゲーム にして見たいけど、どういうインフレがあるんだろう。

とりあえず、もう少し見た目整えて脳トレとしてアプリ化させよう。