2

SpriteSheet アニメーションからスプライトを水平方向に反転しようとしています。私はこの例から始めています

スプライトシートを作成した直後に、反転したフレームを追加しました

    var ss = new createjs.SpriteSheet(spriteSheet);

    createjs.SpriteSheetUtils.addFlippedFrames(ss, true, false, false);

    grant = new createjs.BitmapAnimation(ss);
...

そして、私はいつもこのエラーを受け取ります:

Uncaught TypeError: Cannot read property 'length' of null    (SpriteSheetUtils.js l.174)

誰かがこのgithub スレッドで同じ問題を抱え ており、プリロード機構を使用して修正したことがわかりました。

この例ではプリロードも使用しているため、リソースのロード後に addFlippedFrames を呼び出そうとしましたが、まだ同じエラーが表示されます。

誰かが私に手がかりを持っていますか? addFlippedFrames を使用するにはどうすればよいですか?

編集: ここに私が試したコードがあります:

スプライトシートでステージを開始します:

    spriteSheet = new createjs.SpriteSheet({
        "animations": {
            "none": [0, 0],
            "run": [0, 25],
            "jump": [26, 63]
        },
        "images": ["characters/grant/runningGrant.png"],
        "frames": {
            "height": h,
            "width": w,
            "regX": 0,
            "regY": 0,
            "count": 64
        }
    });



    sprite = new createjs.BitmapAnimation(spriteSheet);
    sprite.x = startPosition.x;
    sprite.y = startPosition.y;

// Add the sprite to the stage.
stage.addChild(this.sprite);

次に、次のようにプリロードを使用します。

var manifest = [{
        src: "characters/grant/runningGrant.png",
        id: "grant"
    }
];

var loader = new createjs.LoadQueue(false);
loader.onFileLoad = handleFileLoad;
loader.onComplete = onResourcesLoaded;
loader.loadManifest(manifest);

およびコールバック関数:

handleFileLoad = function(event) {
    assets.push(event.item);
};

onResourcesLoaded = function() {

    for (var i = 0; i < assets.length; i++) {
        var item = assets[i];
        var id = item.id;
        var result = loader.getResult(id);

        if (item.type == createjs.LoadQueue.IMAGE) {
            var bmp = new createjs.Bitmap(result);
                //does this Bitmap creation trigger the real bitmap loading ?
                //is this loading asynchrous which would explain my problem.
                //in this case, how can I manage the loading callback ?
        }
    }

    //I would expect here to have the image fully loaded but its not
    //A timeout of 2 seconds makes the addFlippedFrames works.
    setTimeout(function(){
            createjs.SpriteSheetUtils.addFlippedFrames(spriteSheet, true, false, false);
            sprite.gotoAndPlay("run_h"); //I think "run_h" is used to launch the flipped version of "run"
    }, 2000);
};
4

2 に答える 2

3

あなたの問題は、画像 URL を使用して SpriteSheet を作成したことでした。これにより、既に読み込みプロセスがトリガーされ、画像の読み込みが既に進行中であったため、preload-js キューは実際には何も読み込まれませんでした。したがって、「onComplete」イベント画像が実際に読み込まれる前に常にトリガーされました-画像を2回読み込む必要がないため、これは理にかなっています

あなたの jsfiddle を更新し、いくつかのコメントを追加しました: http://jsfiddle.net/K4TmS/1/ (完全なコード)

spriteSheet = new createjs.SpriteSheet({
            "animations": {
                "none": [0, 0],
                "run": [0, 25],
                "jump": [26, 63]
            },
            //this line in YOUR version triggered an own loading process, independent from the queue
            "images": [result],  
            "frames": {
                "height": 292.5,
                "width":165.75,
                "regX": 0,
                "regY": 0,
                "count": 64
            }
        });

// this was executed instantly, because the image was already in another loading progress, and therefore wasn't even added to the queue
loader.onComplete = onResourcesLoaded;

DOM セキュリティ エラー 18 は、ここでこの引数を使用して無視できます (開発用) Chrome で同じオリジン ポリシーを無効にし ます しかし、本番環境では、同じサーバーから img をロードするだけで、イメージ操作でエラーは発生しません。

要するに:あなたの問題は実行順序が間違っていたことが原因でした. （ローディンググラフィック/アニメーション/インジケータを除く）。

于 2013-06-16T10:28:35.260 に答える
2

scaleXで簡単にできます

if(right == true)
    {
        //walking direction en sprite switch
        rogerWalk.scaleX = -1 * rogerWalk.scaleX;
        right = false;
    }

//以前作成したコード (この場合、roger walk right (標準のスプライト方向)

if(right == false)
    {
        rogerWalk.scaleX = -1 * rogerWalk.scaleX;
        right = true;

//これは、私が持っているkeyleft/keyright関数にあります

私はそれが古い投稿を知っていますが、それでも誰かがそれを使用できるかもしれません:)

于 2014-01-11T00:37:21.727 に答える