オリジナルバーチャルキーパッドの作り方

2018年5月2日

※追記

さらに一歩進んだブラウザゲーム用バーチャルパッドの作り方の記事もあります。

https://techlog.wgc-cosmo.com/how-to-make-vpad

ブラウザで遊べるゲームを作りたいけれどスマホでバーチャルパッドぐりぐりしながらボタン連打するようなゲームって作れるの？ってか見たことないけどあるの？って思ってる方けっこういるんじゃないですか？(いや、たぶんあんまりいないだろうな。。)そんなわけで私が苦労して編み出したスマホブラウザゲーム用バーチャルパッドの作り方を解説したいと思います。私の作ったコントローラーはこんな感じになってます。スマホの向きが横でも縦でも対応できるようになってます。縦ならゲームボーイ、横ならDSみたいな感じで遊べます。ただ...

—追記終わり—

スマホ向けゲームを作っていると指でポチポチするだけの単純なゲームになりがちです(批判してるわけではないですよ。ただ類似ゲームばかり・・・)

なので今回はバーチャルキーパッドを自作します。しかも、自分で言うのも何ですが、これ結構すごいです。ブラウザ上でも同時押しとか普通にできちゃいます(私ができるようにしたわけではなく、できるということが分かっただけなんですが(^^;))。

※私の自作キーパッドが見てみたい方はこちらのゲームを遊んでみてください

▷▷▷　秘密警察ギャボリン　第三話

ここではenchant.jsでの作り方ですが基本ノウハウが分かれば違う環境でも簡単に作ることができると思うので興味のある方は是非読んでいってください。

ちなみに今回の内容はスマホでの使用が前提ですが、キーボードでも操作可能です。矢印キーとZ、Xキーで操作できるようにします。というか、キーボードでの操作とくっつけてしまうことが一番の肝です！！

1 バーチャルキーパッドの画像を用意
2 各ボタンの変数について
3 方向入力について
4 ボタンの状態判定
5 バーチャルキーパッドの方向キーについて
6 バーチャルキーパッドをキー入力に合わせる
7 あとがき

バーチャルキーパッドの画像を用意

方向キー用の画像とA・Bボタン用の画像を用意します。大きさは好きにしてください。私のは方向キーは300px、ボタンは150pxで作ってます。（上の画像は方向キーボタンとボタンが押された状態のものです）

各ボタンの変数について

まずはバーチャルパッドではなく、キー入力から説明します。
キーの入力はGameオブジェクトのinput要素に保存されます。方向キーはinput.right、input.left、input.up、input.downにそれぞれ押したらtrue、押されていなければfalseが入ります。ボタンはちょっと違って、あらかじめ

game.keybind(90, 'a');

で指定したボタンにキーボードのキーを結び付けます(ここではaボタンを作ってます)。90はZキーのアスキーコードです。違うキーが良ければアスキーコードを調べて変えてください(‘ω’)ノ
こっちのボタンも方向キーと同様な感じでinput.aにtrueまたはfalseが入ります。

方向入力について

方向の入力を簡単に判断できるように上なら「0001」、右なら「0010」、下「0100」、左「1000」と言うふうに2進数で考えて、それを10進数に変換して当てはめます。右上なら「0011」といった感じになり10進数では３となります。

var KEY_UP = 1;
var KEY_UP_RIGHT = 3;
var KEY_RIGHT = 2;
var KEY_DOWN_RIGHT = 6;
var KEY_DOWN = 4;
var KEY_DOWN_LEFT = 12;
var KEY_LEFT = 8;
var KEY_LEFT_UP = 9;

定数を作っておくとわかりやすくてよいです。
であとは押されたボタンの数値を足すと方向が出ます。

direction = 0;
if(game.input.up){
    direction += KEY_UP;
}
if(game.input.right){
   direction += KEY_RIGHT;  
}
if(game.input.down){
    direction += KEY_DOWN;   
}
if(game.input.left){
    direction += KEY_LEFT;
}

あとはswitch文で分岐を作ってやればOK。これで左右同時押しなどおかしな入力は無視できます。

ボタンの状態判定

ボタンの判定は単純に

if(game.input.a){
    //押されている
}else{
    //押されていない
}

となります。しかしこれでは完ぺきではありません。なぜかというと、いつ押したか、いつ離したか、押したままなのか、離したままなのかということが分からないからです。

なのでもう一つ、直前のボタンの状態を所持する変数を作っておきます

game.input.a_prev;

で、ボタンの処理のたびに前回はどうだったか？という分岐を書いてやると今押したのか、押したままだったのかということが分かるということです(‘ω’)ノ

（ボタンについてのもうちょっと記事を書きました

▷▷▷　バーチャルボタン入力についてもうちょっと詳しく解説

バーチャルキーパッドの方向キーについて

さて、ここからやっとバーチャルキーパッドの話になります(´∀｀)とりあえず画面の好きなところに用意した画像を表示させてください。
で、実はこれは私が最初javascriptを勉強し始めるときに読んだ田中賢一郎さんの「ゲームで学ぶjavascript入門」参考にしています。

なのでプログラムを丸パクリに書いてしまうわけにもいかないのでここはサラッと説明します(;’∀’)

まず、マウスのクリック位置のevent.x、event.yと方向キーパッド画像の中心からの距離を出します。そしてそれの絶対値を出します。すると下図のようなグラフで考えられるようになります。

キーパッドの中心を原点として、x座標、ｙ座標を比較してx > yなら右、y > xなら上と判断できます。で、あとはxとｙが＋かーかで左右、または上下の判断をします(わかるかな(^^;))
ちなみに、この方法だと2x > yとか2y > xとかの条件で8方向も簡単に作れます。

バーチャルキーパッドをキー入力に合わせる

で、最後にバーチャルパッドをキー入力に合わせるようにします。そうするとキー入力の処理のプログラムを書くだけで済みます。

a_button.addEventListener(enchant.Event.TOUCH_START, function(event){//タッチスタート
    game.input.a = true;
});
a_button.addEventListener(enchant.Event.TOUCH_END,function(event){//タッチエンド
    game.input.a = false;
});

こんな感じで単純にaボタンがクリックされたらキーボード入力の対応ボタンをtrueにしてやるだけです。タッチエンドでfalse。
方向キーの場合はTOUCH_MOVEでも入力できるようにしておくとグリグリ操作できるようになります(´∀｀)
あ、あと押した方向キーが分かるようにボタンが光るようにするには、ボタンが一つ押された画像を用意して押されたボタンごとにrotationで角度を変えてやると全方向の画像を用意しなくても済みます。

と、こんな感じで私は自分のバーチャルキーパッドを作ってみました(*´ω｀)興味のある方は一度お試しくださいまし。

あとがき

ブラウザでは2か所同時にタッチすることはできないと思っていたので、こういうキーパッドでの入力はうまくいかないと思っていました(enchant.jsでキーパッド使ってるゲームほとんど見たことない・・)。なのでただ単純にポチポチして遊ぶスマホゲームみたいなものしか作れないと思ってました。
ところが「秘密警察ギャボリン第二話」の開発中に遊んでるときに「ダッシュボタン」を押しながら「ジャンプボタン」がしっかり反応することを発見！！！「いけるやん！！( *´艸｀)」ってテンション上がって自作でバーチャルキーパッドを作ってしまいましたとさ。めでたし、めでたし。。
ということです（笑）

バーチャルキーパッド記事