CrossRoad

XRを中心とした技術ブログ。 Check also "English" category.

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

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

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

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

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まで作成)
}

コードの把握に時間がかかり試行錯誤を繰り返しましたが、結果的に変更箇所はこれだけでした。ただ、大変残念なことに、なぜかforが使えず愚直に書くことになってしまいました。また、coPostTweetというメソッドでありながら、内容はGetです。

ここではWWWメソッドを使って、指定URLから取得したデータをiconObjectX(クマの頭上にある四角形)に描画させています。

またRandom.Rangeメソッドを使って0~16までの乱数を発生させ、クマ頭上に表示されるアイコンを実施のたびに変化させています。

6. SysTwitterオブジェクトを設定する

Hierarchy ViewのSystemInstance/SysTwitterオブジェクトのInspectorに適当なcubeを作り、これをアタッチすれば動作確認可能です。

また、TwitterDeveloperサイトのMyApplicationにConsumer KeyとConsumer Secretが表示されているので、その文字列を入力します。

ここでAccess LevelがRead Only になっていたらRead Writeに変えてください。

7. 動作確認

起動するとこんな画面がGame Viewに出てきます。

UnityでUnityTwiTestを実行した時の最初の画面

Get Request Tokenを押すと、ブラウザが開き、下記のような認証画面が出てきます。

Twitter連携の認証画面

「連携アプリを認証」を選択すると、パスコードが表示されます。

パスコード入力画面

このパスコードをGame Viewの真ん中のテキストフィールドに入力しEnter PINを押します。一瞬エラーログのようなものが出ますが、その後、Succeedというログが出ます。画面上は変化しません。

あとはaaaとか適当な文字列を入力してPostTweetを押すと、クマ頭上のアイコンが変化します。

完成するとこんな感じです。

8. 終わりに

GameJamで時間が限られてたこともあり、TwitterのAuth認証やらAPIの使い方については、今回の範囲しかわかってません。また機会あるときに調べてみたいと思います。

次回は、クマの制御方法について書きます。

また、参考記事は下記の通りです。

関連する記事は下記の通りです。

OculusRiftでPSeye越しに現実風景を見る方法 - CrossRoad

Oculus RiftでPSEye越しに現実風景を見て、VRに切り替える方法 - CrossRoad

【Unity】GameJamで得たカウントダウン、効果音設定方法 - CrossRoad