Jewel-mmo開発日記

Javascript+Canvasで実装したクライアント

追記: ソースを書き直した新しいバージョンがこっちにあります。

「3D空間上にキャラと地面を表示して歩かせる」というのをJavascriptとCanvasで実装したもの。

http://dgames.jp/archive/world/client20090404/world2.html

※動作確認をしてるのはWindows上のChrome、Firefox、Safari。Canvasが使えないIEはまともに動かないはず。スペースキーで視点回転、その他の操作はウィンドウのテキスト参照

去年の夏から秋にかけて作っていたのだけど、キャラ画像が借り物だったので公開できないでいた。 先日良い素材を見つけたので手直しして公開。 まだまだ試作品レベルだけど。

動かす場合はChrome推奨。Firefoxより断然速く、手元の環境では秒間30〜60フレームくらい出る（FPSは画面右上）。 最初プロトタイプをStar Rubyで書いてたんだけど（ポリゴン描画ができないのでワイヤーフレーム）、 Javascriptに移したらかなり速くなった（うろ覚え）。 3D座標と変換はJavascriptでちまちま計算してる。 Javascriptを良くわかってないので、もっと速く動作するように書くことができると思う。 現時点ではあまり速度は追求してない。 とりあえず動かしてみたら思ったより快適に動いた。

ちなみに、公開しているのはクライアント部分（静的なHTML）のみだが、実際はサーバー側と連動して、複数のプレイヤーでチャットをしたり、キャラの移動情報が共有されるようになっている。 今回はサーバーサイドとやりとりする部分は切り取ってある。 サーバー側はRails+ShootingStarで実装してる。

メモ。

• HTMLで画像を読み込んでおかないとGifアニメが動かない
• スクリーン内のフォントは2度書きして影をつけているので、フォントによっては表示が崩れるかも

バグ。

• たまに止まることがある。キャラ画像の切り替えがうまく言っていない模様（よくわかってない）
• スリープに入ってから再開するとウィンドウ上をクリックしても移動できない
• たまに視点がキャラを追随しない