0

私はeaseljsで手を試し、スプライトシートをアニメーション化しています。スプライトを扱うのはこれが初めてで、スプライトについての知識がありません。

この特定のアニメーションを表示するための私の簡単なeaseljsコードは次のとおりです。

var stage;

function init() {

    // create a new stage and point it at our canvas:
    stage = new createjs.Stage(document.getElementById("demoCanvas"));

     var data = {
         images: ["http://i.imgur.com/g5WtL7v.png"],
         frames: {width:256, height:256},
         animations: {
            run:[0,4]
            }
     };

     var spriteSheet = new createjs.SpriteSheet(data);
     var animation = new createjs.BitmapAnimation(spriteSheet);
     animation.gotoAndPlay("run");

}

しかし、スプライトはキャンバスにまったく表示されません。私は何を間違っていますか？

追加の質問; easyeljs でフレームを定義するには、次のようにします。

frames: [ // x, y, width, height, imageIndex, regX, regY

幅と高さは理解していますが、x、y、imageIndex、regX、regY とは何ですか。ドキュメンテーションには、これらのパラメーターの使用方法が説明されていますが、人生で初めてスプライトを扱う人にとっては、これらの用語が何を意味するのかわかりません。

EDIT：コードをそのまま変更しようとしました。

 var stage;

function init() {

    // create a new stage and point it at our canvas:
    stage = new createjs.Stage("demoCanvas");

    var data = {
        images: ["http://i.imgur.com/g5WtL7v.png"],
        frames: {width:256, height:256, count:8},
        animations: {
            run:[0,4, true]
        }
    };

    var ss = new createjs.SpriteSheet(data);
    var animation = new createjs.BitmapAnimation(ss);

    animation.x = 100;
    animation.y = 100;

    stage.addChild(animation);

    createjs.Ticker.setFPS(60);
    createjs.Ticker.addEventListener("tick", stage);
}

しかし、私はまだ空白のキャンバスを見ています...

4

2 に答える 2

1

フレーム オブジェクトにフレーム カウントがありません:

frames: {width:...,height:...,count:4} // or whatever number of frames your sprite holds

念のため: 幅と高さは、画像全体ではなく、1 フレームの幅と高さです。

ここで詳細と例を参照してください: http://www.createjs.com/Docs/EaselJS/classes/SpriteSheet.html

于 2013-09-15T19:21:47.353 に答える
0

わかりました、上にリストした両方のコードを組み合わせることで動作するようになりました。

var stage;

function init() {

    // create a new stage and point it at our canvas:
    stage = new createjs.Stage("demoCanvas");

    var data = {
        images: ["http://i.imgur.com/g5WtL7v.png"],
        frames: {width:256, height:256, count:8},
        animations: {
            run:[0,4, true]
        }
    };

    var ss = new createjs.SpriteSheet(data);
    var animation = new createjs.BitmapAnimation(ss);



    animation.x = 100;
    animation.y = 100;

    stage.addChild(animation);
    animation.gotoAndPlay("run");

    createjs.Ticker.setFPS(10);
    createjs.Ticker.addEventListener("tick", stage);
}

いくつか質問があります。

  1. スプライトをアニメーション化する必要がある場合、どうしてhttps://github.com/CreateJS/EaselJS/blob/master/examples/SpriteSheet_simple.htmlanimation.gotoAndPlay("run");のコードが必要ないのでしょうか?
  2. new createjs.Sprite(ss, "run");との違いは何ですか new createjs.BitmapAnimation(spriteSheet);。前者のドキュメントを見つけることができません。
于 2013-09-16T19:41:10.347 に答える