8_3：p5.play マウス操作に関するプロパティ

mouseIsOverとmouseIsPressed

スプライトはmouseIsOverとmouseIsPressedプロパティを持っていて、mouseActiveプロパティを有効化することで、動作するようになります。

リファレンスメモ

Sprite.mouseActive

mouseActive Boolean

trueに設定すると、そのスプライトはマウス状態を追跡して、mouseIsPressedとmouseIsOverを更新するようになる。注意：onMouseReleasedかonMousePressedの関数(イベントハンドラ)を設定すると、自動的にtrueに設定される。デフォルトはfalse。

Sprite.mouseIsOver

mouseIsOver Boolean
マウスがそのスプライトのコライダー上にあるときtrue。読み取り専用。

Sprite.mouseIsPressed

mouseIsPressed Boolean
マウスがそのスプライトのコライダー上で押されたらtrue。読み取り専用。

次のサンプルでは、オタマジャクシスプライトのmouseActiveプロパティをtrueに設定し、draw()から毎フレーム呼び出されるupdate()関数内で、mouseIsOverとmouseIsPressedプロパティを使用しています。

オタマジャクシスプライトは、放っておくと、川の流れに流されるかのように、右から左に移動します。スプライトにマウスカーソルを重ねつづけると右への速度がすこしずつ増します。またマウスがプレスをつづけると右への速度を急に上げることができます。

キャンバスの下には、スプライトのX軸方向の速度と位置の変化をグラフで表示しています。

let hopperAnim;
let hopperSp;
const speed = 0.01;
let isStart = false;

function preload() {
    hopperAnim = loadAnimation('assets/waterhopper/001.png', 'assets/waterhopper/010.png');
}

function setup() {
    const canvas = createCanvas(800, 100);
    // 「Positioning your canvas」
    // https://github.com/processing/p5.js/wiki/Positioning-your-canvas
    canvas.parent('sketch-holder');

    // オタマジャクシスプライトを作成
    hopperSp = createSprite();
    hopperSp.addAnimation('swimmng', hopperAnim);
    hopperSp.rotation = 90;
    hopperSp.scale = 2;
    hopperSp.position.x = width / 2;
    hopperSp.position.y = height / 2;
    // mouseIsOverとmouseIsPressedを有効にする
    hopperSp.mouseActive = true;

    textSize(15);
    fill(255, 0, 0);
}

function draw() {
    background(111, 183, 221);
    if (isStart) {
        update(hopperSp);
    }
    drawSprite(hopperSp);
}

function update(sp) {
        // マウスが重なっている間は少し右へ加速
        if (sp.mouseIsOver) {
            sp.velocity.x += speed / 10;
        }
        else {
            // 重なっていないと左へ加速
            sp.velocity.x -= speed / 2;
        }
        // マウスを押している間は右へ加速
        if (sp.mouseIsPressed) {
            sp.velocity.x += speed * 2;
        }
        // velocity.x値を表示
        text(sp.velocity.x, 10, 5, 50, 100);
        plot(frameCount, sp.velocity.x * 100, frameCount, sp.position.x);
        // spが左端に消えたらリセット
        if (sp.position.x < 0) {
            sp.velocity.x = 0;
            isStart = false;
            sp.position.x = width / 2;
        }
    }
    // ページのどこかをクリックしてスタート
function mousePressed() {
    isStart = true;
}

スタートするには、フレーム内のどこかをクリックします。