アニメーションのロード
アニメーションとは、まるで本当に動いているようかのような速さで次々に表示が切り替わる、一連の画像のことです。
アニメーションを読み込む loadAni 関数には、 3 つの異なるモードがあります: sequence （シーケンス）、 list （リスト）、 sprite sheet
（スプライトシート） です。
このコードサンプルで、雲が息づいているアニメーションは、ファイル名の末尾が連番（シーケンス）となっている画像ファイル群のうち、「最初の画像ファイルへのパス」と、「連番の最後の数字」を、引数として用い、ロードされています。
animation 関数は、 q5.js の image 関数に似ています。 q5.js の draw
関数内で使用することで、特定の位置にアニメーションを表示します。
このコードサンプルでは、 loadAnimation 関数の引数として、画像の一覧（リスト）が与えられています。
ani.frameDelay プロパティは、アニメーション内のひとつの画像が表示されてから、次の画像に切り替わるまでの「止めフレーム」数を定義します。デフォルトは 4
（フレーム）です。値を大きくするほど、アニメーションの再生速度が遅く（いわゆる「カクカクアニメ」のように）なります。止めフレーム数を 1
にした場合は、アニメーションは可能な限り速く（いわゆる「ヌルヌルアニメ」のように）再生されます。
百聞は一見にしかず！ このコードサンプルの frameDelay を変更してみましょう。
スプライトシートは、アニメーションのすべてのフレームを含む単一の画像です。ani.spriteSheet がスケッチに表示されているので、その見た目を確認できます。
スプライトシートモードでは、loadAni は各フレームのサイズとアニメーションのフレーム数を指定する「アトラス」JS オブジェクトを受け取ります。
この簡単なアニメーションの読み込み方法では、スプライトシート内のすべてのフレームが同じサイズで、グリッドに揃えられ、左から右、上から下の順序である必要があります。
スプライトシートから特定のフレームのみを使用するアニメーションを作成したい場合は、アトラスオブジェクトの "frames" プロパティをフレームインデックスの配列に設定します。
スプライトシートモードで loadAni を使用する別の方法は、フレームの位置とサイズを指定するフレームロケータの配列を提供することです。
スプライトシートを作成する際、不規則なサイズのフレームを密に詰めて画像空間の効率を高めることと、グリッドに揃えられたスプライトシートを読み込む容易さとのトレードオフを考慮してください。
これらの例のアニメーションは setup で遅延読み込みされていることに注意してください。プログラム開始時にアニメーションを使用する必要がある場合は、q5.js の
preload 関数で読み込んでください。
アニメーションの制御
p5play では、アニメーションを完全に制御できます。
このコードサンプルで、お手元のキーボードから、コードに記載されたキー指定に対応するキーを押して、さまざまなアニメーションの制御を試してみてください！
アニメーション付きスプライト
sprite.addAni 関数を使用して、スプライトにアニメーションを追加できます。また loadAni
と同様、アニメーションのロードもできます。第 1 引数を指定すると、そのアニメーションに引数で指定した名前を付けることができます。
このコードサンプルで、マウスの左ボタンを押してみてください。
sprite.debug プロパティが true に設定されていると、
スプライトのコライダーを見ることができます。
スプライトのアニメーション制御
sprite.changeAni
関数は、スプライトのアニメーションを変更します。この関数は引数として、アニメーションオブジェクト、または、ロード済みのアニメーション名を受け取ります。
sprite.ani は、スプライトの現在のアニメーションを保持しているので、 play や stop
といったプロパティや関数へのアクセスを可能とします。
sprite.scale は x, y にブール値を持つベクタオブジェクトで、
スプライトを水平または垂直に反転させるために使用します。
コードサンプルで、カーソルキーの左右を押して、オバケを動かしてみてください。
また、スペースバーを押して、アニメーションを停止させてみてください。
アニメーション付きグループ
グループに対してアニメーションが追加されると、グループの新規グループスプライトは、生成時にそのアニメーションのコピーを受け取るようになります。
グループスプライトのコライダーのサイズは、アニメーションのサイズから取得されることに気をつけてください。このコードサンプルでは、「しぶき」アニメーションのサイズがコライダーのサイズとなるため、スプライトの生成時に近づけすぎると、互いに重ならなくなるまで押しのけ合ってしまいます。
マウスクリックで、新しい「しぶき」を追加してみてください！
アニメーションのスプライトシート
複数のアニメーションをロードするには addAnis 関数を使用します。この関数は 2 つの入力パラメータを受け取ります：
- スプライトシート画像または画像 URL
- アニメーション名をキーとし、アトラスオブジェクトを値とするオブジェクト
「ヒーロー」の例では、ヒーロースプライトのサイズは Sprite コンストラクタで 32x32
ピクセルに設定されています。このサイズは、スプライトシートのアトラスオブジェクト内の行と列の値の乗数として使用されます。
このリンクをクリックして、例で使用されている完全なquestKid スプライトシートを確認してください。
Anis
すべてのスプライトとグループには、アニメーションを格納する anis
オブジェクトがあります。キーはアニメーション名で、値はアニメーションオブジェクトです。これはグループと同様に機能し、ソフトで動的な継承を利用しています。
この例では、anis.offset を設定すると、スプライトのすべてのアニメーションのオフセットが変更されます。
ani.offset プロパティは、スプライトの位置に対してアニメーションの位置を調整するために使用されます。
画像のスプライトシート
一部のスプライトシートには、複数の画像（サブテクスチャ）が 1 つのファイルにまとめられています。これにより、1 回のネットワークリクエストで読み込むことができ、読み込み時間が短縮され、パフォーマンスが向上します。
Kenny の「Pixel Vehicle Pack」のトラフィックスプライトシートを見てみましょう。
p5play では、各サブテクスチャを 1 フレームのアニメーションとして読み込むことができます。
XML テクスチャアトラス
テクスチャアトラスは、スプライトシート内の各サブテクスチャのサイズと位置を記述します。例えば、トラフィックテクスチャアトラスを参照してください。
parseTextureAtlasを使って、XML テクスチャアトラスをaddAnisで使用できるオブジェクトに変換します。
フレームの切り出し
ピクセルアート（低解像度）のスプライトシートの一部をキャンバスに描画すると、端にアーティファクトが発生することがあります。
この例では、端に他の車両の一部が含まれていることに注目してください。
アニメーションを読み込む前にanis.cutFramesを true に設定すると、p5play がスプライトシート画像をフレームごとに
シーケンシャルなアニメーション定義
sprite.changeAni
関数は、引数として、アニメーションオブジェクト、アニメーション名、決められた順番（シーケンス）で再生すべきアニメーション名の配列、のいずれかを受け取ります。
デフォルトでは、ループが有効になっている場合、シーケンスの最後のアニメーションがループされ続けます。すべてのシーケンスをループさせるには、シーケンスの最後のアニメーション名に
'**' を指定します。逆に、シーケンスの終了時にアニメーションを停止させたい場合は、最後のアニメーション名に ';;' を指定します。
このコードサンプルでは、 WASD キーまたはカーソルキーで「勇者くん」を画面内で移動させる方法を示しています！
複雑でシーケンシャルなアニメーション定義
sprite.changeAni は async 関数なので、 await などでアニメーションの完了を待機する事ができます。特に、 NPC
が行う一連のアニメーションを、プログラマブルに定義するのに最適です。
このコードサンプルでは、「勇者くん」が剣技の修行をしています。