Javascriptでブラウザゲームを作る時のカーソルイベント・ベストプラクティス

Three.jsでゲーム開発の熱が一気に付いてしまった、ユゲタです。 元々ゲーム業界で2Dやら2Dやら動画制作やら、何でもやっていたユゲタとしては、ゲームの面白さの大きな要因の一つに、「操作感」というのがあると考えています。 ストーリーもデザインも音楽もとっても面白いんだけど、操作性が悪いだけで、「クソゲー」扱いされている残念なゲームもありますし、 もっと操作性がよければ、このゲームが上手に扱えるのに・・・とやはり直感的に操作できるということは、操作をしてゲームを楽しむ本筋にあたると思います。 もちろん、誰もがないがしろにしているわけではないと思いますが、何か鉄板的な法則があるのではないかと考えて、今回は、今現在開発を進行しているゲームの操作仕様を確定させると同時に、 ブラウザゲームにおけるイベント処理のベストプラクティスを追求してみたいと思います。

初回構築ケース

ブラウザゲームでは、マウス操作、キーボード操作が基本的にゲームコントロール方法になりますが、スマートフォンの場合は、タッチ操作のみになり、PCとスマホでは、全く違うこの操作方法を同じにする必要もあるのですが、今回はPCのキーボード操作に関しての仕様を考えてみます。 まず初めに操作仕様を盛り込む場合は、addEventListenerで、keyDownとkeyUpにキーボードで押されたkeyの番号を判別して、キャラクターが右に行ったり、左に行ったりする操作を行います。 でも実際に、キャラクタを画面に表示して、カーソルキーで動かしてみると、なんか違和感を感じてしまいます。 それは、キャラクターを素早く右、左と動かす時に、どうしても「同時押し」をしてしまうというために、これに対応するプログラミングをしないと「なんかキャラクターが思った通りに動いてくれない・・・」という操作性の悪いゲームになるというワケですね。 ちなみに、この基本状態を、文章で書いてみると、次のような挙動になる。

1. 右キーを押す：キャラが右に移動
2. 左キーを押す：キャラが左に移動
3. 右キーを離す：キャラが動きを停止
4. 左キーを離す：何もなし

3番目の時点でまだキーを押しているのに、キャラクターの動きが止まってしまうのが、操作性が悪いストレスになってしまいます。

キーが押されている状態では動作を保持するケース

では、次に考えたのが、キーを複数同時押しするという事が前提で、押したキー（keyDown）番号を配列で保持して、キーから指が外れる（keyUp）タイミングで、該当するキー番号を削除するフラグ方式にして、指を離した時に、フラグが残っている場合にキャラクターが動作を停止しないようにするとどうでしょう？ これは、理論的に、キーボードが押されている場合と、すべての指がキーボードから離れた事が計測できます。

1. 右キーを押す：キャラが右に移動
2. 左キーを押す：キャラが左に移動
3. 右キーを離す：何もなし
4. 左キーを離す：キャラが動きを停止

とりあえず、こんな感じで、何となく上手く行った様に思えますが、しばらく操作を続けていると、やっぱりなんか違和感を感じました。 これまでは、右押し→左押し→右離し→左離し、という順番にキーを押して離していたんですが、次の操作で違和感を感じました。

右押し→左押し→左離し→右離し

この場合、次の様な挙動になります。

1. 右キーを押す：キャラが右に移動
2. 左キーを押す：キャラが左に移動
3. 左キーを離す：何もなし
4. 右キーを離す：キャラが動きを停止

おわかりいただけただろうか？ 3番目の左キーを離した段階で右キーが押されているのに、キャラクターが右の方に進んでいる状態になっているんですね。 なんとなく、アルゴリズム的に仕方がないと考えていたんですが、やっぱりこの状態は「操作性が悪い」と絶対に感じてしまうと思い、もう少し考えてみることにした。

押されたキーは予約フラグで、離したタイミングで優先予約の動作を実行するのがBEST

そして、行き着いたのが、この仕様。 これまでは、keyDownは、キャラクターの動作を開始するイベントで、keyUpイベントは、フラグを解除しつつ、動作を停止するイベント処理として考えてきたんですが、 keyUpの時に、予約フラグが残っていれば、おの予約された動作を実行（開始）するという処理を加えてみると、次の様になりました。

1. 右キーを押す：キャラが右に移動
2. 左キーを押す：キャラが右に移動したまま
3. 右キーを離す：キャラが左に移動
4. 左キーを離す：キャラが動きを停止

そして、次のケースでも違和感が一切なくなりました。

1. 右キーを押す：キャラが右に移動
2. 左キーを押す：キャラが右に移動したまま
3. 左キーを離す：何もしない
4. 右キーを離す：キャラが動きを停止

いや〜、文章だけで、操作性を説明するの難し〜〜〜！！！と思って書いてみましたが、自分的には、非常にスッキリする仕様が決まって満足です。 この出来栄えは、ゲームが完成した際に確認をしてもらうことで、納得いってもらえるともらえると思うので、お楽しみに！ ちなみに、もっと深く仕様について聞いてみたい人は、Contactページからお聞きくださいませ。