ゲームカテゴリの投稿数が少なくて寂しいのと、Twitterで相互フォローの方が始めたということだったので、私も便乗してメモ。

本記事では接続するところまでいきたいと思います。

え、SlideShareに既にある?しかもこっちより詳しい?──では、私はより短く書くことにしましょう。

Skyway

なにそれ

公式サイトを見ると早いですが、NTTのサービスの1つです。WebRTC(Web Real-Time Communication)というモノを使えば、誰かとリアルタイムに通信することができます。

ですが、利用するにはシグナリングサーバーだのTURNサーバーだのとどう使われるのかもよく分からないサーバーを立てないといけません。さらにブラウザのWebRTC APIをどう記述すればよいか分からないという嬉しいおまけまで付いてきます。

そこでSkywayです。このサービスを使えば、WebRTCナニソレイミワカンナイ状態でも簡単にWebRTCを利用することができます。色々なサーバー群も提供してくれます。

有料プランもありますが企業向けなので、趣味レベルならば無料プランで問題ありません。というか月10万円も払えるものなら払ってみろ

元々はPeerJSというサービスがあって……という話は割愛します。興味のある人はググってみてください。

開発者登録

公式サイトのトップページ右上に「新規登録」のリンクがあります。スマホならば右上のボタンを押せばドロップダウンリストの中にあります。

Editionは「Community Edition」を選択しましょう。

続いて名前、メアド、パスワードを入力し、メアド宛に送られてくる認証メールのリンクを踏みましょう。名前にハンドルネームは使えません。

名前を入力するのに抵抗のある方は、残念ながら本記事とはここでお別れです。

アプリケーション作成

ダッシュボードにログインできましたか?トップページの「新規登録」の右または下に「ログイン」があります。

では早速「新しくアプリケーションを追加する」からアプリを作っていきましょう。

各項目を以下のように設定します:

[アプリケーション説明文] ゲームのタイトル

[利用可能ドメイン名] ゲームを公開するサイトのURLを入力。形式は薄い色で書いてあるサンプルに従う。順番は関係ない。localhostがあるとわざわざサーバーにアップロードしなくともデバッグできるが、そのまま公開すると不正利用されそう

[TURNを利用する] P2P通信ができない環境でもWebRTCを動かすために必要。チェックする

[SFUを利用する] 映像を送受信するのに使うらしい。今回はデータ通信しか使わないのでチェックを外す

[listAllPeers APIを利用する] 現在取得されている、接続に使用するIDの一覧を取得できる。マッチングシステムを作るつもりなら必要。IDをプレイヤー同士で教えあって貰うなら不要

[APIキー認証を利用する] 一番重要に見えるが、残念ながら筆者は理解していない。ハッシュ等を利用した認証でAPIキーの不正利用を防ぐ。私のように自分のサイトで公開するなら無用だが、PlicyとかFreemで公開するなら必要になってくるかもしれない。

作成するとAPIキーが発行されるので、それをコピーします。どうせJavascriptファイル内に記述するので見えますが、念のためそのまま貼り付けてツイートするなどの愚行は犯さないようにご注意ください。

セットアップ

登録しただけでは何にもなりません。マルチプレイの機能を実装する必要があります。

PeerJSとSkywayによってWebRTCは随分と簡単に利用できるようになりましたが、手間がゼロになったわけではありません。

まずはゲームを用意

私はcanvasを愛していますが、WebGLを使ってもいいし、テキストベースでも大丈夫です。肝心なことは、Skywayを使ったマルチプレイを実装することです。

本記事で扱うのはJavascriptによるブラウザゲームなので、htmlファイルが必要ですね。作成するか、既存の自作ゲームをご用意ください。

このhtmlについて今回は割愛します。必要そうなら別で記事を作成するかもしれません。

SDKを用意

このページからダウンロードできます……おや、CDNがありますね!これを利用すれば、わざわざダウンロードせずとも利用できます。

あなたの利用するサーバーがHTTP/2対応ならば、ダウンロードして自分のサーバーに置いたほうが、ページの表示速度が速いかもしれません。

ちゃんとhtmlファイルにscriptを書き足すのを忘れないでくださいね。

あと、CDNを利用する場合もskyway-latest.jsではなく、コメントや改行が削除された軽量版であるskyway-latest.min.jsを利用できます。機能は同じなので、軽量版を使ったほうが若干いいです。

接続してみよう

ここからようやくJavascriptの話になります。SkywayはAndroidやiOSのネイティブアプリにも対応しているようですが、ここではJavascriptの話しかしません。

Peerオブジェクトの作成

まずはPeerオブジェクトを作成します。(色付けは適当です)

var peer = new Peer({key:"<YOUR API KEY>"});

varに拒絶反応を示す方はletでも構いません。IEで動かなくなりますが安心してください、そもそもIEにWebRTCの機能はありませんのでどのみち動きません。

オブジェクトを作成すると、SDKはSkywayのサーバーと通信しIDを自動生成、通信可能な状態にします。私の環境では1秒もあればIDの取得が終わります。通信可能になったかは以下のイベントを登録することで確認することができます。

peer.on("open", function(id){

console.log("My ID is " + id);

});

今はただコンソールに流すだけの関数を登録してますが、色々処理を入れてももちろんOKです。このイベント後は、いつでも自分のIDをpeer.idで確認することができます。

え、StackUpHexのコードではsetIntervalでpeer.idを監視するゴリ押し設計してるって?あー、気のせいだよ気のせい。アレだよ、幻覚が見えてるだけだ、きっとそうに違いない。決して知らなかったとかそんなんじゃないからな!

接続する/される

分けて書くべきなのかもしれませんが、あなたがゲーム制作者ならば結局どちらも作ることになりますので、一緒に書きます。時系列に沿って書きますね。接続する側、される側は共にPeer IDの取得を終えているものとします。

まず、接続側は被接続側に対し、IDを指定して接続要求を出します。

var c = peer.connect("<OPPONENT'S PEER ID>", {serialization: 'binary-utf8'});

serializationオプションで文字エンコーディングにUTF-8を明示しています。なくても動く気はします。

このcはDataConnectionオブジェクト、今後テキストを送るときに使用します。グローバル変数などに保存しておきましょう。

一方、被接続側ではconnectionイベントが発火します。

peer.on("connection", function(c){ ... });

言うまでもないことですが、イベント登録は接続される前にやっておきましょう。先程のopenイベント時に登録するといいと思います。

そして、このcもDataConnectionオブジェクトです。

その後、接続側でopenイベントが発火します。peerではなく、cのほうのイベントです。

c.on("open", function(){ ... });

これ以降、c.send("文字列");で文字列を互いに送信できるようになります。私の場合、送受信する文字列はjson形式だけです。StackUpHexではこのタイミングで互いのプレイヤーネームを交換しています。

通信を開始する

sendしても、相手が受け取らないならばそれは通信していないのと同じです。受け取るための関数を登録しましょう。

c.on("data", function(data){ ... });

このdataは相手から送られてきた文字列です。これで相手からのメッセージを受け取れます。

切断する

ゲームは永遠には続きません。どこかで切断する必要があります。

通信を切断するには以下のようにします。

c.close();

するとcloseイベントが発火します。ちなみに、自分からcloseした場合も検知されます。

c.on("close", function(){ ... });

最後に

繋ぐだけならこんな感じです。ほぼ同じ内容を旧公式ドキュメントから得られますが、導入としてアカウント登録から簡単に紹介しました。

とても簡単に導入できるので、ぜひ使ってみてください。

また、私作のゲーム「StackUpHex」もよろしくお願いします。