CreateJS框架初探

createJs作为一个轻量级框架，使得canvas开发轻松不少；不过初次接触还是有些坑。createJs分成easelJs（图形动画）、preloadJs（文件加载）、soundJs（音频控制）以及tweenJs（补间动画）四部分，直接写一个小demo当入门吧。

最终效果是用w、a、s、d控制小人的移动与跳跃，这里只需要引入easelJs和preloadJs即可。

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

先用LoadQueue对象加载资源，这里传一个false参数。（true为使用 XHRLoader，false将使用 TagLoader；本地开发使用false即可）

然后加载资源：

        function startPreload() {            var manifest = [{                id: 'ground',                src: 'ground.png'            }, {                id: 'man',                src: 'man.png'            }];            preload.setMaxConnections(3);            preload.maintainScriptOrder = true;            preload.installPlugin(createjs.Sound);            preload.on("error", loadError);            preload.on("complete", loadComplete);            preload.loadManifest(manifest);        }        startPreload();

将需要的资源写成JSON，调用loadManifest()方法加载。这里记录一下LoadQueue对象的常用方法。

preload.setMaxConnections(3);//设置并发数

preload.maintainScriptOrder=true;//设置并发数的同时需要将此属性设为true

preload.installPlugin(createjs.Sound);//如果有音频资源需要加载此插件

preload.on("error", loadError);//监听加载的过程以及相应的处理函数

// 1.complete：当所有的文件都加载完成时触发

// 2.error：当队列中的任何一个文件发生错误时触发

// 3.progress：整个队列的加载进度发生变化时触发

// 4.fileload：每个单独的文件加载完成时触发

// 5.fileprogress：单独的文件加载进度发生变化时触发。只有在用XHR加载的时候才会触发

这里需要注意，当加载队列内有文件加载错误，还是会触发complete完成：

开发时注意在complete函数内判断资源是否正确加载（或许有更好的方法？）

资源加载成功后，根据id调用：

var groundImage = preload.getResult('ground');var manImage = preload.getResult('man');var ground = new createjs.Bitmap(groundImage);

因为是本地开发，上传用的是TagLoader，所以获取的对象只是标签，需要注意。

用到的图片：

            //克隆地面图片生成区域的地面效果            for (i = 0; i < groundNum; i++) {                var tempBlockGround = ground.clone();                tempBlockGround.x = i * 70;                tempBlockGround.y = stageHeight - blockHeight;                stage.addChild(tempBlockGround);            }

要看实现效果用stage.update();更新画布即可。
接下来，划分素材，制作精灵动画表：

           var spritesheetMan = new createjs.SpriteSheet({                'images': [manImage],                'frames': {                    'height': 96,                    'count': 10,                    'width': 75                },                // 定义每一帧的数据，宽高等等，形成动画的每一帧                // 有两种方法，如果所有的帧的尺寸相同，只需要统一定义                // 如果帧数据的尺寸不同，分别定义即可                // x, y, width, height, imageIndex, regX, regY,这里的imageIndex对应“images”列表中的图片索引                // [0,0,64,64,0,32,64],                'animations': {                    run: [0, 9],                    jump: [3, 4] //[开始帧，结束帧，动画完成后的动作，速度]                }            });

有了精灵动画表，就可以制作精灵对象：

            var character = new createjs.Sprite(spritesheetMan);            character.x = 50;            character.y = manGround;            stage.addChild(character);

监听输入事件播放动画：

            createjs.Ticker.addEventListener('tick', handleTicker);            document.onkeydown = handleKeyDown;            document.onkeyup = handleKeyUp;            function handleTicker() {                //控制人物的移动和翻转效果                if (moveLeft) {                    character.x -= xVel;                    if (character.scaleX > 0) {                        character.scaleX *= -1;                        character.x += 100;                    }                }                if (moveRight) {                    character.x += xVel;                    if (character.scaleX < 0) {                        character.scaleX *= -1;                        character.x -= 100;                    }                }                if (jumping) {                    yVel += 1.2;                    character.y += yVel;                    if (character.y > manGround) {                        character.y = manGround;                        yVel = 0;                        jumping = false;                    }                }                stage.update();            }            function handleKeyDown(e) {                switch (e.keyCode) {                    case 87: // W                        if (jumping == false) {                            yVel = -15;                            jumping = true;                            character.play('jump');                        }                        break;                    case 65: // A                        moveLeft = true;                        character.play('run');                        break;                    case 68: // D                        moveRight = true;                        character.play('run');                        break;                }            }            function handleKeyUp(e) {                switch (e.keyCode) {                    case 65: // A                        moveLeft = false;                        character.gotoAndStop(0);                        break;                    case 68: // D                        moveRight = false;                        character.gotoAndStop(0);                        break;                }            }        }

主要记录下Ticker这个类：
Ticker类为游戏开发提供了一个主要的定时类。它主要的目的就是把stage渲染的工作集中起来，也就是说定时调用stage.update()这个方法。Ticker设置的频率也就是游戏的帧数。

留个链接，以供参考：
http://blog.csdn.net/k_shl_2011/article/details/47659139