Skip to content

enchant.jsでTwitter連携ゲームを作ろう! (その1 プラグイン解説編)

こんにちは、wise9編集部のリョーヘイです。JavaScript+HTML5の投稿型ゲームサイト「9leap」のプロジェクトリーダーをやってます。

9leapでは、JavaScriptのライブラリ「enchant.js」のプラグインとして、スコアの登録やランキングなどがカンタンにできる「nineleap.enchant.js」というプラグインを用意していました。

ついさっき、このプラグインがARC所属のタカハシくんの手によって大幅にアップデートされて、Twitterとの連携ができるようになりました。

これを使えば、例えばこんなゲームがカンタンに作れますよ!

フォロワーが攻めてくるゲーム。実はゲームそのものは ハエたたきとおなじですが、ムカつく友達が攻めてくるとついついクリックする手にも力が入る…!?

こんなゲームも、ラクラクカンタンに作れちゃいますよ!

アイコンから名前を当てるゲーム。最後に「友達理解度」が表示されます。

今回はプラグインの使い方を解説しながら、カンタンにサクサクっと「Twitter連携ゲーム」を作ってみますよ!

まず、enchant.jsのgithubのページから、新しいバージョンのenchant.jsとnineleap.enchant.jsをダウンロードしてください。enchant.js のバージョンはv0.3.1、nineleap.enchant.jsはv0.2が現時点でTwitter連携に対応している最新版です。

新しいenchant.jsをダウンロードして使わないと、エラーが出て止まっちゃいますよ!かくいう私もさっきまでハマってました…。

さてさて、nineleap.enchant.jsには次のようなカンタンなサンプルがついています。

enchant();
window.onload = function() {
    var game = new Game(320, 320);
    game.twitterRequest('account/verify_credentials');
    game.onload = function() {
        var sprite = game.twitterAssets['account/verify_credentials'][0].toSprite(48, 48);
        sprite.x = 0;
        sprite.y = 0;
        game.rootScene.addChild(sprite);
    };
    game.start();
}

これを実行すると、下のような画面が出てくるはず。

9leap twitter

9leapにログインしていないときは、こんなカンジの画面が出てきます。

ボタンを押すとポップアップでログインウインドウが出てきて、「アプリを認証」ボタンを押すと自動でゲームをリロードしてくれます。これは便利ですね!

ホントはTwitter連携のアプリやゲームを開発するためには、「APIキー」というものを申請して取得し、OAuth認証という複雑な認証方法に対応したコードをかかなければいけないのですが、このプラグインを使えば、そのメンドクサイ作業を9leapのサーバに任せて、自由にゲームを作ることができます。

このサンプルでは、プレイヤーのTwitterアイコンをサーバから取ってきているのですが、この処理はたったの1行。

    game.twitterRequest('account/verify_credentials');

‘account/verify_credentials’ というのはTwitterが公式に提供しているAPIの「エンドポイント」で、どんな情報を取ってくるかを指定します。フォロワーの情報は ‘statuses/followers’ 、ユーザのタイムラインは ‘statuses/user_timeline’ と指定すれば取得できます。

    game.twitterAssets['account/verify_credentials'][0]

取得してきた情報はココに格納されます。画像の game.preload と game.assets の関係に似てますね。但し、twitterAssetsは配列になっていて、何番目のデータを読み込むかを指定できます。

画像と同じように、window.onload の時点ではまだtwitterの情報は読み込まれていません。ぜんぶ読み込み終わった後に game に loadイベント が渡されるので、twitterの情報を使った処理は game.onload = function() { … } の中に書いてください。

game.twitterAssets['account/verify_credentials']にはプレイヤーのいろんな情報が入っています。たとえば 9leap の公式Twitterアカウントは、以下の通り。

