createjs初学-buttonを作成する

createjsでbuttonを作成するにはButtonHelperを使用し、実際にはSpriteとSpriteSheetの2つのクラスも使用します.次は最も簡単なbuttonです.

var data={
        images:["out.png","down.png"],
        frames:[
            [0,0,135,43,0],
            [0,0,135,43,1]
        ],
        animations:{
            out:0,
            down:1
        }
 }
 var sheet=new createjs.SpriteSheet(data);
 var sprite=new createjs.Sprite(sheet);
 var helper=new createjs.ButtonHelper(sprite,"out","out","down");
 stage.addChild(sprite);

全部で4つの部分があり、dataはspriteSheetにデータを提供し、images、frames、animationsから構成されています.
imagesは1組のピクチャで、htmlピクチャであってもよいし、ピクチャのuriであってもよい.

images: [image1, "path/to/image2.png"],

framesは各フレームを定義するために用いられ、2つのデータフォーマットがある.すべてのフレームのサイズは同じで、フレームのインデックスは幅の高さに応じて左から右に、上から下に並べられます.

frames: {width:64, height:64, count:20, regX: 32, regY:64, spacing:0, margin:0}

2.画像は異なるサイズで、最初の4つのパラメータはそれぞれx,y,width,heightを表し、5番目のimageIndexは上のimages配列のインデックスを表し、デフォルトは0です.最後のパラメータは、フレームの登録位置を表します.

frames: [
    // x, y, width, height, imageIndex*, regX*, regY*
    [64, 0, 96, 64],
    [0, 0, 64, 64, 1, 32, 32]
    // etc.
]

アニメーションはフレームアニメーションとアニメーションの名前を指定し、3つのフォーマットがあり、具体的にはAPIがbuttonにある例を参照すると簡単で、「out」を指定し、第1フレームを表示し、「down」を第2フレームを表示します.

animations:{ out:0, down:1 }

そしてdataに基づいてspriteSheetを作成しspriteSheetでspriteを作成しました
ButtonHelperを作成するときにspriteを送信します.ButtonHelperは表示オブジェクトではありません.最後にspriteを舞台に追加する必要がありますが、Buttonhelperの参照はゴミ回収されないように維持する必要があります.

ButtonHelper ( target  [outLabel="out"]  [overLabel="over"]  [downLabel="down"]  [play=false] [hitArea]  [hitLabel] )

コンストラクション関数の最初のパラメータはspriteで、2番目にout状態が表示されるアニメーションの名前を指定し、上で使うことは「out」で、デフォルトも「out」で、dataの中の名前に対応する限り、他の値を使うこともできます.後の2つのパラメータも同じです.enableMouseOverで設定しない限り、デフォルトではover状態は有効ではありません.