sprite - Createjs EaselJSで複数の画像を1つのスプライトとしてインポートする方法は?

Question

複数の画像を 1 つのスプライト画像としてマージする必要があります。これらの画像は一部のアニメーションの一部ではなく、単に別の静止画像です。

Createjs/EaselJS でどうにかロードする必要がありますが、スプライト シート データの json のテンプレートがわかりません。

すべての検索結果は、スプライト アニメーションの作成方法を示していますが、アニメーションは必要ありません。ID による静止画像だけです。

誰でもこれを達成する方法の例を提供できますか?

Answer 1

json ファイルの例を次に示します。

{
    "frames": [
        [0, 0, 120, 200],
        [140, 0, 350, 400]]
}

「フレーム」のすべてのアイテムは、あなたのにもかかわらず画像の 1 つのフレームを表します。各フレームごとに 4 つの値があります。最初の 2 つは、スプライト内のフレームの位置を表します。[0, 0] はフレーム #1 の左上隅、[140, 0] はフレーム #2 です。他の 2 つの値は、フレーム サイズを表します (私の場合は 120x200 と 350x400)。

この json と画像を EaselJS に読み込み、Sprite としてインスタンス化します。このような：

var ssheet = new createjs.SpriteSheet(ss);  
var sprite = new createjs.Sprite(ssheet);

あなたの場合はアニメーションではないので、 play メソッドを使用しないでください。最初のフレームに gotoAndStop(0) を呼び出し、2 番目のフレームに gotoAndStop(1) を呼び出すだけです。

スプライトをステージに追加します。