2015-10-14

phina.jsでスマホSTGのタッチ操作を実装しよう

タッチ操作でSTG!!

シューターたる者、いつでもどこでもSTGをプレイしたいものだ。

読者諸君もいつも持ち歩いている携帯電話に、「怒首領蜂大復活」や「ゴシックは魔法乙女」、「エスプガルーダII ～覚聖せよ。生まれし第三の輝石～　ARCADE VERSION」などをインストールしていることだろう。

さて、スマートフォンにおけるSTGの操作方法にはいくつかのパターンがあるようだ。

1. 端末を傾けた方向に自機が移動する
2. タッチした場所と自機の位置が完全に同期する
3. バーチャルキーパッドで自機を操作する
4. タッチした場所に向かって自機が移動する
5. スワイプした方向に自機が移動する

個人的に「これはねーだろ」と思った順に並べてみた。

「1.端末を傾けた方向に自機が移動する」や「3.バーチャルキーパッドで自機を操作する」なんかはiPhoneが流行り始めた時期にはよく見かけた気がする。当然だがすごく操作しづらい。

「2.タッチした場所と自機の位置が完全に同期する」は初心者が作ったSTGでよく採用されている気がする。指で完全に自機が隠れてしまい、弾避けどころではない。

「4.タッチした場所に向かって自機が移動する」はタブレット端末の場合は意外と良い場合もあったりするが、片手で操作したい場合はやはりつらい。

というわけで「5.スワイプした方向に自機が移動する」である。

画面のどこでも良いから指をすべらせると、指の移動方向に合わせて自機が移動する方法だ。これが究極だと思う。

phina.jsやtmlib.jsで実装しよう!!

さて、こいつをphina.js（またはtmlib.js）で実装してみる。これは驚くほどカンタンだ。

まずは適当なオブジェクトを表示しよう。

phina.main(function() {
  var app = phina.display.CanvasApp({ query: "#app" });
  app.run();
  
  // 自機
  var fighter = phina.display.TriangleShape().setPosition(320, 480).addChildTo(app.currentScene);
});

tmlib.jsの場合はこう。

tm.main(function() {
  var app = tm.display.CanvasApp("#app").resize(640, 960).fitWindow();
  app.run();
  
  // 自機
  var fighter = tm.display.TriangleShape().setPosition(320, 480).addChildTo(app.currentScene);
});

で、自機にenterframeイベントのリスナーを登録する。

リスナーの内容はこんな感じ。

phina.jsの場合

// 感度
var sensitivity = 2.0;

fighter.onenterframe = function(e) {

  // ポインター（マウスやタッチ）
  var pointer = e.app.pointer;
  
  // 移動量×感度を自機の位置に足す
  if (pointer.getPointing())
    this.position.add(pointer.deltaPosition.mul(sensitivity));
  
};

tmlib.jsの場合

var sensitivity = 2.0;

fighter.onenterframe = function(e) {

  var pointing = e.app.pointing;
  
  if (pointing.getPointing())
    this.position.add(pointing.deltaPosition.mul(sensitivity));
  
};

phina.jsではオブジェクトの位置を2次元ベクトルとして保持している。

くわえて、そのフレームでのポインターの移動量を同じく2次元ベクトルとして取得することが出来る。

なので処理としては単純に加算するだけでOKなのだ。

また、例では感度（sensitivity）として2.0という値を設定している。

指の移動量をそのまま自機の移動量としてしまってもいいのだが、それだとたとえば自機を画面の左端から右端へ移動させたい場合に不都合が起こる。（高い確率で指が端末の端まで到達してしまって、一度離してタッチしなおさなければならない！！）

また、指というのは案外精密に動く。指の動作に対し自機が多少大袈裟に動いたとしても問題ない場合が多いのだ。

そんなわけで

みんなもスマホブラウザ向けSTGを作ろうぜ！

phina.js, STG