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

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

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

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

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

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

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

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

それによって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;
    }
});

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

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

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

まとめ

これで指が中心から離れてしまっていても中心が一緒に一定の距離まで移動してきてくれるのでズレる確率がグッと下がると思います。

私のゲームの場合、画像から指がはみ出してもタッチはキャンセルにならないのでどんだけキーパッドの画像から指が離れてもコントロールすることができるようになっています(夢中になると気づかずにかなり指が動いてしまうことがあるので。てのは言い訳でただキャンセル入れてないだけです(^^;))。

この作り方だと実はキーパッドの画像などつけなくてもどこで画面をタッチしても方向入力できるようにも作れます。ただ私はボタン入力も欲しいのでコントローラーの形にしています。

ちなみにこのコントローラーはこのゲームで使ってます(ゲームは激ムズです)。

GRIND

さらに全方向入力に対応のバージョンもあります。それはこちらのゲームで使ってます。

Cosmo Fighter

全方向のキーパッドとタッチ操作の違いは移動速度を一定に保てることです。なのでスマホのシューティングゲームではほぼ見ないスピードアップアイテムを作ることができます。

コメントを残す

メールアドレスが公開されることはありません。

ゲームタグ一覧

おすすめゲーム

  • ゲーム「さめがめ」のサムネイル
    さめがめ
    同じ色で複数くっついているタイルをタッチして消すパズルゲーム。一度にたくさん消すと高得点!
  • ゲーム「フリック&チェイン」のサムネイル
    フリック&チェイン
    同色のブロックを4つ以上つなげると消えるパズルゲームです。ランキングはHARDのみ対応
  • ゲーム「コスモファイター」のサムネイル
    コスモファイター
    レトロ風の縦シューティングゲーム。敵が個性的に動き回わるところも懐かしさを感じます。
  • ゲーム「vs.蚊」のサムネイル
    vs.蚊
    部屋に蚊が侵入!その数10匹!何としても奴らを殲滅せねばならぬ!!一匹残らずぶっ潰せ!!
  • ゲーム「うえにいく」のサムネイル
    うえにいく
    障害物を避けながらただただ上を目指すゲーム。シンプルだけど集中力が必要です。