下林明正のブログ

個人的かつ雑多なブログです。

3Dダンジョンをスマフォで探検してみる

Wizardryっぽい3Dダンジョンをスワイプとかで移動できるようにしたらどういう操作感になるのか気になったのでつくってみた。

shimobayashi/maze-touch

  • canvasでがんばって3Dダンジョンを描画する
  • viewportで無理やり横幅320ピクセル固定にする
    • ピクセルを固定したのは、今後ゲームっぽい画面をつくるのに便利そうな気がしたから
  • hammer.jsでスワイプイベントを取得する

という感じでつくってみた。

実際に触ってみた感想としては、hammer.jsの調整の結果若干指が疲れるけどそこまで非現実的な感じもしなかった。 ただ、Chromeのスワイプによるタブ移動とバッティングしていて、意図せずタブ移動してしまうことがある。 これを無効にする方法が無いのか簡単に調べてみたけど、分からなかった。 Issue 159623 - chromium - New Feature to disable the swipe to move to open tabs - An open-source project to help move the web forward. - Google Project Hostingとかで外人がどうにかしろって言い続けてるけど、特に変更される気配はない。 今後ウェブアプリみたいなのをサポートしていくつもりがあるのなら、この挙動はオプションにしないとまずいと思う。

個人的には、3Dダンジョンの部分をいちばん頑張った。 サンプルデータじゃ分からないだろうけど、

  • ダンジョンの端がループしている
  • 一方通行の壁

をこのアルゴリズムはサポートしている。 世にあふれるサンプルみたいなのは大体この辺りサポートしてないと思うんだけど、本家に倣ってちゃんとサポートしたので、本家っぽいダンジョンがつくれると思う。 20x20の中に広大なダンジョンを折りたたむことができる。

hammer.jsは検索してもよく分からんのでコードを眺めながら使うみたいな感じに若干なった。 jQuery 2.0も使ってるけど本来ならモバイルアプリケーションには使うべきじゃないのかもしれない。よく知らない。2.0になって互換性切り捨てた代わりに色々と良くなったという話だった気がするので、まあいいんじゃないだろうか。といっても、今のところ難しい処理は何もしていないので何のありがたみもない。

一応今後の展望としては、気が向いたら扉とかちゃんと追加したりして拡張していって、pjaxとかその辺で良い感じに戦闘とかシーンごとにHTMLを分けて実装して、最終的にはPhoneGapとかでネイティブアプリということにして配布する、という感じ。 でもそこまでやる気続かないと思う。中学生の頃から定期的に同じようなことをしている。

とりあえず実働品はここに置いてみる。 一応PCでも動く。WASDで移動できる。