【Unity】Twitter API 1.1を使って、フォロワーアイコンをVR空間に表示させる方法

さらに続きです。OculusGameJamで作ったゲームの主な作り方を説明します。

ゲームの流れはこんな感じです。
(1)oculusRiftでPSeye越しに現実風景を見る(AR)
(2)マーカを認識して現実風景をふわっと削除(AR->VR)
(3)フォロワーアイコンを頭上に掲げたクマさん登場(VR)
(4)逃げてくクマさんを追いかけてフォロワーを再び！

今回は(3)を説明します。

1. Twitterのフォロワーを表示させる方針
2. Twitter のDeveloperサイトへ登録する
3. UnityTwiTestをunitypackage化する
4. Prefab、GameObjectを配置する
5. スクリプトを編集する
6. SysTwitterオブジェクトを設定する
7. 動作確認
8. 終わりに

1. Twitterのフォロワーを表示させる方針

GameJam中は、TwitterAPI 1.1を使って、followerのアイコンを取得することに決めました。その際、以下のサイトが大変参考になりました。ありがとうございます。

Post Position 【Unity】 Unityでツイートするサンプル「UnityTwiTest」（API 1.1対応）

TwitterのAPIを試したのは初めてだったので背景がわかってませんが、TwitterのAPIがv1.0だったときまでは、Asset StoreのLet's Tweet in Unityで対応できたようです。

しかし、APIのバージョンが1.1に上がったときにAuth認証が複雑になりだいぶ仕様も変わったらしく、今のところPost Positionさんの方法がやりやすいと思われます。

2. Twitter のDeveloperサイトへ登録する

APIを使うには開発者登録が必要です。

Developer

ここから自分のTwitter名とパスワードでログインし、Create New Applicationから適当なサンプルプロジェクトを登録します。

手順の詳細は下記を参考にさせていただきました。登録時のWebSiteなどは自分のTwitterURLで大丈夫です。

Android再入門 - Twitterクライアントを作ってみよう - Twitter APIを使うアプリを登録 - Qiita

3. UnityTwiTestをunitypackage化する

まずはPost Positionさんの公開されているUnityTwiTestを入手し、Unityで開きます。その後、Asset以下をpackageとしてexportし、自分の使うUnityProject内でImportします。

ちなみに、importしたAsset関係は好きなフォルダに入れ替えても大丈夫なので、Asset関係をTwitterなどの名前のフォルダに入れるとファイル全体が見やすくなります。

4. Prefab、GameObjectを配置する

Twitter/Prefab/SystemInstanceをHierarchy Viewにドラッグします。また、空のGame Objectを配置し、TwitterGUIと名称変更します。

5. スクリプトを編集する

Twitter/Script/SysTwitter.csを開きます。PostPositionさんのブログ内容は、Auth認証後、自分のTwitterアカウントへ任意の文字列を投稿させるものです。

ここでは、任意の文字列をPostTweetする処理を書き換えて、逆に指定画像を取得するようにして、修正規模を減らしました。本来はget用の関数を作るべきですが、時間が限られているGameJamということで、こういう方法になりました。

変更箇所を抜粋します。

public GameObject iconObject1;
public GameObject iconObject1;
//(以下10個まで作成)

string[] twitterIconURL = new string[]{
Twitterアイコン画像URLを10個宣言
}

private IEnumerator     coPostTweet( string text )
    WWW web1 = new WWW(twitterIconURL[UnityEngine.Random.Range(0,17)]);
　　yield return web1;
　　iconObject1.renderer.material.mainTexture = web1.texture;
　　iconObject1.transform.eulerAngles = new Vector3(0,180,180);
　　WWW web2 = new WWW(twitterIconURL[UnityEngine.Random.Range(0,17)]);
　　yield return web2;
　　iconObject2.renderer.material.mainTexture = web2.texture;
　　iconObject2.transform.eulerAngles = new Vector3(0,180,180);
　　・・・
　　(以下10まで作成)
}