Node.jsとWebSocketとWebGLを使ってネットワーク3D対戦アクションゲームを作ってみた(試作)

node.js websocket scenejs webgl

とりあえず試作として下記で作った奴を3D化してみた。上下移動がないしアクションが地味なのでWebGLのデモに向かないけど。
http://d.hatena.ne.jp/ndruger/20101123/1290493871

デモ

http://syspri.org/test/websocket_tile_3d/client/src/websocket_tile_3d.html

  • ゲームして楽しめるようには作ってません
  • キャラクターが接続しているブラウザの数(+[ダミープレイヤーが1人])だけ表示されます
  • 動作は全てのブラウザに反映されます。複数のブラウザ or windowで動かすと分かりやすいです
  • WebSocket + WebGLを使うのでFirefox4.xの一部とChromeの最新版でしか動きません。また、WebGLの利用のためグラフィックボードがプログラマブルシェーダーを持ってないと動きません
  • いろいろひどいので修正するかもしれません。
  • カメラの動きが視点とあってないのは、開発者が3D酔いし易いためです

注意: WebGLは環境によってはグラクラのような問題を起こし、画面表示の乱れなどを発生させる可能性があります。私の環境でも何度かブラウザが砂嵐になる現象が起こり、PCを再起動するまで直りませんでした。

スクリーンショット


ソース
やってること

通信とロジックは前の奴と同じ。

  • 1. WebGLのライブラリとしてSceneJSを使った
    • GLGE( http://www.glge.org/ )のデモがすごかったので使おうとしたが、いくつかのデモがChromeで動かなかったため、SceneJSの方が安定してると判断してSceneJSを利用
  • 2. 公開されているBlenderデータをキャラクタとして使った
    • 下記のブログを参考にして、公開されているBlenderデータを利用してみた

Blenderで出力したデータを使ってWebGLで簡単に3Dモデルを表示する(その1) - 強火で進め
http://d.hatena.ne.jp/nakamura001/20101114/1289755084

    • 手順
      • 公開されているBlenderデータからライセンスが大丈夫なものを探す
      • Blenderで読み込み、上記のブログのWebGL形式のエクスポートを参考に、SceneJSの形式でエクスポートする
      • SceneJSのバージョンアップのためかそのまま使えないので、1次元の配列に修正して利用する。結果が下記
      • SceneJSでNodeを作ってメインシーンに追加する
現状の問題
  • 実装の問題
    • 初期化周りのシーケンスがおかしい
    • SceneJS依存部分は切り出せそう
    • 座標設定が適当。たぶんこれも綺麗に切り出せる
  • 要修正
    • カメラの移動速度をPC依存にしないようにする
    • カメラの視点変更でプレイヤーの真上を通らないようにする
    • 描画の更新タイミング
感想とか
  • 3Dゲーム開発の敷居が下がったかも
    • javascriptで作れるし、よくできたライブラリもあるので、ちょっと3Dゲーム開発に開発してみるかぁと思ったらすぐにできる状況になった。まあ、結局作っていくと、結局光源とかカメラとか面倒なことを考えないといけなくなってくるんだけど。あとBlenderの操作の難易度の高さが異常。YouTubeで簡単な英語の解説動画がなければ投げ出してた。
  • 試作ではなく本番は、WebSocket + WebGL + Kinect(or Wiiリモコン) + AudioAPI(?)で、スターウォーズのライトセーバーでの決戦のようなリアルタイム体感3D対戦アクションゲームにするか迷い中。試せる人が少なすぎるがMMDのデータとか取り込んで対戦できたら楽しそう。