スプライトアニメーション

スプライトエンジン

この Qt Quick スプライトエンジンは、アニメーションの複数のフレームを含む画像を分割する機能と組み合わされた確率的なステートマシンです。

状態マシン

スプライトエンジンの主な機能は、その内部の状態マシンです。これは『Qt Quick 』の状態や遷移とは異なり、従来の状態マシンに近いものです。スプライトは、他のスプライトへ、あるいは自分自身へと、重み付けされた遷移を持つことができます。 スプライトのアニメーションが終了すると、スプライトエンジンは、終了したばかりのスプライトに対して利用可能な重み付けされた遷移に基づいて、次のスプライトをランダムに選択します。

現在再生中のスプライトには、2つの方法で影響を与えることができます。任意のスプライトの再生を即座に強制的に開始させるか、指定されたスプライトへ徐々に遷移させるよう指示することができます。 徐々に遷移するように指示した場合、エンジン（相対的な重みは無視しつつ）は、中間となるスプライトの数を最小限に抑えつつ、有効な状態遷移を経由して目標のスプライトに到達します。これにより、2つの異なるスプライトの間に遷移アニメーションを簡単に挿入することができます。

例として、架空の2Dプラットフォームゲームのキャラクターのスプライトを示した上の図を考えてみましょう。キャラクターは最初に「立ち」の状態を表示します。この状態から、外部入力がない限り、キャラクターは「待機」アニメーション、あるいは「歩行」アニメーションへ遷移するか、再び「立ち」アニメーションを再生します。 これらの遷移の重みはそれぞれ1、0、3であるため、立ちアニメーションが終了した際、待機アニメーションが再生される確率は4分の1、立ちアニメーションが再度再生される確率は4分の3となります。これにより、待機中にわずかに動きがあり、変化に富んだ振る舞いをするキャラクターを実現できます。

歩行アニメーションへの遷移重みが0であるため、通常、立ちアニメーションから歩行アニメーションへは遷移しません。しかし、ゴールアニメーションを歩行アニメーションに設定すると、立ちアニメーションが終了した時点で歩行アニメーションが再生されます。もし直前に待機アニメーションの状態だった場合、その再生を完了してから立ちアニメーションを再生し、その後、歩行アニメーションを再生することになります。 その後、目標アニメーションが解除されるまで歩行アニメーションが再生され続け、その時点で歩行アニメーションの再生が終了した後、立ちアニメーションに切り替わります。

その後、ゴール状態をジャンプアニメーションに設定すると、歩行アニメーションを終了してからジャンプアニメーションが再生されます。ジャンプアニメーションは他の状態へ遷移しないため、状態が強制的に変更されるまで、ジャンプアニメーションの再生は継続されます。 この例では、状態を再び「歩行」に戻し、ゴールアニメーションを「歩行」または「なし」に変更することで（これにより、歩行アニメーションの後に立ちアニメーションが再生されます）、状態を変更できます。なお、アニメーションを強制的に設定することで、そのアニメーションを直ちに再生開始することができます。

入力形式

スプライトエンジンが受け付けるファイル形式は、Image など、他のQMLタイプが受け付けるファイル形式と同じです。ただし、画像をアニメーション化するためには、スプライトエンジンは画像ファイルにアニメーションのすべてのフレームが含まれていることを要求します。 これらは連続した行に配置する必要があり、ファイルの右端から次の行に折り返され、ファイルの左端から始まる行（前の行のすぐ下に配置される）に続く場合があります。

例として、上の画像を見てみましょう。 ここでは、黒い数字のみに注目し、正方形が 40×40 ピクセルであると仮定します。通常、画像は左上隅から読み込まれます。フレームサイズを 40×40 ピクセル、フレーム数を 8 に指定した場合、番号順にフレームが読み込まれます。 左上のフレームが最初のフレームとなり、右上のフレームが 5 番目のフレームとなり、その後、次の行（ファイル内のピクセル位置 0,40）に回り込んで 6 番目のフレームを読み込みます。 読み込みは「8」とマークされたフレームの後に停止し、4番目のフレームの下の正方形に画像データがあったとしても、アニメーションには含まれません。

