[Unity] EZ GUIについて（UIScrollListの使い方：その４）

開発メモ

こんにちは。松村です。

EZ GUIのUIScrollListの記事４回目です。
今回でUIScrollListの内容は終わりになるかと思います。（多分）

以前の記事はこちらです。

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

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

・その３（https://cshool.jp/blog/2011/11/4340.html）
5.メインロジックのプログラミング

今回はScrollList内アイテムにツイートを表示させます。
以下のような手順で書いていきます。
———————————————————
●　6.ツイートを表示するプログラミング
　6-1.GameObjectへのスクリプトの貼付け
　6-2.プロパティの設定
　6-3.JSONObjectの解析
　6-4.外部画像の貼付け
———————————————————

今回の完成形です

●　6.ツイートを表示するプログラミング

○　6-1.GameObjectへのスクリプトの貼付け

前々回（その２）でTweetItemのGameObjectを作ったのですが、
このGameObjectにスクリプトを貼付けます。

Projectパネルを右クリック -> Create -> Javascriptで新しいスクリプトを作成します。
名前を「TweetItem」とし、TweetItemのGameObjectに貼付けます。

○　6-2.プロパティの設定

TwitterManagerと同じく、アクセスしたいGameObjectの参照ができるようにプロパティを設定します。

// アイコンを表示する
var userIcon:GameObject;
// 日付を表示する
var tweetDateField:SpriteText;
// ツイートを表示する
var tweetTextField:SpriteText;
// アイコンを取得するためのWWWクラス
var imgWWW:WWW;
// ツイートが長いときに削除するための値
var tweetMaxLength:int = 80;

○　6-3.JSONObjectの解析

前回（その３）でTweetItemスクリプトのSetTweetファンクションを呼び出し、
そこで各ツイートを表示することにしました。
SetTweetのファンクションには日付、ツイート、アイコンのURLを含んだJSONObject
そのものを引数で渡しています。

function SetTweet(tweet:JSONObject) {
    // 日付の表示
     var tweetDate:JSONObject = tweet.GetField("created_at");
     tweetDateField.Text = tweetDate.str;
    
     // ツイートの取得
     var tweetText:JSONObject = tweet.GetField("text");
    
     // ツイートが長いときに途中で削除する
     var tweetLength:int = tweetText.str.Length;
     var maxLength;
     if(tweetLength > tweetMaxLength){
          maxLength = tweetMaxLength;
     } else {
          maxLength = tweetLength;
     }
     var tweetStr:String = tweetText.str.Substring(0, maxLength);
    // ツイートの表示
     tweetTextField.Text = tweetStr;
    
     // アイコン画像の取得
     var image:JSONObject = tweet.GetField("profile_image_url");
     imgWWW = new WWW(image.str);
}

○　6-4.外部画像の貼付け

6-3でひとつ抜けているのが、アイコン画像の表示です。
画像を取りにいくまでは書いているのですが、表示は書いていません。
本来ならばimgWWWのあとにyieldを書いて、画像取得のレスポンスを待ち、
その後に貼付ければいいのですが、どうもこれではうまく行かないことがあります。
（すみません、理由はあまりよくわかっていないです。）

この場合は、updateファンクションを使い、imgWWWに値が来たのを確認して、
userIconのGameObjectに画像は貼付けます。
ちょっとこのやり方が正しいのかあまり分かっていないところもあるのですが、
一応動いています、、。

function Update() {
     // imgWWWに値が来たのを確認して、テクスチャを書き換える
     if(imgWWW){
          if(!imgWWW.error && imgWWW.progress == 1) {
               Debug.Log("No imgWWW.error");
               userIcon.gameObject.renderer.material.mainTexture = imgWWW.texture;
               userIcon.gameObject.active = true;
               imgWWW = null;
          }
     }
}

ということで、TweetItemのスクリプトをまとめると、
以下のようになります。

// アイコンを表示する
var userIcon:GameObject;
// 日付を表示する
var tweetDateField:SpriteText;
// ツイートを表示する
var tweetTextField:SpriteText;
// アイコンを取得するためのWWWクラス
var imgWWW:WWW;
// ツイートが長いときに削除するための値
var tweetMaxLength:int = 80;


function SetTweet(tweet:JSONObject) {
    // 日付の表示
     var tweetDate:JSONObject = tweet.GetField("created_at");
     tweetDateField.Text = tweetDate.str;
    
     // ツイートの取得
     var tweetText:JSONObject = tweet.GetField("text");
    
     // ツイートが長いときに途中で削除する
     var tweetLength:int = tweetText.str.Length;
     var maxLength;
     if(tweetLength > tweetMaxLength){
          maxLength = tweetMaxLength;
     } else {
          maxLength = tweetLength;
     }
     var tweetStr:String = tweetText.str.Substring(0, maxLength);
    // ツイートの表示
     tweetTextField.Text = tweetStr;
    
     // アイコン画像の取得
     var image:JSONObject = tweet.GetField("profile_image_url");
     imgWWW = new WWW(image.str);
}


function Update() {
     // imgWWWに値が来たのを確認して、テクスチャを書き換える
     if(imgWWW){
          if(!imgWWW.error && imgWWW.progress == 1) {
               Debug.Log("No imgWWW.error");
               userIcon.gameObject.renderer.material.mainTexture = imgWWW.texture;
               userIcon.gameObject.active = true;
               imgWWW = null;
          }
     }
}

これで全４回でUIScrollListを使ったツイートの表示が終わりです。
書いてみて分かったのですが、スクリプトはそんなに難しくないのですが、
それまでの準備がいろいろと大変ですね。

また気づいたネタとかまとめていきます。


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

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

No related posts.