こんにちは。松村です。
前回の続きで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/