phina.jsでゲームパッドを使う

ゲームパッドを使おう！

phina.jsにはGamepad APIに対応した機能が備わっているので、作ったブラウザゲームをゲームパッドで遊ぶことが出来る。

使い方はわりと簡単。

  1. phina.input.GamepadManagerオブジェクトを毎フレームでupdate
  2. phina.input.GamepadManagerオブジェクトからGamepadオブジェクトを取得
  3. 入力情報を取得してゲームに反映させる

0.準備

とりあえず四角形を表示する。今回のサンプルではこの四角をゲームパッドで動かしてみよう。

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <canvas id="app"></canvas>
    <script src="main.js"></script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
phina.main(function() {
  var app = phina.display.CanvasApp({
    query: "#app"
  });
  var scene = app.currentScene;
  // こいつを動かすぜ！  
  var rectangle = phina.display.RectangleShape();
  rectangle.addChildTo(scene);
  app.run();
});

1.phina.input.GamepadManagerを毎フレームでupdate

phina.input.GamepadManagerオブジェクトを作成し、scene.update()など、毎フレームで実行される場所で update() を呼び出す。

1
2
3
4
5
6
7
// GamepadManager作成
app.gamepadManager = phina.input.GamepadManager();
// gamepadManagerを更新
scene.update = function(app) {
  app.gamepadManager.update();
};

2. gamepadManagerからGamepadオブジェクトを取得

gamepadManager.get() メソッドがGamepadオブジェクトを返す。

ゲームパッドはコンピュータに複数接続されている可能性があるので、インデックスを指定したい場合は get(1) のように指定する。

1
2
3
4
5
rectangle.update = function(app) {
  var gamepad = app.gamepadManager.get();
  
};

3.入力情報を取得してゲームに反映させる

取得したGamepadオブジェクトからは、入力情報がphina.input.Keyboardと同じように取り出すことが出来る。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var gamepad = app.gamepadManager.get();
// Aボタンが押されているか
var aPressed = gamepad.getKey("a");
// このフレームでBボタンが押された
var bDown = gamepad.getKeyDown("b");
// このフレームでXボタンが離された
var xUp = gamepad.getKeyDown("x");
// 十字キーの入力状態をベクトルで
var crossButtonVector = gamepad.getKeyDirection();
// アナログスティックの入力状態をベクトルで
var stickVector = gamepad.getStickDirection();

今回はゲームオブジェクトをアナログスティックで操作することにしよう。

アナログスティックはかなりデリケートなので、「これ以上の入力があれば有効とする」という閾値を決めておく必要がある。

これはphina.geom.Vector2のlengthメソッドを使えば簡単に実現することが出来る。

1
2
3
4
5
6
7
8
9
// アナログスティックの入力状態をベクトルで
var stickVector = gamepad.getStickDirection();
// アナログスティックの倒し具合が0.5以上の場合のみ入力を有効とする
if (stickVector.length() > 0.5) {
  // 四角を移動させる
  rectangle.position.add(stickVector.mul(10));
}

まとめ

まあこんな感じで、phina.jsではゲームパッドが簡単に使えるわけだ。

PCで使えるGamepad APIに対応したゲームパッドとしては、Xbox360コントローラーがオススメである。

単品でも購入できるが、Xbox360を買えばもれなく付いてくるので持ってない人は是非買いましょう。

CAVEの面白いシューティングゲームがたくさん遊べるぞ！




phina.js