2_1：p5.play アニメーションの基本

基本的な手順

p5.jsのキャンバスに、p5.play.jsを使ってアニメーションを描画する基本的な手順は次の通りです。

1. アニメーションに使用するPNG画像を用意する。
2. p5.jsのpreload()関数で、p5.play.jsのloadAnimation()を使ってPNG画像を読み込み、Animationオブジェクトを作成する。
3. p5.jsのdraw()関数で、p5.play.jsのanimation()を使って、アニメーションを表示する。

次のコードは、グーチョキパーの画像使ってアニメーションを表示します。

let handsAnim;

function preload() {
    // PNG画像を順番に読み込み、p5.playのAnimationオブジェクトを作成する
    handsAnim = loadAnimation('assets/hands/gu.png', 'assets/hands/choki.png', 'assets/hands/pa.png');
}

function setup() {
    createCanvas(500, 300);
    // フレームレートを遅くする
    frameRate(6);
}

function draw() {
    background(225);
    // Animationオブジェクトを表示する
    animation(handsAnim, 300, 150);
}

p5.playで使用する画像はPNG形式に限られます。上記サンプルでは、次のgu.png、choki.png、pa.pngの各ファイルへのパスをloadAnimation()に渡しています。

リファレンスメモ

PNGファイルを読み込んでAnimationオブジェクトを作成するには、p5.play.loadAnimation()メソッドを使用します。作成したAnimationオブジェクトを描画するには、p5.play.animation()メソッドを使用します。

p5.play.loadAnimation()

loadAnimation ( sprite )
アニメーションを読み込む。通常はスケッチのpreload()関数内で使用する。

パラメータ

sprite Sprite – 表示するスプライト

p5.play.animation()

animation ( anim x y )
アニメーションを表示する。

パラメータ

anim Animation – 表示するアニメーション
x Number – x座標
y Number – y座標

連番を振った画像の使用

p5.play.loadAnimation()には、連番を振った画像ファイルであれば、最初と最後のファイル名を渡すだけで、その間のファイル名はp5.playが探してくれる機能があります。たとえば次のコードであれば、z001.pngからz010.pngまでのファイル名が補間されます。これは、多くのファイルを読み込みたい場合に便利です。

loadAnimation(‘assets/zombie/z000.png’, ‘assets/zombie/z011.png’);

次のコードはその例です。

let zombieAnim;

function preload() {
    // 連番を振ったPNG画像を読み込み、p5.playのAnimationオブジェクトを作成する
    zombieAnim = loadAnimation('assets/zombie/z000.png', 'assets/zombie/z011.png');
}

function setup() {
    createCanvas(500, 300);
}

function draw() {
    background(225);
    // Animationオブジェクトを表示する
    animation(zombieAnim, 100, 150);
}

「Segel Artwork」