[開発]Javascript+Canvasで実装したMMORPGのクライアント(2)
「3D空間上にキャラと地面を表示して歩かせる」というのをJavascriptとCanvasで実装したもの。 前回のバージョンに少し手を入れた。
http://dgames.jp/archive/world/client20090610/world.html
- 動作確認をしてるのはWindows上のChrome、Firefox、Safari、Opera
- Chrome推奨。Safariも速い
- Canvasが使えないIEはまともに動かないはず
- スペースキーで視点回転、地面をクリックするとそこに移動
- 自キャラはNPCの絵はランダムで決定
細かいバグを修正し、エリア移動の機能を実装した。 エリア移動とはいっても公開しているのはクライアントプログラムのみなので、 サーバーの処理は切ってあるので、たんに黄色い地面を踏むとエリアが切り替わるだけ。
実は内部的にはソースを結構書き換えてはいるのだけど（後々管理しやすいように）、表面上はあんまり変わってないかな。
細かいところだとキャラ画像の表示方法を変えた。前回はCanvasのImageで画像を生成して描画していたのだけど、今回はHTMLのimgタグで表示してる。 というのは、Chromeで動かしたときCanvasのImageだとGIFアニメがうまく動いてくれないため。 imgタグで使用するGIFを画面のどこかに表示しておくと、 Imageのほうもアニメーションしてくれるのだけど、これだと無駄に画像を表示しないといけない。 Firefoxだとそんなことないんだけど……。
今回はキャラクタがチャットウィンドウの上に表示されてしまっている。 わざとこうしているのだけど、その理由はウィンドウの下に描画するとクリックイベントが検出できなくなってしまうため。 まあ上にクリック検出用の透明画像を重ねてやれば、 ウィンドウの下に描画することも可能だと思うのだけど、まだそこまではやっていない。
ただimgタグでキャラクタを表示しちゃうとCanvasに表示したポリゴンとZソートできないんだよなあ……。 CanvasのImageで描画したときにGIFアニメがちゃんと動いてくれるようにする方法があるといいのだけど。