コメント以前書いたバーチャルキーパッドのプログラムでは4方向ならほとんど問題ないんだけど、8方向になると狙った方向を入力しづらいという問題がありました。これは実際にボタンやレバーを操作するわけではないため「どこを押しているか感覚でわからない」ために入力がずれてしまうことが多発していました。今回はこの問題を解決し新しいキーパッドを作ります。ズレる原因を考えるこの入力がずれてしまう一番の原因は「バーチャルキーパッドの中心から指がずれていく」ことだと考えました。実際自分でプレイしている指を観察すると間違いなく指の位置がずれていきました。コントローラーと違いまっ平な画面では十字ボタンの中心位置などを指で感じとることができないので指を動かしているうちに指の位置がどんどん中心からずれていってしまうのです。それによって8方向になると斜め右下に入れたつもりが右に動いたり真下に動いたり、と思った通りに動かなくなっていたわけです。ズレた分だけずらせばよくね?ものすごく単純な発想ですが「中心がずれていくならズレた分中心をずらせば良いんじゃない?」ってことです。右を入力するときに指がキーパッドの中心よりかなり右に動いてしまったら中心も右に動かしてあげればズレる確率がかなり下がるのでは?と考えたわけです。イメージとしては下図のような感じに中心(赤い部分)を動かします。これで解決するはずです。上の記事では画像の中心がキーパッドの中心となっていたんですが、それを最初にタッチした位置を中心になるように変更します。event.y;});そしてそこから動かされた方向が入力方向になります。この動かされた距離が一定以上になった場合に中心を指を動かした方向の指から一定の距離まで移動させます。60;}});計算では自作の三角関数クラス使ってるのでわからない方はこちらの記事をお読みください。́ω`)ノまとめこれで指が中心から離れてしまっていても中心が一緒に一定の距離まで移動してきてくれるのでズレる確率がグッと下がると思います。私のゲームの場合、画像から指がはみ出してもタッチはキャンセルにならないのでどんだけキーパッドの画像から指が離れてもコントロールすることができるようになっています(夢中になると気づかずにかなり指が動いてしまうことがあるので。言い訳でただキャンセル入れてないだけです(^^;))。この作り方だと実はキーパッドの画像などつけなくてもどこで画面をタッチしても方向入力できるようにも作れます。私はボタン入力も欲しいのでコントローラーの形にしています。ちなみにこのコントローラーはこのゲームで使ってます(ゲームは激ムズです)。GRINDさらに全方向入力に対応のバージョンもあります。それはこちらのゲームで使ってます。Fighter全方向のキーパッドとタッチ操作の違いは移動速度を一定に保てることです。スマホのシューティングゲームではほぼ見ないスピードアップアイテムを作ることができます。コメントをキャンセルメールアドレスが公開されることはありません。Fighter蚊を潰すゲーム「vs.蚊」GRINDALIENSうえにいく開発ブログカテゴリーenchant.jsenchant.js初心者講座enchant.js改造wordpressその他アプリ開発ゲームエンジン開発ゲームプログラミングブログランキングいんわんウェブゲームセンターコスモ運営者のいんわんです。このサイトもゲームも全部一人で作ってます。プログラミングは若かりし頃に専門学校で習った以外は独学です。努力と根性と野生の勘で作ってます。作ってほしいゲームなどあればコメント欄にでも書いてもらえると作るかもしれません。褒められると伸びるタイプなのでコメント欄にはポジティブなことをお願いします。ウェブゲームセンターコスモ。