Unityでクイズアプリ（２）
前回は、シーン遷移まで行った。
http://twosquirrel.mints.ne.jp/?p=13021
前回に引き続き、以下のサイトを写経していく。
Labels: iOS 投稿者：tsuyoshi
uGUIで簡単！Unityクイズアプリで社内コミュニケーションの活性化
2015.05.28
https://engineer.blog.lancers.jp/2015/05/ugui_quiz_unity/
ソースコードもこちらに公開してくださっていて、大変ありがたい！
なお、基本は、以下の本に沿ってやっていく。
Unityをやるときは、必ず、以下の本を読みながらやっている。
＜Unityの流れ＞
（１）プロジェクトの作成
（２）オブジェクトの配置
（３）スクリプトの作成
（４）スクリプトのアタッチ
(環境)
Windows8.1
Unity5.4.3f1
Visual Studio Community 2015
（１）クイズ問題画面（Quiz.unity）を作っていく。
今回は4個の選択肢の中から1個の正解を選ぶ形式とする。
●画像
●問題文
●回答１、回答２、回答３、回答４
を画面に配置する。
同じ機能を実装するためには、Unityでは、「Prefab」機能を使用するらしい。。。
（私には、けっこうちんぷんかんぷんですが、「オブジェクト指向」みたいな感じかな？（オブジェクト指向についてもよく分かっておりませんが、、、））
（２）Hierarchy タブにて、MainCameraの中にCanvasオブジェクトをドラッグ＆ドロップ。
（３）さらに、Main Cameraを、Assetsタブの中に、ドラッグ＆ドロップ。
すると、図のように、Assetsタブの中に、「Main Camera Prefab」ができる。
（表示を小さくすると、青いキューブのような形になる。）
（４）Project > Assets タブで、Quiz.unityをダブルクリックして、Quizシーンにした後、Assetsタブから、「Main Camera Prefab」を、Hierarchyタブにドラッグ＆ドロップ。
GameObject > UI > EventSystem をクリックすることにより、EventSystemを入れる。
（５）UIを配置する。
●画像を配置する。
今回は、quiz_image を、Assetsタブから、Sceneタブへドラッグ＆ドロップして、Inspectorタブで、位置や大きさを調整。
●Hierarchyタブの、Main Camera > Canvas をクリックして、Canvas を Quiz に書き換える。
●ボタンの調整
Hierarchyタブから、Main Camera > Quiz > Button をクリックして、ButtonをAnsButton1に書き換える。
次に、 Main Camera > Quiz > AnsButton1 > Text をクリックして、Inspectorタブで、Text (Script)の text のところに、回答1 と記載する。
Hierarchyタブから、Main Camera > Quiz > AnsButton1 を右クリックして、Duplicate をクリック。さらに2回、Duplicate する。
AnsButton1(1)~(3)を、AnsButton2, AnsButton3, AnsButton4に書き換えて、Sceneタブを見ながら、それぞれのInspecotorタブで、位置などを調整。
●問題文の配置
GameObject > UI > Text で、テキストを挿入し、Inspectorタブで、位置や大きさを調整。
その他、適宜、上記のように名前などを変更しておく。
（６）問題文と回答文を挿入
Assets > Create > C#Script から、QuizMgr というスクリプトを作成して、ダブルクリックして、Visual Studio で編集。
QuizMgr.cs を、Main Cameraにトラッグ＆ドロップ（スクリプトをオブジェクトにアタッチ）
実行ボタン（画面真ん中上の△ボタン）をクリックして、問題文が表示されることを確認する。
同様に、回答（AnsButton）のラベルも変更する。
QuizMgr.cs を、以下のように書き換えてから、実行ボタンをクリックして確認。
本当は、ここにデータベースなどの扱いなどを、とても知りたいのだが、今回は分からず。
（７）正誤判別を行う
Judge というスクリプトを作成し、以下のようにして保存。
Judgeスクリプトを、AnsButton1, 2, 3, 4にアタッチする。
（７－１）Judge.cs を、Hierarchyタブの、AnsButton1にドラッグ＆ドロップ。
（７－２）AnsButton1をクリックして、Inspectorタブの、Button (Script) >On Click() のすぐ右下をクリックして、Judge > JudgeAnswer をクリック。
（７－１）（７－２）の操作をAnsButton2, 3, 4にも行う。
実行ボタン（画面真ん中上の△ボタン）をクリックして、回答をクリックしていき、Consoleタブに、正解、や、不正解、などが表示されるか確認する。
（８）正誤判定画面へ遷移させる
File > New Sceneで、Result.unity で保存し、File > Build Setting にドラッグ＆ドロップ。
HierarchyタブのMain Cameraを右クリックして、Delete
Assetsタブから、Main Camera Prefabを、Hierarchyタブの中へドラッグ＆ドロップ。
GameObject > UI > Event System で、EventSytemを設置。
Assetsタブから、maru.png を、Sceneタブへドラッグ＆ドロップして、Inspectorタブで、位置などを調整。JudgeImage という名前に変更。
Canvas -> JudgeUI に変更。
●正解！不正解！の文字を表示するテキストを設置する。
GameObject > UI > Text で、名前をJudgeLabel に変更。Inspectorタブで位置なども調整。Button を NextScene に変更し、そのTextも、「Next > 」に変更。
Judge.cs を編集。
Quizシーンで、実行（△ボタン）して、選択肢をクリックすると、画面遷移（すべてが○となってしまうが）することを確認。
長くなってきたので、続きは次回に。
＜Unityでクイズアプリ（１）（２）（３）の写経元と、リンク＞
Labels: iOS 投稿者：tsuyoshi
uGUIで簡単！Unityクイズアプリで社内コミュニケーションの活性化
2015.05.28
https://engineer.blog.lancers.jp/2015/05/ugui_quiz_unity/
ソースコードはこちらに公開してくださっていて、大変ありがたい。
http://twosquirrel.mints.ne.jp/?p=13021