バーチャルキーパッドの操作の問題点を改善する

2019年7月1日

以前書いたバーチャルキーパッドのプログラムでは4方向ならほとんど問題ないんだけど、8方向になると狙った方向を入力しづらいという問題がありました。

これは実際にボタンやレバーを操作するわけではないため「どこを押しているか感覚でわからない」ために入力がずれてしまうことが多発していました。

今回はこの問題を解決し新しいキーパッドを作ります。

1 押す位置がズレる原因を考える
2 ズレた分だけ動かせばいい
3 ズレに合わせる入力の作り方
4 まとめ

押す位置がズレる原因を考える

この入力がずれてしまう一番の原因は「バーチャルキーパッドの中心から指がずれていく」ことだと考えました。

実際自分でプレイしている指を観察すると間違いなく指の位置がずれていきました。

コントローラーと違いまっ平な画面では十字ボタンの中心位置などを指で感じとることができないので指を動かしているうちに指の位置がどんどん中心からずれていってしまうのです。

それによって8方向になると斜め右下に入れたつもりが右に動いたり真下に動いたり、と思った通りに動かなくなっていたわけです。

ズレた分だけ動かせばいい

ものすごく単純な発想ですが「中心がずれていくならズレた分中心をずらせば良いんじゃない？」ってことです。

右を入力するときに指がキーパッドの中心よりかなり右に動いてしまったら中心も右に動かしてあげればズレる確率がかなり下がるのでは？と考えたわけです。

イメージとしては下図のような感じに中心(赤い部分)を動かします。

これで解決するはずです。

ズレに合わせる入力の作り方

バーチャルキーパッドの基本的な部分はこの記事のままです(プログラムは書いてないけど)

▷▷▷　バーチャルキーパッドの作り方

上の記事では画像の中心がキーパッドの中心となっていたんですが、それを最初にタッチした位置を中心になるように変更します。

this.addEventListener("touchstart", function(event){
    this.center_x = event.x;
    this.center_y = event.y;
});

そしてそこから動かされた方向が入力方向になります。この動かされた距離が一定以上になった場合に中心を指を動かした方向の指から一定の距離まで移動させます。

this.addEventListener("touchmove",function(event){
    var vecY = event.y - this.center_y;
    var vecX = event.x - this.center_x;
    var vec = this.sqrt(vecX * vecX + vecY * vecY);//移動量を計算
    var angle = trig.getAimAngle(event.x, event.y, this.center_x, this.center_y);
    var result = trig.getData(angle);
    if(vec > 60){//移動幅が大きいときは中心も移動させる
        this.center_x = event.x - result.cos * 60;
        this.center_y = event.y - result.sin * 60;
    }
});

計算では自作の三角関数クラス使ってるのでわからない方はこちらの記事をお読みください。

▷▷▷　ゲームに使う三角関数のクラスを作っておく

方向入力の部分は自分で作ってね(*´ω｀)ノ