iPhoneの加速度センサーをコントローラーにしてWebGL内を動くマルチプレイヤーゲームを作ってみた
この作品は「第0回 HTML5プログラミング＆クリエイティブ・コンテスト」へ応募した作品です。
WebSocketの普及により、ブラウザの載っている端末は、他のブラウザで表示している物の、リアルタイムなコントローラーとして利用できるようになることを実感できるような内容となっています。
iPhone / Androidをマルチプレイヤーゲームコントローラーとしての利用する作品として2つのパートに分かれています。
パート2が、加速度センサーとWebGLを使った物です。
パート1. WebSocketを利用したiPhone / Androidによるマルチプレイヤーゲームコントローラーのサンプルゲーム1
この作品では、WebSocketを使えば、特定の場所に集まった人々が、iPhone / Androidをコントローラーとして利用して、一緒に簡単にゲームに参加できることを示します。
技術的な内容はデモコンテンツに記述してあります。
デモコンテンツ
「第0回 HTML5プログラミング＆クリエイティブ・コンテスト」用には別なURLを利用しています。
http://www.syspri.org/test/websocket_tile_with_controller/src/viewer.htm
websocketが利用できないブラウザだと遅くなります。
パート2. WebSocketを利用したiPhoneによるマルチプレイヤーゲームコントローラーのサンプルゲーム2
この作品では、パート1のようなコントローラーとしての利用を更に発展させ、iPhoneの加速度センサーなどもコントロールに利用できることを示します。
技術的な内容はデモコンテンツに記述してあります。
デモムービー
デモコンテンツ
「第0回 HTML5プログラミング＆クリエイティブ・コンテスト」用には別なURLを利用しています。
http://www.syspri.org/test/motion-sensor-controller-game/client/viewer.htm
ソースコード
未リファクタリングなので、業務で書いたらガンジーに助走をつけて殴られるレベルの物になってます。
http://www.syspri.org/test/motion-sensor-controller-game/
個人的な技術課題メモ
- 今回真面目に実装しなかった未検討課題
- サーバーとクライアントの共通処理の正しい切り出し
- 継承しちゃうかどうか
- node.jsでのモジュールにないライブラリのincludeと正しい利用方法
- 任意軸回転の計算
- クオータニオン使った回転は計算が面倒だけど、視点制御とかに必須。
- サーバーとクライアントで持つ情報の整理
- 論理座標はサーバーで、クライアントはアニメーションで変わるレベルの表示座標でいいのか？
- アニメーションの同期
- カメラとプレイヤーの同期。アニメーション中にそれが依存する値が変えられるケースの分類。
- 速度調整(どこをタイマー値ベース or 変化量ベースにするのか)
- DeviceOrientationの利用
- 今回の場合、DeviceMotionイベントじゃなくて、DeviceOrientationイベントの方が使えるはず
- node.jsの個々のプログラムのサービス化
- サーバーとクライアントの共通処理の正しい切り出し
