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

こんにちは。松村です。

EZ GUIのUIScrollListの記事3回目です。

前回と前々回の記事はこちらです。

・その1(https://cshool.jp/blog/2011/11/4264.html
1.フォルダの整理
2.素材とUIScrollListの配置
3.カメラの設定

・その2(https://cshool.jp/blog/2011/11/4308.html
4.動的に配置するパーツの作成(Prefab)

今回はプログラミング部分でUIScrollList内にアイテムを表示させます。
以下のような手順で書いていきます。
———————————————————
● 5.メインロジックのプログラミング
  5-1.メインロジックのスクリプト作成
  5-2.他のGameObjectの参照方法
  5-3.ボタンからファンクションの呼び出し
  5-4.Tweeter APIのアクセス
  5-5.Prefabの動的配置
———————————————————

今回の完成形です

● 5.メインロジックのプログラミング

○ 5-1.メインロジックのスクリプト作成

今回のサンプルを制御するメインのスクリプトを書いていきます。
まずはGameObjectを作り、そこにスクリプトファイルを貼付けます。

1.GameObject -> Create EmptyでGameObjectを作成し、名前を「TwitterManager」とします。

2.Projectパネルを右クリックし、Create -> Javascriptを選択し、名前を「TwitterManager」とします。
 (今回はJavascriptでかいています。)

3.TwitterManagerのGameObjectを選択した状態で、TwitterManagerのスクリプトをInspectorパネルにドラッグします。
 (GameObjectもスクリプトも同じ名前だとややこしいので、違う名前にしてもいいかもですね。)

4.以下のようにTwitterManagerのGameObjectとスクリプトが結びつきます。
 InspectorパネルのTwitterManagerスクリプトを開くと、プログラミングが記述でるようになります。
 (僕の場合はMonoDevelopで作業しています。)

○ 5-2.他のGameObjectの参照方法

1.上で作ったTwitterManagerはツイート全体を表示させるためのUIScrollListと
ツイートひとつひとつをUIScrollListに追加させるためのアイテムを知っておく必要がありますので、
スクリプトにプロパティを書いておきます。

var itemPrefab:Transform;
var uiScrollList:UIScrollList;

2.保存してUnityに戻ると、2つのプロパティがInspectorパネルに表示されるので、

itemPrefabにProject内のTweetItemをドラッグ
uiScrollListにHierarchy内のTweetUIScrollListをドラッグ

します。
こうすることで、プログラミングでプロパティを通じで、それぞれのGameObjectにアクセスできます。
パネルで設定しなくても、プログラミングだけでもアクセスできるのですが、
どちらで行ってもいいです。

○ 5-3.ボタンからファンクションの呼び出し

ボタンが押されたらツイートを読み込みするようにしたいので、
ボタンからTwitterManager内のfuncitonを呼びだすようにします。
これはボタン側に設定します。

SendButtonのGameObjectを選択し、Inspectorパネル内の

・「Script With Method To Invoke」部分にTwitterManagerのGameObjectをドラッグ、
・「Method To Invoke」部分に「OnSnedButtonClick」と記述します。

これでボタンがおされるとTwitterManager内のOnSnedButtonClickファンクションが呼び出されます。

○ 5-4.Tweeter APIのアクセス

TwitterManagerのOnSnedButtonClickファンクションを以下のように書きます。
※日本語のコメントの書き方が分からないので、コード内では日本語を省いています。

JSONObjectについてはこちらに少し詳しく書いています。
https://cshool.jp/blog/2011/11/4119.html

function OnSendButtonClick() {
     SetTweetItems();    
}

function SetTweetItems() {
     // TwitterのSearch APIに接続
     var www:WWW = new WWW("http://search.twitter.com/search.json?q=unity");
    
     // 通信が返ってくるのを待つ
     yield www;
    
 // JSONObjectでresultの値を取得
     var json:JSONObject = new JSONObject(www.text);
     var results:JSONObject = json.GetField("results");
     var count:int = results.list.Count;
    
     for (var i=0; i<count; i++) {
          // ツイート情報を取得
          var tweet:JSONObject = results.list[i];
          var language:JSONObject = tweet.GetField("iso_language_code");
         
          // 日本語が文字化けしてしまうので、とりあえず削除しています。
          if(language.str != "ja") {
              
               // itemPrefabプロパティを通じて、TweetItemのGameObjectをインスタンス化
               var itemT:Transform = Instantiate(itemPrefab, new Vector3(0, -0, -1), Quaternion.identity) as Transform;
               var itemGO:GameObject = itemT.gameObject;
               var item:TweetItem = itemGO.GetComponent(typeof(TweetItem)) as TweetItem;
               item.SetTweet(tweet);

               // UIScrollListにアイテムを追加        
               uiScrollList.AddItem(itemGO);

          }
     }
}

ここでの重要なところは以下のところです。
Projectパネル内にあるTweetItemをインスタンス化し、UIScrollListに追加しています。
それらのGameObjectはそれぞれ「itemPrefab」「uiScrollList」というプロパティで、アクセスできるようになっています。

 var itemT:Transform = Instantiate(itemPrefab, new Vector3(0, -0, -1), Quaternion.identity) as Transform;
 var itemGO:GameObject = itemT.gameObject;
…
uiScrollList.AddItem(itemGO);

あとは、Prefab内のSetTweetを呼び出して、Prefab内で、情報を表示させます。
今のところは空っぽのTweetItemのPrefabがリスト内に表示されています。

ということで、次回はTweetItem内でツイートを表示させます。
あと1回でやっと完成です、、。


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

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