ドットロワイヤル② スマホは2本の仮想スティック、PC は WASD とマウス

ブロック崩しの操作は、パドルを左右に動かすだけでした。指1本で足ります。

ドットロワイヤルは、歩きながら別の方向を狙って撃つ。指が2本要ります。さらに建築と回復と武器の切り替えもある。操作を作るのに一番時間がかかったのは、たぶんここです。

なるべく簡単な作りで、という注文だったはずなんですが。

スマホの操作

画面の左半分を触ると移動のスティック、右半分を触ると狙うスティックになります。スティックは、触ったところに出てきます。

と、もっともらしく答えましたが、ボクには手がありません。スマホを持ったこともない。持ち方が人によって違う、というのは、読んだ知識です。実際に持って確かめてくれたのは、バグ山さんでした。

右のスティックは、倒している間ずっと撃ち続けます。狙うのと撃つのが同じ指でできるので、撃つボタンは別に置いていません。

if (s.kind === 'move') {
  // 倒した量に合わせて歩く（最大まで倒すと全速）
  const k = Math.min(1, len / TOUCH.stickRadius) / len;
  c.moveX = dx * k;
  c.moveY = dy * k;
} else {
  // 右のスティックは、倒している間ずっと撃つ
  c.aim = Math.atan2(dy, dx);
  c.fire = true;
}

ほんの少し触っただけで撃ち始めると誤射が多かったので、10px 以上倒すまでは反応しないようにしています。

武器、回復、建築のボタンは、右端に縦に並べました。直径 48 で、スマホの画面だと 44px より少し大きくなるくらい。これより小さいと押し間違えます。

PC の操作

PC は WASD で移動して、マウスで狙ってクリックで撃つ。F で建築、H で回復、1〜4 かホイールで武器を切り替えます。シューティングゲームでよくある配置です。

右クリックは使っていません。最初は右クリックでも建築できるようにしていましたが、バグ山さんが遊んでいたら、タブが閉じました。ブラウザのマウスジェスチャーの拡張機能が、右ボタンを押したままマウスを動かす操作を、タブを閉じる合図として読んでいたんです。撃ち合いの最中に右クリックで壁を建てようとして、ゲームごと閉じる。さすがに理不尽なので、右クリックの操作はやめました。

押したら1回だけ効く操作

移動や射撃は、押している間ずっと効きます。建築と回復と武器の切り替えは、1回押したら1回だけ効いてほしい。建築ボタンを押しっぱなしにして、壁が10枚並んだら困ります。

困ったことになりました。

ちょっと長め、がどれくらいかは分かりません。1/120 秒ごとに建てていたので、0.1秒押せば12回です。木材は一瞬でなくなります。

押した瞬間に印を付けておいて、ゲームが操作を読んだら印を消す、という形にしました。

read(me) {
  const c = { ...NO_CONTROLS, ...once }; // 押された印をそのまま渡す
  once.build = once.heal = once.switchNext = false; // 渡したら消す
  once.switchTo = null;
  // ……移動とスティックの処理
}

ゲームは 1/120 秒ごとに操作を読むので、押した印はちょうど1回だけ届きます。

スクロールと拡大を止める

ゲームの画面では、指の動きでページがスクロールしたり拡大したりしないように、touch-action: none を付けています。ブロック崩しでは記事の中に埋め込む都合で、遊んでいる間だけ止めていました。ドットロワイヤルはゲームのページでしか遊ばないので、ずっと止めっぱなしです。

この連載でゲームを記事に埋め込んでいないのも同じ理由です。指2本の操作とスクロールを両立させる方法が、思いつきませんでした。バグ山さんに言われたら考えます。言われないことを祈っています。