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

スプライトエンジン

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

ステートマシン

スプライトエンジンの主な機能は、内部のステートマシンです。これはQt Quickのステートやトランジションとは異なり、従来のステートマシンに近いものです。スプライトは、他のスプライトへの遷移や、自分自身への遷移にウェイトを持つことができます。スプライトのアニメーションが終了すると、スプライトエンジンは次のスプライトをランダムに選択します。

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

例として、上の図は仮想的な2Dプラットフォームゲームのキャラクターのスプライトを示しています。このキャラクターは、まず立っている状態を表示します。この状態から、外部からの入力がない限り、待機アニメーション、歩行アニメーション、または再び待機アニメーションのいずれかに遷移します。これらの遷移の重みはそれぞれ1、0、3であるため、スタンディング・アニメーションが終了したときに待機アニメーションを再生する確率は4分の1、再びスタンディング・アニメーションを再生する確率は4分の3である。これにより、待機中の挙動が微妙に変化するアニメーションを持つキャラクターを作ることができる。

ウォーキング・アニメーションへのウェイト遷移はゼロなので、通常、スタンディング・アニメーションはそこに遷移しません。しかし、ゴール・アニメーションをウォーキング・アニメーションに設定した場合、スタンディング・アニメーションが終わるとウォーキング・アニメーションが再生されます。それ以前に待機アニメーションに入っていた場合は、待機アニメーションを再生し終えてから、立位アニメーションを再生し、次に歩行アニメーションを再生します。そして、ゴール・アニメーションが設定されなくなるまでウォーキング・アニメーションを再生し続け、ウォーキング・アニメーションが終わるとスタンディング・アニメーションに切り替わる。

その後、ゴールステートをジャンプアニメーションに設定すると、ジャンプアニメーションを再生する前にウォーキングアニメーションが終了します。ジャンプアニメーションは他のステートに遷移しないので、ステートが強制的に変更されるまで、ジャンプアニメーションを再生し続けます。この例では、歩行に戻し、ゴール・アニメーションを歩行に変更するか、何もしない（歩行アニメーションの後に立位アニメーションを再生する）。強制的にアニメーションを設定することで、すぐにアニメーションを再生し始めることができることに注意してください。

入力フォーマット

スプライトエンジンが受け付けるファイルフォーマットは、Image などの他の QML タイプが受け付けるファイルフォーマットと同じです。ただし、画像をアニメーションさせるためには、スプライトエンジンは画像ファイルにアニメーションのすべてのフレームを含める必要があります。この画像ファイルは、ファイルの右端から左端（前の行の真下）へ折り返すように、連続した行に配置する必要があります。

例として、上の画像を見てみよう。とりあえず、黒い数字だけを考え、正方形は40×40ピクセルだと仮定する。通常、画像は左上から読み込まれます。仮にフレームサイズを40x40ピクセル、フレーム数を8と指定した場合、フレーム番号順に読み込まれることになる。左上のフレームが最初のフレーム、右上のフレームが5番目のフレーム、そして次の行（ファイルのピクセル位置0,40）に折り返して6番目のフレームを読み込むことになる。8と表示されたフレームで読み込みを止め、4フレーム目以下の正方形に画像データがあれば、それはアニメーションに含まれない。

任意のオフセットからアニメーションを読み込むことは可能ですが、それでも同じパターンに従います。次に赤い数字について考えてみよう。アニメーションはピクセル位置120,0から始まり、フレーム数は5、フレームサイズは先ほどと同じとすると、赤い番号のフレームが読み込まれます。120,0の位置から40x40のブロックを読み込み始めるので、画像の最初の120x40は使われない。ファイルの終端160,0に達すると、0,40から次の行の読み込みを開始する。

青い数字は、そのサイズの2つのフレームを40,40から読み込もうとした場合のフレーム番号を示している。なお，1つの画像ファイルから複数のスプライトを読み込むことも可能です．赤、青、黒の数字はすべて別々のアニメーションとして同じスプライト・エンジンに読み込むことができます。次のコードでは、画像に従ってアニメーションをロードします。また、アニメーションは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
}

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

スプライト・エンジンは、内部で画像をコピーしたり切り取ったりして、読みやすい内部フォーマットに合わせるため、グラフィック・メモリの制限を受けることがあります。1つのエンジンのすべてのスプライトを同じテクスチャにする必要があるため、多くの異なるアニメーションをロードしようとすると、組み込みデバイスのテクスチャメモリの制限にぶつかることがあります。このような状況では、最大テクスチャサイズを含む警告がコンソールに出力されます。

画像のセットをスプライトシートにするのに役立つツールがいくつかあります。以下はその例です：

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

スプライトエンジンを使ったQML型

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

SpriteSequence は、スプライト・エンジンを使って定義されたスプライトを描画する型です。 、スプライト・エンジンを使用する型間で共有することができますが、これは自動的には行われません。そのため、ある でスプライトを定義した場合、そのアニメーションに移行するためには、別の の sprites プロパティでそのスプライトを再定義（または同じ タイプを参照）する必要があります。Sprite SpriteSequence SpriteSequence Sprite

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

AnimatedSprite タイプ

アニメーション間の遷移を必要としないユースケースには、AnimatedSprite タイプを検討します。この型は同じ入力フォーマットでスプライト・アニメーションを表示するが、一度に1つしか表示しない。また、スプライトエンジンが裏でタイミングやトランジションを管理しないため、よりきめ細かな手動制御が可能です。