3_1：p5.play.Animationオブジェクトの再生と停止

Animationオブジェクトの再生(Animationオブジェクトが内部にフレーム番号付きで並べて持つ、読み込んだPNG画像のイメージの連続描画)は、デフォルトで有効になっています。Animationオブジェクトの再生と停止はAnimation.play()とAnimation.stop()メソッドで行えます。

次の例では、0から5の数字を書いたPNG画像を読み込み、数字が0から1,2,3,4,5,0,1…と変化するアニメーションを作成しています。このアニメーションは[再生]と[停止]ボタンで再生が制御できます。またその時点で描画されているAnimationオブジェクトのフレーム番号を、ブラウザのコンソールに出力しています。

let numberAnim;

function preload() {
    // PNGファイルのサイズは200 x 100
    numberAnim = loadAnimation('assets/numbers/n0.png', 'assets/numbers/n5.png');
    // フレームレートを低くして、イメージの数字を確認しやすくする
    frameRate(12);
}

function setup() {
    createCanvas(800, 300);
    numberAnim.stop();
    print(numberAnim.getWidth()); // 200 現在のフレームの幅
    print(numberAnim.getHeight()); // 100 現在のフレームの高さ

    const playButton = createButton('再生');
    playButton.position(20, 320);
    playButton.size(100, 30);
    playButton.mousePressed(() => {
        numberAnim.play();
    });

    const stopButton = createButton('停止');
    stopButton.position(140, 320);
    stopButton.size(100, 30);
    stopButton.mousePressed(() => {
        numberAnim.stop();
    });
}

function draw() {
    background(225);
    // キャンバスの左上隅に揃えて描画
    animation(numberAnim, 100, 50);
    print(numberAnim.getFrame()); // 現在のフレーム番号
}

このサンプルでは、下図に示す、200 x 100のPNG画像６個を使用しています。したがって、画像の読み込み後にp5.jsから呼び出されるsetup()関数で実行しているnumberAnim.getWidth()は200を、numberAnim.height()は100を出力します。またp5.jsから毎フレーム呼び出されるdraw()関数では、numberAnim.getFrame()を使って、その時点で描画されているAnimationオブジェクトのフレーム番号を出力しています。

リファレンスメモ

Animation.play()

play ()
アニメーションを再生する。

Animation.stop()

stop ()
アニメーションを停止する。

Animation.getFrame()

getFrame () Number
現在のフレーム番号を返す。

戻り値

Number: 現在のフレーム(0から始まる)

Animation.getHeight()

getHeight () Number
現在のフレームの高さをピクセル単位で返す。イメージが読み込まれていない場合には、1を返す。

戻り値

Number: フレームの高さ

Animation.getWidth()

getWidth () Number
現在のフレームの幅をピクセル単位で返す。イメージが読み込まれていない場合には、1を返す。

戻り値

Number: フレームの幅