任意のオフセット位置からアニメーションを読み込むことは可能ですが、その場合でも同じパターンに従います。次に、赤い数字について考えてみましょう。アニメーションの開始位置をピクセル座標 120,0、フレーム数を 5、フレームサイズを前述と同じと指定した場合、フレームは赤い数字の順に読み込まれます。 120,0の位置から40x40のブロックを読み始めるため、画像の最初の120x40の部分は使用されません。ファイルの末尾である160,0に到達すると、0,40から次の行の読み込みが開始されます。

青い数字は、40,40の位置からそのサイズのフレームを2つ読み込もうとした場合のフレーム番号を示しています。1つの画像ファイルから複数のスプライトを読み込むことが可能である点に注意してください。 赤、青、黒の数字はすべて、同じスプライトエンジンに個別のアニメーションとして読み込むことができます。以下のコードは、画像通りにアニメーションを読み込みます。また、アニメーションを毎秒20フレームで再生するように指定しています。

Sprite {
    name: "black"
    source: "image.png"
    frameCount: 8
    frameWidth: 40
    frameHeight: 40
    frameRate: 20
}
Sprite {
    name: "red"
    source: "image.png"
    frameX: 120
    frameCount: 5
    frameWidth: 40
    frameHeight: 40
    frameRate: 20
}
Sprite {
    name: "blue"
    source: "image.png"
    frameX: 40
    frameX: 40
    frameCount: 2
    frameWidth: 40
    frameHeight: 40
    frameRate: 20
}

1つのアニメーション内のフレームは、すべて同じサイズでなければなりません。ただし、同じファイル内の複数のアニメーションについては、その必要はありません。frameCount が指定されていないスプライトは、ファイル全体を使用するとみなされるため、フレームサイズを指定する必要があります。フレームサイズが指定されていないスプライトは、正方形であり、折り返しなしでファイル全体を使用するとみなされるため、フレーム数を指定する必要があります。

スプライトエンジンは内部で画像をコピーして切り分け、読み取りやすい内部形式に適合させるため、グラフィックメモリに一定の制限が生じます。1つのエンジンが使用するすべてのスプライトを同じテクスチャに収める必要があるため、多数の異なるアニメーションを読み込もうとすると、組み込みデバイスにおいてテクスチャメモリの制限に抵触する可能性があります。 このような状況では、最大テクスチャサイズが記載された警告がコンソールに出力されます。

一連の画像をスプライトシートに変換するのに役立つツールがいくつかあります。以下にその例をいくつか挙げます：

• Photoshopプラグイン：http://www.johnwordsworth.com/projects/photoshop-sprite-sheet-generator-script
• GIMPのSpriteSheetプラグイン
• コマンドラインツール：http://www.imagemagick.org/script/montage.php

スプライトエンジンを使用する QML タイプ

スプライトエンジン用のスプライトは、Sprite 型を使用して定義できます。この型には、入力パラメータに加え、アニメーションの長さや他のアニメーションへの重み付けされた遷移が含まれます。これは純粋なデータクラスであり、何もレンダリングしません。

SpriteSequence は、スプライトエンジンを使用して、その中に定義されたスプライトを描画する型です。これは単一かつ自己完結型のスプライトエンジンであり、他のスプライトエンジンとは相互作用しません。Sprite 型は、スプライトエンジンを使用する型間で共有できますが、これは自動的に行われるわけではありません。 したがって、あるSpriteSequence でスプライトを定義した場合、そのアニメーションへ遷移するためには、別のSpriteSequence のspritesプロパティ内でそのスプライトを再定義するか（あるいは同じSprite 型を参照する必要があります）。

さらに、ImageParticle はSprite の型を使用して、各パーティクル用のスプライトを定義することができます。これもまた、1つの型につき1つのスプライトエンジンとなります。これはSpriteSequence と同様に機能しますが、ImageParticle 型が提供するパラメータ化された可変性も備えています。

AnimatedSprite タイプ

アニメーション間の遷移を必要としないユースケースでは、AnimatedSprite 型を検討してください。この型は、同じ入力形式でスプライトアニメーションを表示しますが、一度に1つだけ表示されます。また、バックグラウンドでタイミングや遷移を管理するスプライトエンジンが存在しないため、よりきめ細かな手動制御が可能です。