{
    "contributors_enabled": false,
    "created_at": "Fri Mar 25 11:04:16 +0000 2011",
    "default_profile": true,
    "default_profile_image": false,
    "description": "",
    "favourites_count": 4,
    "follow_request_sent": false,
    "followers_count": 135,
    "following": false,
    "friends_count": 1,
    "geo_enabled": false,
    "id": 271881427,
    "id_str": "271881427",
    "is_translator": false,
    "lang": "ja",
    "listed_count": 4,
    "location": "東京都文京区",
    "name": "9leap",
    "notifications": false,
    "profile_background_color": "C0DEED",
    "profile_background_image_url": "http://a3.twimg.com/images/themes/theme1/bg.png",
    "profile_background_tile": false,
    "profile_image_url": "http://a2.twimg.com/profile_images/1300758214/apple-touch-icon_normal.png",
    "profile_link_color": "0084B4",
    "profile_sidebar_border_color": "C0DEED",
    "profile_sidebar_fill_color": "DDEEF6",
    "profile_text_color": "333333",
    "profile_use_background_image": true,
    "protected": false,
    "screen_name": "9leap",
    "show_all_inline_media": false,
    "status": {
        "contributors": null,
        "coordinates": null,
        "created_at": "Tue May 31 09:51:49 +0000 2011",
        "favorited": false,
        "geo": null,
        "id": 75499716179279872,
        "id_str": "75499716179279872",
        "in_reply_to_screen_name": null,
        "in_reply_to_status_id": null,
        "in_reply_to_status_id_str": null,
        "in_reply_to_user_id": null,
        "in_reply_to_user_id_str": null,
        "place": null,
        "retweet_count": 0,
        "retweeted": false,
        "source": "<a href="http://9leap.net/" rel="nofollow">9leap.net</a>",
        "text": ".@DE_TE_IU さんのゲーム「A man bought conscience」が、プレイ回数100回を突破しました!おめでとうございます! #9leap http://9leap.net/games/249/",
        "truncated": false
    },
    "statuses_count": 275,
    "time_zone": "Hawaii",
    "url": "http://9leap.net/",
    "utc_offset": -36000,
    "verified": false
}

だいたい、どれが何の情報を指しているのか分かりますか?

よく使うのは、 profile_image_url (アイコンの画像)、 friends_count (フォローしている人数)、 followers_count (フォロワーの人数)、name (登録している名前)、 screen_name (@のあとの英数字)、あとは status (最新の発言) くらいでしょうか。

game.twitterAssets['account/verify_credentials'][0].screen_name
game.twitterAssets['account/verify_credentials'][0].status.text

このように書くと名前や最新のつぶやきの内容を取得できますが、

var player = game.twitterAssets['account/verify_credentials'][0]

player.screen_name
player.status.text

いったん代入してからの方が使いやすいですね。

var sprite = player.toSprite();

ユーザ情報を保持するオブジェクトは、toSprite というメソッドを持っていて、これを実行するとTwitterアイコンを表示するSpriteオブジェクトに自動的に変換してくれます。これは便利!

あとは普通のSpriteと同じようにx,y座標を指定すると、サンプルのようにアイコンを表示できます。

sprite.x = 0;
sprite.y = 0;
game.rootScene.addChild(sprite);

followingや、followerを取得したときは、このようなユーザ情報オブジェクトが配列で帰ってきます。

さて、これを使ってゲームを作るのは次の記事でやろうと思います。お楽しみに!

このエントリーをはてなブックマークに追加
はてなブックマーク - enchant.jsでTwitter連携ゲームを作ろう! (その1 プラグイン解説編)
Post to Google Buzz
Share on GREE

Related posts:

  1. [enchant.js]shi3z式ゲームプログラミング #7 タイムアタックは神!
  2. shi3z式ゲームプログラミング #5 Twitterと連携だっ!
  3. shi3z式ゲームプログラミング入門 #8 enchant.jsでプチ物理シミュレースゲームを作ってみた
  4. 超革命的ゲームスクリプト言語アトラスXの使い方 #3 Twitterと連携して256倍楽しくする
  5. enchant.js用マップエディタenchantMapEditorが大幅にパワーアップ!

Facebook comments:

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*