Skip to content

shi3z式ゲームプログラミング #5 Twitterと連携だっ!

shi3zだよ。

さて、前回の最後の課題はやってみたかな?

キャラクターが動いたよね?

これはどういうプログラムだったのか?

実はboy.gifは普通の画像とは違ってこんな感じになっていたんだ

そう。64×64ドット間隔で、アニメーションパターンが並んでるんだ。


function onLoad() {
   boy = new Image("img/boy.gif",160,200,64,64); //A キャラクターのサイズを64x64にする
   boy.count  = 0;  //B コマ数を数えるためのカウント用変数を定義
   boy.tick = function(){
      var anim = new Array( 1, 2, 3, 2); //C アニメーションパターンを配列に格納する
      this.ix = anim[boy.count]*-64;      //D アニメーションパターンをカウントによってずらす
      boy.count +=1; //E カウントを進める
      if(boy.count==3)boy.count=0; //F アニメーションパターンを超えそうになったら0に戻す
   }
   gameStart();
}

続きは以下のリンクから

特にboy.gifの一行目に注目すると、アニメーションの動きは、左から二つ目、三つ目、四つ目、と動いて、また三つ目を挟んで一つ目に戻る、という繰り返しになっている。

こういうアニメーションパターンを表現するのに配列は便利なんだ。

このプログラムはちょっと複雑なので、詳しい解説は省略する。

ひとまず配列が何の役に立つのか、知ってほしかったんだ。

Cの行で配列が使われている。

コンピュータでは数は0から数えることが多い。だから、左から二つ目、というのはこの配列では1だ。1、2、3、2、という順番で格納された数は、それぞれ、左から二つ目、三つ目、四つ目、二つ目、となる。

もし時間に余裕があったら、試しにnew Array(1,2,3,2)の順番を変えてみよう。

また、試しにDの行とEの行の間に「this.iy=-64」と入れたり、「this.iy=-128」と入れたりしてみると、仕組みが解るかもしれない。

配列は便利なものだけど、すぐに使いこなすのはちょっと難しいかもしれない。

でもどうしても配列を解説しておきたかったのは、もっと面白いことがあるからなんだ。

さてみんなはTwitterをやっているかな?

いまさら説明の必要もないくらいに楽しいサービスだけど、自分で作るゲームにTwitterの友達が出てきたら面白いと思わない?

実はTwitterは非常に簡単に外部のプログラムから内容を取り込むことができる。

それを試しにやってみよう。そのためには「ゲームのもと」をバージョンアップする必要がある。

ゲームのもと2をダウンロード http://junk.wise9.jp/game/game2.zip

上記のファイルをダウンロードするか、http://junk.wise9.jp/game/を開いてほしい。

ここに以下のプログラムを入力してみよう


twitterCallback = function(friends){  //A Twitterからのデータの読出しが完了するとこの関数が呼び出される
     for(var i=0; i< friends.length ;i++){ // B friends引数は配列変数で、友達の情報をもったオブジェクト変数が多数格納されている
          displayLabel.node.innerHTML += "<img src="+friends[i].profile_image_url+">"+ //C ユーザの画像を表示
                                             friends[i].screen_name+" <BR>"; //D ユーザの名前を表示して改行する
     }
}

function onLoad() {
     displayLabel = new Label("Twitter Friends<BR>",10,10);
     loadTwitter("shi3z","friends",10,"twitterCallback"); //E ここでTwitterを呼び出し
}

するとどうなるか?

僕のTwitterの友達の顔写真と名前が一覧表示されるはずだ。

まず、onLoad関数のなかのE行でloadTwitterという関数を呼び出している。
この関数には沢山の引数(ひきすうと読む)が渡されているけど、これは「shi3z」というIDのTwitterアカウントの友達(“friend”)のリストを10人ほど欲しくて、もしロードが終わったらtwitterCallbackという関数を呼び出して欲しい、という内容の命令になっている。関数名は関数直接ではなく文字として渡している。このあたりは「いろいろな大人の事情」だと思っていただきたい。

また、twitterCallbackの関数定義の仕方が、どちらかというと関数というより変数みたいな感じになっている。
これも「大人の事情」と関係するが、本質的にはどちらも関数の定義をしていることには変わりない
このへん、突っ込んでいくと迷宮に迷い込んでしまいそうなので、いまのところは「こういうもんか」と思ってほしい。

この行の10を2に変えたら二人、100に変えたら100人ぶんの友達がロードされるはずだ。
僕以外のアカウントで試したかったらshi3zとなっているところを好きなTwitterアカウントに変えてみればいい。

このように、たまに他の関数に関数の名前や関数そのものを渡すことはままある。
このとき渡される関数はあとで呼び戻されることから俗に「コールバック関数」と呼ばれたりする。豆知識だ。

さてさて、実際のTwitterからの情報を取得するコールバック関数はこのサンプルではズバリ、twitterCallbackだ。

twitterCallbackには結果となるTwitterの友達情報が格納された配列変数がパラメータとして渡される
ここではその配列にfriendsという仮の引数名を与えている。

friendsの中身は配列オブジェクトだ。
配列にはいくつか便利な機能があるが、ここではlengthという関数を使っている。
これはその名の通り、配列の長さを返す関数だ。

この場合、配列の中身は10個固定なので本来はあまりlengthを取る必要はないが、Twitter友達が10人以下という読者層も居ることを想定して、敢えてlength関数を呼び出している。

