0

問題がeaseljsの障害なのか、それとも何か間違ったことをしているのか（おそらくかなり）はわかりません。TexturePackerオブジェクトを使用してアニメーションを実行すると、小数点以下の桁数が異なる数値の間の配列位置にあるアニメーションが表示されません。（例：9から10、99から100）

jsfiddleのコード例：

var fromTexturePacker = {
    "animations": {
        "0": [0],
            "1": [1],
            "2": [2],
            "3": [3],
            "4": [4],
            "5": [5],
            "6": [6],
            "7": [7],
            "8": [8],
            "9": [9],
            "10": [10],
    }
}

var canvas = document.getElementById("canvas");
var stage = new createjs.Stage(canvas);

createjs.Ticker.addListener(stage);

var image = new Image();
image.src = "http://www.kadrmasconcepts.com/blog/wp-content/uploads/2011/05/robin.png";

var Animaciones = {
    images: [image],
    frames: {
        width: 240,
        height: 315,
        regX: 120,
        regY: 160
    },
    animations: {}
};

var anim = fromTexturePacker['animations'];

Animaciones.animations['go0to9'] = [anim['0'], anim['9']];
Animaciones.animations['go9to10'] = [anim['9'], anim['10']];
Animaciones.animations['go10to10'] = [anim['10'], anim['10']];

bird = new createjs.BitmapAnimation(new createjs.SpriteSheet(Animaciones));
bird.x = 150;
bird.y = 150;
bird.gotoAndPlay("go0to9");

stage.addChild(bird);

http://jsfiddle.net/xa6Lr/9/

4

1 に答える 1

1

あなたの問題は、単一のフレームを「アニメーション」として参照していて、1 フレームだけに配列を使用していることです。これがどのように機能するかには複数の方法があります。以下の私のフォークを参照してください。

//either remove the arrays
var fromTexturePacker = {
    "animations": {
            "0": 0,
            "1": 1,
            "2": 2,
            "3": 3,
            "4": 4,
            "5": 5,
            "6": 6,
            "7": 7,
            "8": 8,
            "9": 9,
            "10": 10
    }
}

//OR if you NEED to put single frames into arrays, use this:
Animaciones.animations['go9to10'] = [anim['9'][0], anim['10'][0]];

http://jsfiddle.net/YVyKJ/2/

EaselJS アニメーション システムは非常に強力です。フレームとして多次元配列を提供することでアニメーションが機能していたことは十分に驚くべきことだと思います。

于 2013-03-18T07:44:41.850 に答える