2022-08-18に更新

ブラウザゲームの操作入力を一括管理するインプットマネージャーを作る

ブラウザゲーム

ブラウザゲームを作るときにゲームを操作できるものがたくさんあります。キーボード、マウス、ゲームパッド、そしてスマホのタッチ入力。これらからの入力を一括して管理できればめちゃくちゃ楽で便利ですよね。

というわけでこれらの操作入力を一括管理をしてくれる便利なinputManagerクラスを作りたいと思います。

あ、一括管理と言いましたけどスマホやマウスのただのタッチ入力は関係ありません。これは個別で必要に応じて作ればいいです。まとめて管理するのはキーボード、ゲームパッド、そしてスマホのバーチャルキーパッドの入力です。

けっこう長いプログラムになるので面倒ですが一回作れば今後のゲーム開発がクッソ楽になるので頑張ってつくりましょう(‘ω’)ノ

ちなみに開発環境はpixi.js + Typescritptですが今回はpixi.jsは関係ないです。javascriptでもゲームパッド以外はできると思います(ゲームパッドはnpmで入れてるのでjsなら要自作。他はenchant.jsでも同じもの作ってました)。他の言語については全く分かりませんがどうやってるかってのは参考になるかなと思います(‘ω’)

ゲーム操作に必要な定数を作る

ではまず先に入力の判断に使う定数を作ります。

方向入力の定数

方向入力の定数を作ります。方向入力は8方向で作ります。

で、まず8方向のうちの4方向、上下左右を4桁の2進数で考えるようにします。0000が何も押されていない状態です。で
- 0001 上
- 0010 右
- 0100 下
- 1000 左

と考えてください。こうすると上と右が押されると3になります。左上が押されると9になります。こんな感じで8方向の定数を作ると

public keyDirections = {
  UP: 1,
  UP_RIGHT: 3,
  RIGHT: 2,
  DOWN_RIGHT: 6,
  DOWN: 4,
  DOWN_LEFT: 12,
  LEFT: 8,
  UP_LEFT: 9,
}

となります。

キーボードではいくつも同時にキーが押せるため変な数字になることがありますが入力判定処理時にこの定数以外の場合は無視すればOKです。

ボタンの状態管理用定数

キーボードやゲームパッドのボタンは単純に押した離しただけではなくて、正確にゲームでコントロールしようと思うと「今押した」「押しっぱなし」「今離した」「押してない」という4つの状態が必要になります。

なのでその定数を作っておきます。

public keyStatus = {
  HOLD: 2,
  DOWN: 1,
  UNDOWN: 0,
  RELEASE: -1,
}

ボタンの状態管理用変数

次はボタンの状態を入れておく変数を作ります。

で、この状態を管理する変数ですが1つのボタンについて2つ作ります。これはボタンが「今押した」のか「押されっぱなし」なのかという状態を知るために前の状態を残しておくためです。一つ前の状態が押されているかどうか分かれば今押された(離した)のかどうかが分かります。

public input = {
  //入力されたキーのチェック用
  keys: {
    Up: false,
    Right: false,
    Down: false,
    Left: false,
    A: false,
    B: false,
    Start: false
  },
  //一つ前のキーの状態管理用
  keysPrev: {
    Up: false,
    Right: false,
    Down: false,
    Left: false,
    A: false,
    B: false,
    Start: false
  }
}

私は方向入力以外はAボタン、Bボタン、スタートボタンしか作ってないですがもっと欲しい人は追加してください。

キーボード入力イベントを作る

キーボードの入力イベントを作ります。

なんかkeyCodeが非推奨みたいですがそんなの気にしない(^^;)気になる方は修正してください。押されたキーをtrueに、離したらfalseにしてます。

document.addEventListener('keydown', (e) => {
  switch(e.keyCode){
    case 87://w
      this.input.keys.Up = true;
      break;
    //以下同様に他のボタンも作る
  }
});
document.addEventListener('keyup', (e) => {
  switch(e.keyCode){
    case 87://w
      this.input.keys.Up = false;
      break;
    //以下同様に他のボタンも作る
  }
});

キーの入力をチェックする関数

入力方向を調べる関数

押されている方向キーの数字を合算して返します。単純に足してるだけです。

 public checkDirection() {
  let direction = 0;
  if(this.input.keys.Up){
      direction += this.keyDirections.UP;
  }
  if(this.input.keys.Right){
    direction += this.keyDirections.RIGHT;
  }
  if(this.input.keys.Down){
    direction += this.keyDirections.DOWN;
  }
  if(this.input.keys.Left){
    direction += this.keyDirections.LEFT;
  }
  return direction;
}

入力状態の取得

現在のキーの状態を取得します。引数は状態管理用変数に使っているボタンの名前(UpとかAとかStart)を入れて使います。これで返ってくる値が現在のボタンの状態です。

またこれを使うのは毎フレーム1回だけです。ここでkeyPrev(前回の状態)を書き換えているので2回以上使うとおかしくなります。必要な場合は戻り値を保存して使ってください。

public checkButton(key: string) {
  if(this.input.keys[key]){
    if(this.input.keysPrev[key] == false){
      this.input.keysPrev[key] = true;
      return this.keyStatus.DOWN;//押されたとき
    }
    return this.keyStatus.HOLD;//押しっぱなし
  }else{
    if(this.input.keysPrev[key] == true){
      this.input.keysPrev[key] = false;
      return this.keyStatus.RELEASE;//ボタンを離した時
    }
    return this.keyStatus.UNDOWN;//押されていない
  }
}

上の2つの処理がミソ

このinputManagerの一番のポイントはゲームの入力をチェックする際にキーボードだろうがゲームパッドだろうがバーチャルパッドだろうが上の2つの処理から入力をチェックできることです。これができるようにするためにボタンの状態管理用変数を作っているわけです。

inputManagerの役目はゲームのプログラムを書くときに入力デバイスのことを考える必要がないようにすることです。

ゲームパッドの入力について

ゲームパッドの入力については先にこちらの記事を読んでください(‘ω’)ノ
ブラウザゲームでもコントローラーで操作できるようにする！

で、ゲームパッドの入力判定してるところで

if(this.gamepad.button('dpad down')){
  this.input.keys.Down = true;
}else{
  this.input.keys.Down = false;
}

て感じで状態管理用フラグを変えてやればOKです。楽勝だね(*‘∀‘)

バーチャルゲームパッドの入力について

バーチャルゲームパッドについてはこちらの記事を先に読んでください(‘ω’)ノ
バーチャルパッドの作り方

で、もうわかると思いますがこれも同様に入力判定してるところで状態管理用フラグを変えてやればOKです。

class Btn {
  constructor(key: string){
    this.addEventListener("touchstart", () => {
      InputManager.input.keys[key] = true;
    });
    this.addEventListener("touchend", () => {
      InputManager.input.keys[key] = false;
    });
  }
}

クラスの内容は省略してますがこんな感じです。