はじめに
こちらは、完走賞ゲットのため小ネタを毎日投稿しようとチャレンジする Advent Calendar 2022 の 11日目の記事です。
完走賞ゲットのため小ネタを毎日投稿しようとチャレンジする Advent Calendar 2022 の 10日目の記事でも扱っていた「gamecontroller.js」の話です。
●【完走賞ゲット-10】gamecontroller.js を使って DualShock 4 を JavaScript で扱う - Qiita
https://qiita.com/youtoy/items/87c1c37b51ae9ef4ab4d
この記事では、p5.js との組み合わせを試します。
gamecontroller.js について
gamecontroller.js については、完走賞ゲットのため小ネタを毎日投稿しようとチャレンジする Advent Calendar 2022 の 10日目の記事をご覧ください。
gamecontroller.js を p5.js Web Editor上で動かす
DualShock 4 を PC につなぐ
今回利用する DualShock 4 を PC に接続します（今回は USB接続にて）。
ちなみに、接続は有線。
— you (@youtoy) December 9, 2022
電波環境の悪いところでの展示などを考えると、有線と無線の両方が扱えるのはありがたい pic.twitter.com/bS7SUIo435
簡単なお試し
まずは、gamecontroller.js が p5.js Web Editor上で動くことを確認します。
↓こんな感じのお試しをしてみて、コンソールに想定通りの出力が得られるのを確認できました。
HTML と JavaScript の内容は、それぞれ以下の通りです。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gamecontroller.js@1.5.0/dist/gamecontroller.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<main>
</main>
<script src="sketch.js"></script>
</body>
</html>
function setup() {
createCanvas(400, 400);
gameControl.on('connect', gamepad => {
console.log('A new gamepad was connected!');
});
}
function draw() {
background(220);
}
ゲームコントローラーの操作を受けとる：ボタン押下
ゲームコントローラーとの接続が行えることは確認できたので、次はボタンを操作した時のイベントを発生させてみます。やってみたらできた、というのが以下のツイートです。
#p5js Web Editor上で、「gamecontroller.js」と「DualShock 4」を組み合わせて使う話の続き、キー操作も問題なく扱えそう。 pic.twitter.com/YZ5T7uhGTe
— you (@youtoy) December 9, 2022
公式のページの情報をもとに、以下のような簡単なプログラムを作って試しました。
function setup() {
createCanvas(400, 400);
gameControl.on("connect", (gamepad) => {
console.log("A new gamepad was connected!");
gamepad
.on("button0", () => {
console.log("Button 0 still pressed...");
})
.before("button0", () => {
console.log("Button 0 pressed...");
})
.after("button0", () => {
console.log("Button 0 was released");
});
});
}
function draw() {
background(220);
}
ゲームコントローラーの操作を受けとる：ジョイスティックの操作1（1方向のみ使う）
次に、DualShock 4 の左側にあるジョイスティックの操作を取得してみます。
以下のプログラムで、ジョイスティックを上方向に倒した時の操作を取得できました。
function setup() {
createCanvas(400, 400);
gameControl.on("connect", (gamepad) => {
console.log("A new gamepad was connected!");
gamepad
.on("up0", () => {
console.log("Button 0 still pressed...");
})
.before("up0", () => {
console.log("Button 0 pressed...");
})
.after("up0", () => {
console.log("Button 0 was released");
});
});
}
function draw() {
background(220);
}
ここまで試した内容を見ると、ボタン押下やスティックを倒したというイベントは、以下の 3状態のイベントがとれるようです。
- 操作をしている状態（操作をし続けている間は、連続してイベントが発生）
- 操作が行われた最初のタイミング
- 操作を終えたタイミング
ジョイスティックの操作からとれる情報について
ここで、ジョイスティックの操作からとれる情報について、少し補足します。
以下の Gamepad API関連の処理がテストできるサイトを使うと、ジョイスティックは倒したかどうかの二値だけでなく、どれくらいの傾きで倒したかというのもとれそうでした。
Gamepad API のテストに便利そう
— you (@youtoy) December 9, 2022
●Gamepad Tester - Check Controllers and Joysticks Online
https://t.co/jk44ZZxtvd pic.twitter.com/kwUoB6X929
また、ジョイスティック関連の話ではない余談ですが、コントローラーを振動させるという動作も Gamepad API を使って行えるようでした。
ゲームコントローラーの操作を受けとる ＋ p5.js のキャンバス上で何か描画する
最後に、DualShock 4 の操作が行われた時に、p5.js での描画を何らか行うようにしてみます。
とりあえず、「背景の色を変える」・「図形を描画する」というのをやってみようと思います。
プログラムは以下の通りです。
let bgColor = "#aaaaaa";
function setup() {
createCanvas(500, 400);
background(bgColor);
gameControl.on("connect", (gamepad) => {
console.log("A new gamepad was connected!");
gamepad
.on("button12", () => {
console.log("Button 12 still pressed...");
background("#0077ff");
})
.before("button12", () => {
console.log("Button 12 pressed...");
})
.after("button12", () => {
console.log("Button 12 was released");
background(bgColor);
});
gamepad
.on("button14", () => {
console.log("Button 12 still pressed...");
circle(width / 2, height / 2, 100);
})
.before("button14", () => {
console.log("Button 14 pressed...");
})
.after("button14", () => {
console.log("Button 14 was released");
background(bgColor);
});
});
}
function draw() {}
なお、上記のプログラムを実行すると、このようになりました。
おわりに
完走賞ゲットのため小ネタを毎日投稿しようとチャレンジする Advent Calendar 2022 の10日目の記事で軽く試してみた gamecontroller.js を、今回は p5.js Web Editor上で扱うことができました。