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

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

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

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

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

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

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

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


方向キー用の画像と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進数では3となります。

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座標、y座標を比較してx > yなら右、y > xなら上と判断できます。で、あとはxとyが+かーかで左右、または上下の判断をします(わかるかな(^^;))
ちなみに、この方法だと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でキーパッド使ってるゲームほとんど見たことない・・)。なのでただ単純にポチポチして遊ぶスマホゲームみたいなものしか作れないと思ってました。
ところが「秘密警察ギャボリン第二話」の開発中に遊んでるときに「ダッシュボタン」を押しながら「ジャンプボタン」がしっかり反応することを発見!!!「いけるやん!!( *´艸`)」ってテンション上がって自作でバーチャルキーパッドを作ってしまいましたとさ。めでたし、めでたし。。
ということです(笑)

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

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

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

当サイトのオリジナルゲーム(ランダム表示)

障害物を避けながらただただ上を目指すゲームです。オンラインランキング機能付き
マリオ風アクション。敵を撃ち落としてコインを集めるげーむ。
哀れな魂を愛に導くゲーム。壁に当たるまでまっすぐにしか進めません。全10ステージ。
空いている一つのマスを利用して並び替えるパズルゲーム。

記事の感想・コメント

※コメントはまだありません※

コメントを残す

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

ゲームタグ

メニュー

ゲーム一覧ページへのリンク画像
ゲーム開発技術ブログへのリンク画像
pixi.jsでのゲーム開発へのリンク画像
enchant.jsでのゲーム開発へのリンク画像
グッズページへのリンク画像

ゲーム開発の参考書(amazon)

HTML5 ゲーム開発の教科書 スマホゲーム制作のための基礎講座
ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング[改訂版]
ドット絵教室