three.jsとWebSocketでMMOゲームを作ろう！

遅れましたが Graphical Web Advent Calendar 2013 14日目の記事です

最近「Unity + Photo Cloud」でMMOゲームが簡単に作れるブームがあったので、「Three.js」で同じような事ができないかな～っと思いチャレンジしてみました

今回はThree.jsにオーガのかっこいいサンプルがあったのでそれをカスタマイズしてます。

以下のURLを複数のブラウザ起動するとMMOっぽくなります

※　操作は十字キーのみで走ることだけできます。まだゲーム性はないです

http://simplecode.jp:3001/

目次
　1.実装ポイント
　2.ソースコード
　3.使用してる環境やソフト
　4.終わりに

1.実装ポイント

　今回、WebSocket連携する際にまず2Dで作ってみました。

　

　2Dの場合は、以下の情報を連携します。

　・プレイヤーのID

　・プレイヤーのX軸

　・プレイヤーのY軸

　・スプライトのフレーム

　スプライトのフレーム番号は以下のような感じになります。

　

　また、プレイヤーIDはプラウザ起動時に一意に近いものを割り振ってます。　

// ユニークIDを作成
var myId = parseInt(Math.random() * 10000);

　IDでキャラを識別して制御します。例えばこんなかんじです。

// 退室した時
if(data.type == 'leave'){
    console.log(data.id + "が退室しました");
    for(var i = 0, cnt = playerlist.length; i < cnt; ++i){
        var hiyoko = playerlist[i];
        // IDが一致したプレイヤーは削除する
        if(data.id == hiyoko.myId){
            hiyoko.remove();
            playerlist.erase(hiyoko);
        }
    }
}

　ブラウザを閉じたらIDを送信し、そのIDキャラを消すイメージです。

　はい、簡単ですね～

　次は3Dの場合は、以下の情報を連携します。

　・プレイヤーのID

　・プレイヤーのX軸

　・プレイヤーのZ軸

　・キャラの向き(回転軸Y)

　・アニメーション名

　・フレームレート(1/60秒)

　※ 今回はジャンプしないのでプレイヤーのY軸は連携してないです。

　

　3Dキャラの場合、アイドリング中もアニメーションするのでフレームレートを渡します。

2.サンプルソース

　githubに公開してるので、興味がある方はソースを見たりして

　MMOゲームに近づけてくれると嬉しいです。

　ちなみにフロントサイドもサーバサイドもJavaScriptしか使っていません。

　プレイヤーの位置情報も配列で管理してるため、DBも未使用です。

　https://github.com/naotaro0123/3D_Socket

3.使用してる環境やソフト

　◆さくらVPS(CentOS 6.4)

　◆node.js(ver 0.11.9)

　　サーバサイドのJavaScript

　◆nodebrew(ver 0.7.1)

　　Node.jsのバージョン管理するツール

　◆npm(ver 1.3.21)

　　expressやsocket.ioなどのインストール管理するツール

　◆express(ver 3.4.7)

　　Node.jsのWebアプリフレームワーク

　◆socket.io(ver 0.9.16)

　　WebSocketを行うフレームワーク

　◆forever

　　node.jsアプリを永続的に動かすツール

4.終わりに

　Photon CloudではHTML5やAndroid,iPhoneも連携しています。

　ただ、サンプルコードが解析できずHTML5の実用例も見当たらなかったので断念しました。

　ほんとはもっと簡単にHTML5でもMMOを実現したかった。
　また今度チャレンジしてみます～

　[ 参考URL ]
　・ApacheとNode.jsを共存させてWebSocketも通す