バーチャルキーパッドでの操作の問題点を改善する
以前書いたバーチャルキーパッドのプログラムでは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; } });
計算では自作の三角関数クラス使ってるのでわからない方はこちらの記事をお読みください。
方向入力の部分は自分で作ってね(*´ω`)ノ
まとめ
これで指が中心から離れてしまっていても中心が一緒に一定の距離まで移動してきてくれるのでズレる確率がグッと下がると思います。
私のゲームの場合、画像から指がはみ出してもタッチはキャンセルにならないのでどんだけキーパッドの画像から指が離れてもコントロールすることができるようになっています(夢中になると気づかずにかなり指が動いてしまうことがあるので。てのは言い訳でただキャンセル入れてないだけです(^^;))。
この作り方だと実はキーパッドの画像などつけなくてもどこで画面をタッチしても方向入力できるようにも作れます。ただ私はボタン入力も欲しいのでコントローラーの形にしています。
ちなみにこのコントローラーはこのゲームで使ってます(ゲームは激ムズです)。
さらに全方向入力に対応のバージョンもあります。それはこちらのゲームで使ってます。
全方向のキーパッドとタッチ操作の違いは移動速度を一定に保てることです。なのでスマホのシューティングゲームではほぼ見ないスピードアップアイテムを作ることができます。
バーチャルキーパッド記事
同カテゴリー記事
記事の感想・コメント
※コメントはまだありません※