次に、displayLabel.node.innerHTMLになにか呪文のような文字列を投入している。
これ、どこかでみたことがあるかもしれないが、いわゆるひとつのHTMLだ。
HTMLについて詳しく説明すると本一冊分くらいになりそうなのでこの連載ではかなり大雑把に説明しよう。

HTMLとは、総てのWebページを作るための基本的な言語であり、多少の方言はあるものの、いまどきのインターネット生活においてなくてはならないものなんだ。

その多くは<と>で囲まれた「HTMLタグ」というものの塊で出来ている。
タグは<img>とか<br>とか無数に存在するが、それぞれのタグによって意味や機能が違うが総てのタグを覚える必要はもちろんない。総ての日本語を知らなくても日本人は日本語がはなせるのと同じだ。

ここで使っているのは<img>タグと<br>タグのふたつ。
<img src=画像ファイルのURL>とすると、世界中どこにあってもインターネット上にある限りその画像ファイルを探し出して来て表示してくれる。考えてみれば凄いやつだ。いまだに頼りになる強い味方のナイスタグ。それがimgタグだ。

それに比べると<br>タグはかなり地味で、これは改行をしてくれるタグだ。
これがないとなんか辛い感じになっちゃう。だから入れるのだ。

このHTMLタグを含む文字列をdisplayLabel.node.innerHTMLに代入すると・・・はい。ご想像の通り、そのHTMLが表示されるのである。わーお簡単。ベリーイージー。ナマステ。ヒーハー。そういうわけだ。

HTMLタグは無数にあるが、JavaScriptと違って覚えられないほどあるわけではないので、もし興味があれば下記のページを参考にすると良い。

とほほのHTMLリファレンス

でも今回は時間がないので読まなくていいよ。

さてさて、friends配列にはTwitterのユーザ情報が格納されている。Twitterのユーザ情報はかなり沢山あるので、全部紹介するのは僕も疲れてしまうから今回は面白そうなところだけ紹介する。

friends[i].screen_nameはユーザの名前だ。まあ予想通りだよね?
そしてfriends[i].profile_image_urlはその名の通り、そのユーザのプロフィールで使われているアイコン画像のURLだ。

ここでは使ってないが、friends[i].status.textは、そのユーザの最新のつぶやきだ。

このプログラムを改造して、いままでの知識とあわせると、次のようなプログラムを書くことができる。


twitterCallback = function(friends){
    for(var i=0;i<friends.length;i++){
        face = new Image(friends[i].profile_image_url, //A Imageに画像URLを渡してみる
                rand(320),rand(480)); //B rand()はMath.floor(Math.rand()*最大数))の省略表現
        face.node.profile = friends[i];
        face.node.onmouseover = function(){ //C マウスカーソルが横切ったら名前と台詞をラベルに表示
                displayLabel.node.innerHTML=
                        this.profile.screen_name+"<BR>"+
                        this.profile.status.text;
        };
        face.tick=function(){ //D なんか適当にウロウロする
                this.x += rand(3)-1;
                this.y += rand(3)-1;
        }
    }
}

function onLoad() {
    displayLabel = new Label("Twitter Friends<BR>",10,10);
    loadTwitter("shi3z","friends",10,"twitterCallback");
        gameStart(); //E tickを有効にするためにgameStartする
}

Aの行を見てみよう。friends[i].profile_image_urlで得られるURLをそのままnew Imageに渡すと、それだけでTwitterから顔アイコンを画像として取得することができる。

BではMath.floor(Math.random()*最大数))とやるのが面倒なので、新しいgame.jsに含まれているrand関数を使って省略している。

Cでface.nodeにonmouseover、つまりマウスカーソルがその画像の上を横切ったら呼び出されるコールバック関数を設定している。displayLabel.node.innerHTMLにその画像の人の名前とその人の喋ってる最新のつぶやきを<br>タグの改行でくくって表示しているわけだ。

Dのface.tickで適当にウロウロするところは、本当に適当で良いので、rand(3)で0,1,2のどれかランダムな値を返すようにし、そこから-1することで、上下左右、どこにいくのかわからない適当な動きを作り出した。

tickを使う時はgameStart関数を呼び出さないといけないので、Eの行で呼び出している。
という寸法だ。

たったこれだけのことで、Twitterとの連携が可能になるのだ。
Twitterの友達が自分のゲームに出て来たら面白いじゃない?

ここまでマスターしたら、あとはアイデア次第で、オリジナルのゲームも作れなくもない。
けれども、逆に言えばここからがゲーム作りへの壮大な道への第一歩というわけでもある。

そこで、次回はゲームを作るときに便利な機能についていろいろ紹介しちゃうぞ!

それが待ちきれない人のために練習問題を下記に用意したよ。

練習問題

1)TwitterIDを自分のIDや友達のIDに変えてみよう
2)30人くらいの友達が表示されるように改造してみよう
3)顔の上でマウスカーソルがクリックされたら顔が消えるようにしてみよう
4)displayLabelにも顔のアイコンが表示されるようにしてみよう。

このエントリーをはてなブックマークに追加
はてなブックマーク - shi3z式ゲームプログラミング #5 Twitterと連携だっ!
Post to Google Buzz
Share on GREE

Related posts:

  1. shi3z式ゲームプログラミング入門 #4 バナナと配列
  2. shi3z式ゲームプログラミング入門 #3 “ゲームらしく”する
  3. shi3z式ゲームプログラミング入門 #1 72時間でゲームプログラマになる方法
  4. shi3z式ゲームプログラミング入門 #2 あと48時間でゲームプログラマになる方法
  5. 72時間で私は本当にゲームプログラマになれるのだろうか:体験ルポ

Facebook comments:

Post a Comment

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