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

猜你喜欢