8_1:p5.play マウス操作に関する関数

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回だけ呼び出されるので、状態の変化の実行に向いています。今の場合はアニメーションの変更です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA