バーチャルキーパッドの作り方【enchant.js】

※追記

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

WGCコスモ技術部

 

1 user

2021-01-17 13:57:27

スマホ用ブラウザゲームで使えるバーチャルパッドの作り方

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

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

—追記終わり—

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

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

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

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

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

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

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

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

各ボタンの変数について

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

game.keybind(90, 'a');

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;
}

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

game.input.a_prev;

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

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

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

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

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

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