[Unity] EZ GUIについて(UIScrollListの使い方:その2)

こんにちは。松村です。

前回の続きでEZ GUIのUIScrollListの使い方について説明していきます。

前回(その1)の内容はこちら(https://cshool.jp/blog/2011/11/4264.html)で、以下のようなことを行いました。

1.フォルダの整理
2.素材とUIScrollListの配置
3.カメラの設定

今回はツイートを動的にUIScrollListに配置するためのPrefab作成方法を紹介します。

———————————————————
● 4.動的に配置するパーツの作成(Prefab)
 4-1.アイテムの作成
 4-2.画像の作成
 4-3.テキストエリアの作成
 4-4.TweetItemにUIListItemContainerを関連づける
 4-5.TweetItemをPrefabにする
 4-6.Prefabの編集
———————————————————

今回の完成形です

● 4.動的に配置するパーツの作成(Prefab)

Twitterサーチで検索したTweetの数は動的に変わるので、
リスト内に配置するアイテムも動的に変更できるようにします。
それをするにはリスト内アイテムはPrefabにしてProjectパネルに置いておき、
プログラミングで配置します。

○ 4-1.アイテムの作成

ひとつのTweetにユーザのアイコン、日付、Tweetを表示させたいので、
以下のようにそれぞれGameObjectを作成します。
GameObjectを作成した後は、それぞれをTweetItemにネストするようにします。
(それぞれのGameObjectをTweetItemにドラッグすればネストします。)

・TweetItem:全体をまとめる箱
・TweetDateField:日付を表示するテキストエリア
・TweetTextField:ツイートを表示するテキストエリア
・TwitterItemBg:アイテムの背景
・UserIcon:ユーザアイコン表示部分

○ 4-2.画像の作成

TwitterItemBgには背景画像を、UserIconにはアイコン表示する土台となる画像を作成します。
どちらも画像を表示するだけなので、板ポリでいいんですが、
僕は板ポリを他の3Dソフトで加工できないので、EZ GUIのUIButtonで作成しました。
(Unity内での3Dモデルを作成して貼付けるのでもいいのですが、
Unityの3Dオブジェクトは頂点の数が多いので、実案件だと重くなる可能性が高いです。)

※ UIButtonの作り方は下記に紹介しています。
EZ GUIについて(ボタン)

○ 4-3.テキストエリアの作成

Unityはテキストまわりは少しやっかいです。Flashのようにテキストエリアを作って、フォントを指定して終わりではなく、
テキストを表示するためのテキストデータとそれを表示するためのMaterialが必要になります。
EZ GUIにはそれらが用意されていますので、今回はそちらを使います。

1.TweetTextFieldのGameObjectを選択します。

2.Plugins -> Sprite Scripts -> SpriteTextをドラッグし、TweetTextFieldに貼付けます。

3.Plugins -> AnBSoft Common -> Standart Font -> Arial, Fancy(Text Asset)を
SpriteTextのfont部分にドラッグします。

4.Plugins -> AnBSoft Common -> Standart Font -> Arial, Fancy(Shader)を
Mesh RendererのMaterial部分にドラッグします。

5.Sprite Textパネルでフォントサイズ(Character Size)、
フォントカラー(Color)、折り返しの長さ(Max Width)などを設定します。

※ 日付を表示するTweetDateFileldも同様の作業を行います。

○ 4-4.TweetItemにUIListItemContainerを関連づける

TweetItemを選択し、Plugins -> EZ -> GUI -> Controls -> UIListItemContainerをInspectorパネルにドラッグします。
これがないとUIScrollList内で並んでくれません。

○ 4-5.TweetItemをPrefabにする

すべての部品を内包しているTweetItemのGameObjectを
HierarchyパネルからProjectパネルへドラッグします。
(ドラッグする場所はどこでもいいです。)

そうすると、Projectパネル内にTweetItemのPrefabができ、Hierarchyパネル内のGameObjectは青色に変わります。
これでPrefabができました。
Hierarchyパネルから削除しても、大丈夫です。

○ 4-6.Prefabの編集

Prefab内のGameObjectの設定や位置などを変更したい場合は、
Hierarchy上で編集を行います。
そのあと、Inspectorパネル上部の「Apply」ボタンを押します。
それを押すことで、編集内容がProjectに反映されます。

svnで複数人開発などをしているときに、同じシーンを複数人で開発することもあるのですが、この方法を使うと、Prefabのみの変更をsvnにコミットできます。

ということで、やっとすべてのパーツの準備ができました。
次はいよいよプログラミングです。


・Unityで作ったiPhone、Androidアプリ”みそだ教授の「おミソわけ」”をリリースしました!
http://cshool.co.jp/apps/misodajump/jp/

・クスール学校事業部で3Dコンテンツの開発プロセスを基礎から学ぶ「Unity講座」やっています。
http://www.cshool.jp/course/unity/