Createjs Series Tutorial easeljs_6_ drawing animated Catwalk (Spritesheet)

Core JS Code:

var cjs = createjs,    canvas,    stage,     container,    w = window.innerwidth,    h =  window.innerheight;function init ()  {    //set canvas Properties      canvas = document.getelementbyid (' game ');    canvas.width = w;     canvas.height = h;    //Creating the Stage      Stage = new cjs. Stage (canvas);     container = new cjs. Container ();//Draw external container     stage.addchild (Container);     var data  = {        images: ["Imgs/dance.png"],         frames: {             width: 320,            height: 504,             count: 12         },        animations: {             dance: [0, 11]        }     };    var spritesheet = new cjs. Spritesheet (data),         animation = new cjs. Sprite (spritesheet,  "Dance");     animation.set ({x:0,y:0,scalex: w/320,scaley:h/ 504 });//Zoom to full screen     container.addchild (animation);     cjs. Ticker.setfps (15);//Set the game frame rate     cjs. Ticker.on ("tick",  stage);}

Explanation:

1:sprite Data Construction

var data = {images: ["imgs/dance.png"], frames: {width:320,//width of each frame height:504,// Height per frame count:12//Total number of frames}, animations: {dance: [0, 11]//Custom animation name}};

There are many forms of animation data construction, the size of each frame is the same and different, the same method is used here;

2: Full Frequency Show

var spritesheet = new CJs. Spritesheet (data), animation = new CJs. Sprite (Spritesheet, "Dance");//start execution of defined dance animation Animation.set ({x:0,y:0,scalex:w/320,scaley:h/504});//Zoom to full screen contain Er.addchild (animation);

Effect Demo:

Createjs Series Tutorial easeljs_6_ drawing animated Catwalk (Spritesheet)