アニメーションのロード
アニメーションとは、まるで本当に動いているようかのような速さで次々に表示が切り替わる、一連の画像のことです。
アニメーションを読み込む loadAni 関数には、 3 つの異なるモードがあります: sequence （シーケンス）、 list （リスト）、 sprite sheet
（スプライトシート） です。
このコードサンプルで、雲が息づいているアニメーションは、ファイル名の末尾が連番（シーケンス）となっている画像ファイル群のうち、「最初の画像ファイルへのパス」と、「連番の最後の数字」を、引数として用い、ロードされています。
animation 関数は、 p5.js の image 関数に似ています。 p5.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.mirror は x, y にブール値を持つベクタオブジェクトで、
スプライトを水平または垂直に反転させるために使用します。
コードサンプルで、カーソルキーの左右を押して、オバケを動かしてみてください。
また、スペースバーを押して、アニメーションを停止させてみてください。
アニメーション付きグループ
グループに対してアニメーションが追加されると、グループの新規グループスプライトは、生成時にそのアニメーションのコピーを受け取るようになります。
グループスプライトのコライダーのサイズは、アニメーションのサイズから取得されることに気をつけてください。このコードサンプルでは、「しぶき」アニメーションのサイズがコライダーのサイズとなるため、スプライトの生成時に近づけすぎると、互いに重ならなくなるまで押しのけ合ってしまいます。
マウスクリックで、新しい「しぶき」を追加してみてください！
ひとつのスプライトシートに複数のアニメーションを定義
同じスプライトシート画像から複数のアニメーションをロードするには、まず、スプライトまたはグループに spriteSheet プロパティを設定します。
次に、 addAnimations / addAnis
関数を使用します。引数には、「アニメーション名をキー、スプライトシートのアトラスをバリュー」とする、 JavaScript オブジェクトを指定します。
アトラスオブジェクトで使用するほうが、スプライトシート上の各フレーム画像の座標をいちいち手作業で指定するより、はるかに楽チンです！
アトラスオブジェクトには、次のプロパティがあります：
x 、 y 、 pos 、 w/width 、
h/height 、 size/frameSize 、 row
、 col 、 frames/frameCount 、
delay/frameDelay 、 rotation
この「勇者くん」のコードサンプルでは、勇者くんのスプライトのサイズを Sprite コンストラクタ引数で 32x32
ピクセルに設定しています。このサイズは、引数であるアトラスオブジェクトの row の値との掛け算に使用されます。
ani.offset プロパティは、スプライトの座標に対するアニメーションの位置を微調整するために使用します。
このコードサンプルで使用している questKid スプライトシート画像全体は、リンクをクリックして確認してください。
ところで、このコードとこちらの Phaser のデモと見比べてみてください。きっと p5play の真価をご堪能いただけることでしょう。(ﾉ ∀`)ｱﾁｬｰ
１つのスプライトシートでは、アニメーションのすべてのフレームを同じ大きさにし、左から右に順番に並べることをおすすめします。そうでない場合は、アトラスオブジェクトの代わりに座標の配列を使用し、各フレームの座標を手動で指定する必要があります。
アニメーション
すべてのスプライトとグループには、アニメーションを保持する animations / anis
オブジェクトがあります。このオブジェクトは「アニメーション名がキー、アニメーションオブジェクトがバリュー」です。これはグループにおける「ソフトでダイナミックな継承」と同様に働きます。
sprite.pixelPerfect が true
に設定されている場合、そのスプライトは自身のコライダーを正確な位置に保ちつつ、整数座標として描画されます。ドット絵風のゲーム制作に役立ちますよ！
シーケンシャルなアニメーション定義
sprite.changeAni
関数は、引数として、アニメーションオブジェクト、アニメーション名、決められた順番（シーケンス）で再生すべきアニメーション名の配列、のいずれかを受け取ります。
デフォルトでは、ループが有効になっている場合、シーケンスの最後のアニメーションがループされ続けます。すべてのシーケンスをループさせるには、シーケンスの最後のアニメーション名に
'**' を指定します。逆に、シーケンスの終了時にアニメーションを停止させたい場合は、最後のアニメーション名に ';;' を指定します。
このコードサンプルでは、 WASD キーまたはカーソルキーで「勇者くん」を画面内で移動させる方法を示しています！
複雑でシーケンシャルなアニメーション定義
sprite.changeAni は async 関数なので、 await などでアニメーションの完了を待機する事ができます。特に、 NPC
が行う一連のアニメーションを、プログラマブルに定義するのに最適です。
このコードサンプルでは、「勇者くん」が剣技の修行をしています。