Unity13

Resources

Resourcesというフォルダを作ってそこにファイルを格納しておくとファイルをアプリで利用できる。さっそくやってみよう。

プロジェクトの作成

1.ResourcesLoadLessonという新しいプロジェクトを2Dモードで作成する。
2.プロジェクトのAssetsフォルダ内でCreate->FolderとしてResourcesという特殊な名前のフォルダを作成する。

3.以下からzipファイルをダウンロードする。

4.解凍後、３つのファイルをResourcesフォルダにD&Dで入れる。

カメラの設定

5.カメラを以下のように設定する。

6.Gameタブから解像度を２：３に設定する。

Canvasの設置

7.uGUIはCanvasオブジェクトを配置することから始める。

8.Canvasの最適化をしよう。以下のように設定する。640＊960を基準としているがこうしてると異なる画面サイズでもうまいこと表示してくれる。

スクロールするTextを作成する

9.スクロールするコンテンツを作成するためにまずはCanvasの子要素としてPanelを作成し、以下のように設定する。

10.Panelの子要素としてTextを作成し、MainTextとリネームする。

11.最終的には動的にファイルを読み込むがまずは、MainTextのtextのところにStory1の内容を貼り付け、その他項目を以下のように調整する。

12.　実行して確認してみよう。下のように下が切れてしまっている。

13.スクロールできるようにしよう。まずはMainTextにAddComponentからLayout->ContentSizeFitterを付与し、VerticalFitをPreferredSizeに変更する。

14.領域をはみ出して表示されるようになった。まずはマスクをかけてはみ出た部分を非表示にする。親コンテンツのPanelにAddComponentからUI->Maskを付与する。
15.スクロールできるようにする。それには親要素であるPanelにAddComponentからUI->ScrollRectを付与し、以下のように設定する。

16.実行してみよう。コンテンツをドラッグするとスクロールする。

ScrollBarの付与

17.スクロールできるコンテンツであることを知らせるためにスクロールバーを付与する。Canvasの子要素にScrollBarを作成する。


18.スクロールバーとスクロールの紐付けを行う。Panelを選択し、ScrollRectコンポーネントを以下のように設定する。

19.実行して確認、スクロールバーが機能するようになった。

見た目の調整

20.スクロールハンドルがわかりづらいので調整する。まずはScrollBarの子要素のHandleを選択する。

21.インスペクターからColorを選択し好きな色に設定する。

22.MainTextの背景色はPanelのImageから行う。今回はSourceImageをNoneにして色味を以下のように調整した。

ボタンの作成

23.下部にボタンを３つ作成する。整列させるためにまずは親要素としてPanelを作成し、ButtonPanelとリネームする。

24.インスペクターから以下のように設定する。Imageコンポーネントは使わないので削除してよい。

25.ButtonPanelにAddComponentから　Layout->HorizontalLayoutGroupを付与し、以下のように設定する。このように設定することで等間隔に整列する。

26.ButtonPanelの子要素としてButtonを作成する。位置がずれているのでインスペクターから以下のように調整する。(LeftTopは変わらないが、位置が修正される）

27.まるボタンにしよう。ImageをKnobに変更する。

28.ボタンの大きさや色を変更する。

29.Buttonの子要素のTextを以下のように設定する。

スクリプトの作成

30.CanvasController.csを以下のように作成し、Canvasにアタッチする。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class CanvasController : MonoBehaviour {

	TextAsset txtAsset;
	RectTransform mtRt;
	Text mtText;


	void Start () {
		GameObject mainText = GameObject.Find ("MainText");
		mtRt = mainText.GetComponent<RectTransform> ();
		mtText = mainText.GetComponent<Text> ();
	}


	public void BtClick(string fileName){
		//Resourcesから引数で指定されたファイルを読み込む
		txtAsset= Resources.Load (fileName) as TextAsset;
		//スクロールを先頭に戻す処理
		Vector3 vec = mtRt.localPosition;
		vec.y = 0;
		mtRt.localPosition = vec;
		//ファイルの内容をtextに反映
		mtText.text = txtAsset.text;

	}
}

31.ButtonのButtonコンポーネント下部にある+ボタンを押してOnClick属性を設定する。まずはヒエラルキーにあるCanvasを登録、そしてプルダウンからCanvasControllerにあるBtClickを選択。最後に引数としてStory1を渡す。

32.MainTextオブジェクトのtextはもう不要なので削除する(最初に貼り付けたももたろうの話)。

33.実行してみよう。ボタンを押すとStory1が読み込まれれば成功だ。

ボタンの複製

34.ボタンを複製して３種類のStoryを選択できるようにしよう。ヒエラルキーにあるボタンをDupulicateを選択してボタンを３つにする。ボタンは自動的に整列される。

35.二つ目のボタンのtextをStory2に変更する。

35.二つ目のボタンのOnclick属性の引数をStory2に変更する。

36.3つ目のボタンにも同様の変更を施しそれぞれStory3に変更する。

動作確認

37.実行してみよう。動画のようにボタンを選択するとお話が読み込まれれば成功だ。