はじめまして！wise9編集部のキョウタです。
今日は昨日リリースされた、9leapでオンライン通信ができるAPIと、そのAPIに対応したenchant.jsのプラグイン「socket.enchant.js」のβ版を紹介します。
(編集部注:ちょっとこの記事だけではわかりにくいので他の記事も追記されています。あわせてお読みください→socket.enchant.jsに重大なバグ発見!と、もっとわかりやすいサンプル
このプラグインを使えば、既存のゲームに30行ほど追記するだけで簡単にオンライン対戦を実装できます。アカウントには9leapでログインしているTwitterアカウントを用います。当初は逐次マッチング・1vs1の対戦のみ対応していますが、今後マルチアカウントへの対応も予定していますよ！
このプラグインを使った対戦オセロゲームはこちら。
socket.enchant.js をロードしたら、まずはロビーに入ります。そのためのコードはこちら (たった2行)。
game.socket = new Socket();
game.socket.lobby.join():
new Socket(); で socket オブジェクトを生成しています。この socket オブジェクトに対する操作でオンライン対戦を進めていきます。
ひとつひとつのゲームには、プレイヤーが集まる2つの部屋があります。ひとつは「ロビー」で、これはゲームごとに1つしか存在しません。ここでプレイヤー同士のマッチングを行います。もうひとつは「ゲーム部屋」で、ロビーを出て実際にゲームで対戦する場所です。これらは、プラグインの中で、socket.lobby、socket.gameRoom と呼ばれています。
現在のバージョンでは、好きな対戦相手を選ぶことはできず、ロビーに次に入ってきたユーザと自動的にマッチングが成立します。マッチングしたあと、対戦に入る時には、おなじみのイベントリスナを使ったコードで書き進めることができます。
game.socket.gameRoom.addEventListener('ready', function (data) {
console.log(data);
});
実際に対戦を受け持つのは gameRoom というオブジェクトです。対戦の準備ができたら、gameRoomに対して「ready」というイベントが自動的にdispatchされます。対戦開始の処理は、このイベントのリスナとして登録しましょう。イベント名は好きに付けられますが、「ready」は対戦準備ができたときのために予約されています。
対戦開始後、相手にイベントを送るときは、socket.gameRoom.push メソッドが使えます。第一引数にイベント名を渡し、第二引数に相手に渡したいオブジェクトを指定します。
game.socket.gameRoom.push('put',{x:this.a, y:this.b});
対して、相手からイベントを受け取る時は以下のように書きます。第一引数にはイベント名を、第二引数にはリスナを記載します。サンプルはオセロゲームのものです。
game.socket.gameRoom.addEventListener('put', function (data){
putStone(data.x, data.y, game.turn);
label.text = "あなたの番です。クリックして石を置いてください";
refreshStatus();
});
すでにenchant.jsになじみのある方には、これまでと同じような書き方でオンライン対応できる、という仕組みになっています。カンタンでしょ?
自分のID・他人のIDについては、以下の方法で取得することができます。(プロパティ名は以降のパージョンで変更することもあります)
game.playerID = game.socket.twitterID
game.enemyID = game.socket.gameRoom.member[0];
同時に、アイコン取得APIもリリースされました。今まではTwitter連携プラグインを通じてしかアイコンを取得できませんでしたが、以下のアドレスを画像の src に指定することでアイコンを表示できます。
http://9leap.net/api/icon/screen_name/[screen_name] [screen_name] : アイコンを取得するユーザのスクリーンネーム
サンプルはこちら。
var me = new label("<img src='http://9leap.net/api/icon/screen_name/9leap'>");
game.rootScene.addChild(me);
サーバ側が、接続されているかどうかを監視しているため、ゲーム終了の時には、特に切断処理は必要ありません。
みなさんもこのプラグインを使っていろんなゲームを作ってみてくださいね！Enjoy！
Related posts:
Post a Comment