p5.play.jsのマウス操作に関する関数には次のものがあります。いずれもページ上のマウスダウンやマウスアップに応答する関数です。
目次
リファレンスメモ
p5.play.mouseDown()
mouseDown ( buttonCode ) Boolean
マウスボタンが現在押されているかどうかを調べる。p5.jsのmouseIsPressedやmouseButtonと組み合わせて使用できる。
パラメータ
[buttonCode] Number オプション – マウスボタン定数 LEFT、RIGHT、CENTER
戻り値:Boolean: ボタンが押されている場合true。
p5.play.mouseUp()
mouseUp ( buttonCode ) Boolean
マウスボタンが現在上がっているかを調べる。p5.jsのmouseIsPressedやmouseButtonと組み合わせて使用できる。
パラメータ
[buttonCode] Number オプション – マウスボタン定数 LEFT、RIGHT、CENTER
戻り値:Boolean: ボタンが上がっている場合true。
p5.play.mouseWentDown()
mouseWentDown ( buttonCode ) Boolean
直近のサイクル中でマウスボタンが押されたかどうかを検出する。イベントを1度だけ引き起こしたり、描画サイクル内でチェックする場合に使用できる。
パラメータ
[buttonCode] Number オプション – マウスボタン定数 LEFT、RIGHT、CENTER
戻り値:Boolean: ボタンが押された瞬間がtrue。
p5.play.mouseWentUp()
mouseWentUp ( buttonCode ) Boolean
直近のサイクル中でマウスボタンが放されたかどうかを検出する。イベントを1度だけ引き起こしたり、描画サイクル内でチェックする場合に使用できる。
パラメータ
[buttonCode] Number オプション – マウスボタン定数 LEFT、RIGHT、CENTER
戻り値:Boolean: ボタンが放された瞬間がtrue。
次のサンプルでは、idleアニメーションを再生している侍スプライトが、ページのどこかのマウスダウンでrunアニメーションに変わるとともに右に移動し、マウスアップで止まって剣を振ります。また右ボタンのマウスアップで元のidleアニメーションに戻ります。
let idleAnim;
let attackAnim;
let runAnim;
let samuraiSp;
function preload() {
idleAnim = loadAnimation('assets/samurai/idle/000.png', 'assets/samurai/idle/007.png');
runAnim = loadAnimation('assets/samurai/run/000.png', 'assets/samurai/run/007.png');
attackAnim = loadAnimation('assets/samurai/attack/000.png', 'assets/samurai/attack/007.png');
}
function setup() {
createCanvas(400, 300);
// 侍スプライトを作成
samuraiSp = createSprite();
// 3つのアニメーションを仕込む
samuraiSp.addAnimation('idle', idleAnim);
samuraiSp.addAnimation('run', runAnim);
samuraiSp.addAnimation('attack', attackAnim);
samuraiSp.position.x = samuraiSp.width - 50;
samuraiSp.position.y = height / 2;
// samuraiSp.mouseActive = true;
// samuraiSp.debug = true;
// デフォルトで表示される右クリックによるコンテキストメニューを表示しない
document.oncontextmenu = function() {
return false;
}
}
function draw() {
background(200);
update(samuraiSp);
drawSprite(samuraiSp);
}
// draw()から毎フレーム呼び出される
function update(sp) {
// ページ上でマウスダウンしている間右へ移動
if (mouseDown()) {
sp.setSpeed(1, 0);
}
// ページ上のマウスアップで停止
if (mouseUp()) {
sp.setSpeed(0, 0);
}
// ページ上のマウスダウンでrunアニメーションに変更(1回のみ)
if (mouseWentDown()) {
sp.changeAnimation('run');
}
// ページ上の左ボタンのマウスアップでattackアニメーションに変更(1回のみ)
if (mouseWentUp(LEFT)) {
sp.changeAnimation('attack');
}
// ページ上の右ボタンのマウスアップでidleアニメーションに変更(1回のみ)
if (mouseWentUp(RIGHT)) {
sp.changeAnimation('idle');
}
}
mouseDown()もmouseUp()もブール値を返すので、ifステートメントと組み合わせてdraw()関数内で使用すると、マウスボタンが押し下げられている間はこれを行い、放されたらそれをやめる、というアクションが可能になります。
mouseWentDown()とmouseWentUp()は1回の描画サイクル(draw()関数が1回呼び出される間)で1回だけ呼び出されるので、状態の変化の実行に向いています。今の場合はアニメーションの変更です。