読者です 読者をやめる 読者になる 読者になる

[OculusGameJam](3)フォロワーアイコンを頭上に掲げたクマさん登場(VR)

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

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

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

(3)フォロワーアイコンを頭上に掲げたクマさん登場(VR)


ここではTwitterAPI 1.1を使って、followerのアイコンを取得します。


以下のサイトが大変参考になりました。ありがとうございます。

Post Position
【Unity】 Unityでツイートするサンプル「UnityTwiTest」(API 1.1対応)
http://posposi.blog.fc2.com/blog-entry-157.html


私はTwitterAPIを試したのは初めてだったので背景がわかってませんが、TwitterAPIがv1.0だったときまでは、Asset Storeの

Let's Tweet in Unity

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

Twitter のDeveloperサイトへ登録

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

https://dev.twitter.com/

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


手順の詳細は下記を参考にさせていただきました。

http://qiita.com/gabu/items/4a63e6b56dd50da1f528

登録時のWebSiteなどは自分のTwitterURLで大丈夫です。

私の場合は、
https://twitter.com/WheetTweet
としました。

Unity上での開発手順

1. UnityTwiTestのパッケージ化と、自プロジェクトへ導入

まずはUnityTwiTestを入手し、Unityで開きます。

その後、Asset以下をpackageとしてexportし、自分の使うUnityProject内でImportします。

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


2. Prefab、GameObjectを配置

Twitter/Prefab/SystemInstanceをHierarchy Viewにドラッグします。

 また、空のGame Objectを配置し、TwitterGUIと名称変更します。

3. スクリプトの編集

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が使えず愚直に書くことになってしまいましたが(T_T)

また、言うまでもないですが、coPostTweetというメソッドでありながら、内容はGetです。。


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


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

あと、Random.Rangeメソッドをc#で使うと、

Random.Rangeは、UnityEngineとSystem2つで利用可能である。どっちか指定せよ

というエラーが出ます。

しかし、このことはネットで調べても不思議と出てきませんでした。利用環境はUnity4.2.2ですが、何か以前とは違うのでしょうか?

      1. 4. Auth認証用GUIを設定

2.で配置したTwitterGUIに、Twitter/script/SceneDemo.csをアタッチします。

5. SysTwitterオブジェクトの設定

Hierarchy ViewのSystemInstance/SysTwitterオブジェクトのInspectorに以下を指定します。

・クマ頭上のオブジェクト

この時点ではまだクマを配置していないので、適当なcubeを作り、これをアタッチすれば動作確認可能です。

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

f:id:Takyu:20131124140352p:plain

参考までに私のサイト画面を示します。

※Key関係は塗りつぶしています。

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



これで完了です。あとは起動するとこんな画面がGame Viewに出てきます。

f:id:Takyu:20131124141139p:plain


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

f:id:Takyu:20131124141234p:plain


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

f:id:Takyu:20131124141309p:plain


このパスコードをGame Viewの真ん中のテキストフィールドに入力しEnter PINを押します。

一瞬エラーログのようなものが出ますが、その後、Succeedというログが出ます。画面上は変化しません。

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


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


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


また機会あるときに調べてみたいと思います。


次のブログでは(4)について説明します。