Unityでアプリ「イロドリ」を作る！

こんばんは。ひろし@Y.C.LABです。

今日はUnityを使って作ったアプリ「イロドリ」の作り方を書いていこうと思います。

(App Storeに飛びます)

イロドリでは、まず画面下に用意したImageオブジェクトにランダムで色を配置するところから始まります。

Unityで（C#で）ランダムな数を発生させるには、

UnityEngine.Random.Range (0f, 1.0f);

 とします。（）の中はランダムの数字の範囲。今回は、色を指定するから、0~1のfloat型。

あれ、255じゃないのって思った人、さすがです。

先日の記事にも書いたけど、RGBで色を表す時は0~255の数字を使うんです。

ただ、Unityでは、0~255を正規化して0~1として扱うんです。

で、作ったランダムな数字をred,green,blueに代入しておいて、画面の中のオブジェクトの色を変更させるのは、

GameObject.Find ("Canvas/pal1").GetComponent<Image> ().color = new Color (red, green, blue);

 とします。ここでは、Canvasの中にpal1というImageオブジェクトを置いています。

これを５つ繰り返して、その５つの色からまたランダムで３つの色を選びます。

それを先日の記事の通り混ぜることで、お手本の色を作っているわけです。

//1色目

red[1] = UnityEngine.Random.Range (0f, 1.0f);
green[1] = UnityEngine.Random.Range (0f, 1.0f);
blue[1] = UnityEngine.Random.Range (0f, 1.0f);
GameObject.Find ("Canvas/pal1").GetComponent<Image> ().color = new Color (red[1], green[1], blue[1]);

//2色目
red[2] = UnityEngine.Random.Range (0f, 1.0f);
green[2] = UnityEngine.Random.Range (0f, 1.0f);
blue[2] = UnityEngine.Random.Range (0f, 1.0f);
GameObject.Find ("Canvas/pal2").GetComponent<Image> ().color = new Color (red[2], green[2], blue[2]);

//順次3色目から5色目までを繰り返す。
・・・

//用意した5色の中からランダムな３色を選ぶ
i = UnityEngine.Random.Range (1, 5);
j = UnityEngine.Random.Range (1, 5);
k = UnityEngine.Random.Range (1, 5);

tar_red = (red[i]+red[j]+red[k])/3.0f;
tar_green = (green[i]+green[j]+green[k])/3.0f;
tar_blue = (blue[i]+blue[j]+blue[k])/3.0f;
GameObject.Find ("Canvas/target").GetComponent<Image> ().color = new Color (tar_red, tar_green, tar_blue); 

 これで、お手本となるtargetというオブジェクトにランダムで選んだ５色の中からさらにランダムで選んだ３色を混ぜた色がセットされたわけです。

ここで、混色の方法に先日の記事の方法を使っています。

次は、下に並べた５色のパレットをタッチすると選択できるところですが、ここは、Buttonコンポーネントを使っています。

Unityのオブジェクトを選択して、Inspectorの一番下にあるAdd Componentから、UI→Buttonを選択するとImageオブジェクトにButtonコンポーネントを追加できます。

先ほど作った５つの色をあてがったImageオブジェクトに追加していく感じですね。

Buttonの使い方は、スクリプトの中で、

public void OnClick1(){

・・・

}

のようにpublicの関数を作ってあげます。

この関数の中で、タッチされたら、上に用意した丸いオブジェクトの色をタッチしたオブジェクトの色に変更しているわけです。

スクリプトを用意したら、InspectorのButtonコンポーネントの中のこの部分で、Runtime Onlyの下の窓で、そのスクリプトを当てているオブジェクトを選択し、右の選択肢の中からさっき作成したpublicの関数を選択します。

これで、そのオブジェクトがタップされた時にスクリプトで記述した動作をするようになります。

set [1] = GameObject.Find ("Canvas/set1");
set [2] = GameObject.Find ("Canvas/set2");
set [3] = GameObject.Find ("Canvas/set3");
set [set_no].GetComponent<Image> ().color = new Color (red [1], green [1], blue [1]);
set [set_no].transform.Find ("sentaku").gameObject.SetActive (false);
set_no++;
if (set_no > 3) {
　　　　set_no = 1;
}
set [set_no].transform.Find ("sentaku").gameObject.SetActive (true);

ちなみにスクリプトの中身はこんな感じ。選択した色が表示される丸いオブジェクトはCanvas/set1~3というオブジェクトにしました。そこにタッチされたパレットの色を反映しています。

また、今アクティブになっている選択肢を表示するためにsentakuというオブジェクトを表示したり消したりしています。

アプリの中では緑の丸で今変更できる選択肢を示しています。

ここまでできれば、あとは、決定ボタンを押した時に選択されている３色を混ぜ合わせた色とお手本にしていた色の一致率を計算すれば完成です。

一致率は単純にRGBがそれぞれどれだけずれているかを計算してそれを掛け合わせています。

ittiritu = (1.0f - Mathf.Abs (set_red - tar_red)) * (1.0f - Mathf.Abs (set_green - tar_green)) * (1.0f - Mathf.Abs (set_blue - tar_blue)) * 100.0f;

 Unityで絶対値を扱いたい時は、上記の通り、Mathf.Absでできます。

とまぁ、こんな感じでとても簡単に「イロドリ」はできています。

って、全部中身書いちゃってるじゃん！って感じだけど、そんな難しいことしてるわけでもないし、この記事のどこかが参考になってもっと面白いアプリを作る人がいたらいいなと思って全部書きました。

参考になればいいなと思います。

また、ここはもっとこうした方がいいんじゃね？ってことがあれば是非是非連絡ください。

twitter.com

また近いうちに新しいアプリもリリースします！

それでは、おやすみなさい。。