Unityでクイズアプリ(2)

前回は、シーン遷移まで行った。

Unityでクイズアプリ(1)
とにかく、クイズゲームを作りたい。 Unityがクイズゲームになんとなく向いていなさそうだとは思っていたが、そこに解説があったので、以...

前回に引き続き、以下のサイトを写経していく。

Labels:  iOS 投稿者:tsuyoshi
uGUIで簡単!Unityクイズアプリで社内コミュニケーションの活性化
2015.05.28
https://engineer.blog.lancers.jp/2015/05/ugui_quiz_unity/
image_thumb

ソースコードもこちらに公開してくださっていて、大変ありがたい!

なお、基本は、以下の本に沿ってやっていく。
Unityをやるときは、必ず、以下の本を読みながらやっている。

<Unityの流れ>
(1)プロジェクトの作成
(2)オブジェクトの配置
(3)スクリプトの作成
(4)スクリプトのアタッチ

(環境)
Windows8.1
Unity5.4.3f1
Visual Studio Community 2015

(1)クイズ問題画面(Quiz.unity)を作っていく。

今回は4個の選択肢の中から1個の正解を選ぶ形式とする。
●画像
●問題文
●回答1、回答2、回答3、回答4
を画面に配置する。

同じ機能を実装するためには、Unityでは、「Prefab」機能を使用するらしい。。。
(私には、けっこうちんぷんかんぷんですが、「オブジェクト指向」みたいな感じかな?(オブジェクト指向についてもよく分かっておりませんが、、、))

(2)Hierarchy タブにて、MainCameraの中にCanvasオブジェクトをドラッグ&ドロップ。

image

(3)さらに、Main Cameraを、Assetsタブの中に、ドラッグ&ドロップ。

image image

すると、図のように、Assetsタブの中に、「Main Camera Prefab」ができる。
(表示を小さくすると、青いキューブのような形になる。)

image image

(4)Project > Assets タブで、Quiz.unityをダブルクリックして、Quizシーンにした後、Assetsタブから、「Main Camera Prefab」を、Hierarchyタブにドラッグ&ドロップ。

image image

GameObject > UI > EventSystem をクリックすることにより、EventSystemを入れる。

image image

(5)UIを配置する。

●画像を配置する。
今回は、quiz_image を、Assetsタブから、Sceneタブへドラッグ&ドロップして、Inspectorタブで、位置や大きさを調整。

image image

●Hierarchyタブの、Main Camera > Canvas をクリックして、Canvas を Quiz に書き換える。

image

●ボタンの調整
Hierarchyタブから、Main Camera > Quiz > Button をクリックして、ButtonをAnsButton1に書き換える。
次に、 Main Camera > Quiz > AnsButton1 > Text をクリックして、Inspectorタブで、Text (Script)の text のところに、回答1 と記載する。

image image

Hierarchyタブから、Main Camera > Quiz > AnsButton1 を右クリックして、Duplicate をクリック。さらに2回、Duplicate する。

image image

image

AnsButton1(1)~(3)を、AnsButton2, AnsButton3, AnsButton4に書き換えて、Sceneタブを見ながら、それぞれのInspecotorタブで、位置などを調整。

●問題文の配置

GameObject > UI > Text で、テキストを挿入し、Inspectorタブで、位置や大きさを調整。

image image

image

その他、適宜、上記のように名前などを変更しておく。

(6)問題文と回答文を挿入

Assets > Create > C#Script から、QuizMgr というスクリプトを作成して、ダブルクリックして、Visual Studio で編集。

image image

image image

QuizMgr.cs を、Main Cameraにトラッグ&ドロップ(スクリプトをオブジェクトにアタッチ)

image image

実行ボタン(画面真ん中上の△ボタン)をクリックして、問題文が表示されることを確認する。

image image

同様に、回答(AnsButton)のラベルも変更する。

QuizMgr.cs を、以下のように書き換えてから、実行ボタンをクリックして確認。

image image

本当は、ここにデータベースなどの扱いなどを、とても知りたいのだが、今回は分からず。

(7)正誤判別を行う

Judge というスクリプトを作成し、以下のようにして保存。

image image

Judgeスクリプトを、AnsButton1, 2, 3, 4にアタッチする。

(7-1)Judge.cs を、Hierarchyタブの、AnsButton1にドラッグ&ドロップ。

image image

(7-2)AnsButton1をクリックして、Inspectorタブの、Button (Script) >On Click() のすぐ右下をクリックして、Judge > JudgeAnswer をクリック。

image image

(7-1)(7-2)の操作をAnsButton2, 3, 4にも行う。

実行ボタン(画面真ん中上の△ボタン)をクリックして、回答をクリックしていき、Consoleタブに、正解、や、不正解、などが表示されるか確認する。

image

(8)正誤判定画面へ遷移させる

File > New Sceneで、Result.unity で保存し、File > Build Setting にドラッグ&ドロップ。

image

HierarchyタブのMain Cameraを右クリックして、Delete

image

Assetsタブから、Main Camera Prefabを、Hierarchyタブの中へドラッグ&ドロップ。

image image

GameObject > UI > Event System で、EventSytemを設置。

image image

Assetsタブから、maru.png を、Sceneタブへドラッグ&ドロップして、Inspectorタブで、位置などを調整。JudgeImage という名前に変更。

image image

image

Canvas -> JudgeUI に変更。

image

●正解!不正解!の文字を表示するテキストを設置する。

GameObject  > UI > Text で、名前をJudgeLabel に変更。Inspectorタブで位置なども調整。Button を NextScene に変更し、そのTextも、「Next > 」に変更。

image image

image image

image

Judge.cs を編集。

image image

Quizシーンで、実行(△ボタン)して、選択肢をクリックすると、画面遷移(すべてが○となってしまうが)することを確認。

image image

長くなってきたので、続きは次回に。

<Unityでクイズアプリ(1)(2)(3)の写経元と、リンク>

Labels:  iOS 投稿者:tsuyoshi
uGUIで簡単!Unityクイズアプリで社内コミュニケーションの活性化
2015.05.28
https://engineer.blog.lancers.jp/2015/05/ugui_quiz_unity/
image_thumb_thumb

ソースコードはこちらに公開してくださっていて、大変ありがたい。

Unityでクイズアプリ(1)
とにかく、クイズゲームを作りたい。 Unityがクイズゲームになんとなく向いていなさそうだとは思っていたが、そこに解説があったので、以...

http://twosquirrel.mints.ne.jp/?p=13137   (このページ)

Unityでクイズアプリ(3)
前回は、Quizシーンから、Resultシーンへの画面遷移の途中まで行った。 前回に引き続き、以下のサイトを写経していく。 ...
関連記事
Count per Day
    Popular Posts
    スポンサーリンク

    シェアする

    • このエントリーをはてなブックマークに追加

    フォローする