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

今回は自作バーチャルキーパッドのボタン入力についてもうちょっと詳しく解説してみようかと思います。

※以前書いたバーチャルキーパッドの記事のリンクを貼っておきます。

▷▷▷　バーチャルキーパッドの作り方

今回は例としてAボタン(Aという名前のボタン)を作ります。違う名前が良い方は自由に変えてくださいね(*´ω｀)

キーボードの入力を設定する

まず、バーチャルキーパッドを作る際はPCのキーボードとスマホのタッチ入力のどちらでも対応できるように作っておく必要があります。なので、まずはキーボード入力ができるようにします。

core.keybind(90, 'A');

これはGameオブジェクト(私はcoreという変数名にしています)のkeybindメソッドを使ってキーコード90にAという名前を付けてボタンを作っています。90はZキーのアスキーコードです。つまりZキーをAボタンと設定しています。そしてcore.inputに新しくAというプロパティが作られます。そしてこのcore.input.Aにキーが押されていたらtrue、押されていなければfalseが入るようになります。

Spriteでバーチャルボタンを作る

次にバーチャルボタンを作ります。これはすごく簡単で単純にボタン表示用にSpriteを用意してタッチの有無を判別するだけです。

しかし、キーボード入力とタッチ入力で別々に処理を書くのは面倒なのでタッチ入力の状態をcore.input.Aに入力します。こうすると処理がcore.input.Aに対して行うだけで済みます。

で、汎用性を考えてボタンクラスを作っておきます。それがこちら

var Act_btn = enchant.Class.create(enchant.Sprite, {
    initialize: function(w, h, key){//w, hは幅と高さ、keyはボタン
        enchant.Sprite.call(this, w, h, key);
        
        this.addEventListener("touchstart", function(){
            core.input[key] = true;
        });
        this.addEventListener("touchend", function(){
            core.input[key] = false;
        });
    }
});

Spriteクラスにタッチイベントが追加されただけですね。引数のkeyはボタンの名前です。

いつ押したのか？いつ離したのか？が大事

core.input.Aには押されていればtrue、押されていなければfalseが入るわけですがそれだけだと「いつ押したか？」「いつ離したか？」は判定できません。押しっぱなしはずっとtrueだし、押されていなければずっとfalseです。

それの何が問題なのか？っていうとですね、例えば押した時だけ弾を撃ちたいというようなときに、押したその1回だけを判定したいのにtrueのあいだ弾を撃ち続けてしまうことになります。これじゃ思った通りのゲームができませんね。

「いつ押したか？」ということを知るには押された瞬間がわかればいいわけです。押された瞬間と言うのは前の状態と違う状態になるってことです。つまり「前のフレームはどうだったか？」ということがわかれば「押した」「離した」を知ることができます。

core.keybind(90, 'A');
core.input.A_prev = false;

keybindメソッドでAボタンを作るときにAボタンの前のフレームの状態を保存するA_prevプロパティを作っておきます。

キー入力は毎フレームチェックする必要があります。前のフレームの入力状態がわかれなければ正しく判定できません。なので次は毎フレームごとにチェックする処理を作ります。

ボタン押下の判定条件を4つ作る

ボタンの操作には4つあります。それは「押した瞬間」「押しっぱなし」「離した瞬間」「押されていない」です。

で、それぞれの状態の値を決めます。「押した瞬間＝true」「押しっぱなし＝KEY_HOLD」「離した瞬間＝KEY_RELEASE」「押されていない＝false」。

var KEY_HOLD = 2;
var KEY_RELEASE = -1;

定数を作ってわかりやすくしておきます。どうしてこの数値になっているかというと1以上は押している、0以下は押していないという判断もできるからです(まぁほとんど使わないんだけどさ(^^;))

ボタン押下状態をチェックするメソッドを作る

チェックメソッドはキーパッドグループを作ってその中に作っています。

var Keypad = enchant.Class.create(enchant.Group,{
    initialize: function(){
        enchant.Group.call(this);

        this.A = new Act_btn(150, 150, 'A');//ボタンクラス生成
        this.A.image = core.assets['img_buttons'];
        this.A.frame = 0;
        this.A.frame_base = 0;//基準フレーム(複数ボタン扱うために)
        this.addChild(this.A);
      
    },
    //ボタンの入力チェック
    checkBtn: function(key){
        if(core.input[key]){
            this[key].frame = this[key].frame_base + 1;//フレーム切替
            if(core.input[key+'_prev'] == false){
                core.input[key+'_prev'] = true;
                return true;//押されたとき
            }
            return KEY_HOLD;//押しっぱなし
        }else{
            this[key].frame = this[key].frame_base;//フレーム切替
            if(core.input[key+'_prev'] == true){
                core.input[key+'_prev'] = false;
                return KEY_RELEASE;//ボタンを離した時
            }
            return false;//押されていない
        }
    },
});

checkBtnメソッドは引数で受け取ったボタンの判定をします。

まず、ボタンが押されているかを判定し、押されていれば前のフレームではどうだったかを見ます。前回が押されていなければcore.input[key+’_prev’]をtrueにして戻り値でtrueを返し、押されていればkEY_HOLDを返します。ボタンが押されていない場合も前フレームをチェックしてそれに応じて値を返します。

if(keypad.checkBtn("A") == true){
    //処理
}

メインループ内に以上のように書いておけばAボタンが押されたときの処理が作れます。

あとframe_baseプロパティはボタンごとに画像が違う場合にベースとなるフレーム番号を保存しておくためのものです。ボタンの画像を変えない場合には必要ないと思います。

まとめ

いかがだったでしょうか？ちょっとわかりづらかったですかね(^^;)まぁ私も説明しづらかったんでどうしようもないんですけど(；´∀｀)

とにかく前のフレームではどうだった？ってことがわかれば良いってことです。あとは自分でうまく作ってくださいな(‘ω’)ノ

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

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

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