Api Doc

`CEC.Loader` {Class}

Usage

var assets = [
            './images/package/1.png',
            './images/package/2.png',
            './images/package/3.png',
            './images/package/4.png',
            './images/package/pkg_01.jpg',
            './images/package/pkg_03.png',
            './images/package/pkg_05.png',
            './images/package/repeat.png',
            'http://fackbook.com/xx.jpg',
            'http://img08.taobaocdn.com/imgextra/i8/T1IzdRFcVcXXb1upjX.jpg_xxx.jpg'
        ];

        // new Loader().load(assets, cb);
        new Loader(assets, function (progress, img) {
            console.log(progress, img);
        });

资源加载类，用于批量加载images，图片资源加载失败或者超时会自动retry，最多retry3次。超时的定义：第一次5s，第二次3s，第三次2s

加载完成的图片可以通过 loader实例的 loadedImages 获得。

`CEC.Notifier` {Class}

src/notifier/index.js 消息体，基类，所有的类都继承于它，使其集成消息【事件】发送和接收的机制

Methods
- fire(ev[, args...]) - fire一个消息，第二个参数开始是需要传递的param
- on(ev, callback) - 监听一个消息
- off(ev[, callback]) - 取消监听某个消息。如果callback存在则取消这个消息的这个callback
- mix([args]) - mix in 的方法，但只有一个参数时会把这个参数的属性浅拷贝给自己。如果有两个，则把第二个的属性浅拷贝给第一个

`CEC.Ticker` {Class}

src/ticker/index.js 计步器，继承于Notifier，具有Notifier的所有原型方法。以下就不列了。

Static
- Ticker.singleton - Ticker 的一个单例
Methods
- stop() - 停止
- resume() - 继续
Events
- tick - 每次循环记步，抛出tick事件，Ticker的实例的可以监听，回调第一个参数为dt，每帧的时间间隔

Usage

CEC.Ticker.singleton.on('tick', function (dt) {
    //loop
});

//or
ticker = new CEC.Ticker();
ticker.on('tick', function (dt) {
    //loop
})

`CEC.Sprite`

src/sprite/sprite.js 虚拟对象节点抽象。继承于Notifier，CEC内所有主要的可编程对象都可以看作一个Sprite。集成一些节点对象常用方法。
如果是矩形的sprite，默认坐标系原点在矩形的中央。

Attr
- x - x轴位置
- y - y轴位置
- points - 必选, 以[x,y]为中心的顶点数组，顺时针方向。可以创建任意多边形的sprite
- scaleX - x轴方向缩放比例
- scaleY - y轴方向缩放比例
- angle - 旋转角度，单位为度，不是弧度
- fillColor - 背景填充色
- borderWidth - 边框宽度
- borderColor - 边框颜色
- opacity - alpha透明度
- zIndex - z方向层叠高度
- visible - 是否可见
- backgroundImage - 背景图片，暂时只支持RectSprite，值可为src string或者ImageElement
- backgroundPosition - [0, 0] 背景图片位置
- backgroundSize - 背景图size设置，比如'100% auto'

注意：

new 一个实例的时候，如果参数为一个对象配置时，如 new Sprite({points:[...]}) points必选，其他初始化属性参照上面Attr,都为可选。
创建实例时，如果参数为canvas id或者canvasElement时，这时的实例默认为一个矩形的sprite，高宽自动为canvas的高宽，具有根节点的意义，根节点除了有普通sprite所有方法和特性外，会有额外的属性

canvas - CanvasElement
ctx - CanvasContext2D
type - 默认为stage
shape - rect
当普通sprite被add进“根节点”后，会被赋予canvas, ctx, parent等属性。
Methods - 【所有不是有固定的预期返回值的方法都支持链式调用】
- add(child) - 添加一个子sprite，子元素的位置x,y，缩放比例，旋转状态等，都是相对于父元素的
- appendTo(parent) - 把自己append到某个父元素中去
- remove([child]) - 把指定的child移除掉，如果不设参数则代表把自己从父元素中移除掉
- getIndex() - 获取自己在父元素中的index位置
- getChildIndex(child) - 获取某个子元素的index
- contains(child) - 是否包涵某个子元素
- isVisible() - 当前是否可见
- render(dt) - 渲染函数，sprite的状态，位置等的改变，都要render一次之后才能体现。
- clear([x,y,width,height]) - 擦除某块区域
- on(ev, callback) - 事件监听，如果ev为HtmlEvents，则为这个sprite代理上一个htmlEvents的监听。否则为普通的自定义消息监听。【HtmlEvents事件代理的处理可理解为冒泡的方式】
- delegate(ev, callback) - HtmlEvents事件代理，目前此方法仅提供在“根节点”上。callback的第一个参数event提供了以下属性
  - targetSprite - 预期的触发事件的target
  - stageOffsetX - 事件触发位置相对于stage中心的位置X
  - stageOffsetY - 事件触发位置相对于stage中心的位置Y
  - spriteOffsetX - 事件触发位置相对于当前sprite的位置X
  - spriteOffsetY - 事件触发位置相对于当前sprite的位置Y
- set(param[, autoRender]) - 以对象字面量的方式批量设置sprite的属性。比如x,y,angle,scaleX... 等等。Number类型的基本属性都支持+-*/简单符号运算。比如 set({angle:'+1'}) 。 autoRender 如果为true，会在set完后自动调用一次render。
- setAngle(angle[, autoRender]) - 设置角度
- rotate(angle[, autoRender]) - alias of setAngle
- setFillColor(fillcolor[, autoRender]) - 设置背景颜色
- setXY(x, y[, autoRender]) - 设置位置
- moveTo() - alias of setXY
- setX(x[, autoRender]) - 设置x位置
- setY(y[, autoRender]) - 设置y位置
- setScale(sx, sy[, autoRender]) - 设置x,y轴的缩放比例
- setScaleX(sx[, autoRender]) - 设置x轴的缩放比例
- setScaleY(sy[, autoRender]) - 设置y轴缩放比例
- setOpacity(op[, autoRender]) - 设置alpha透明度

Usage

比如初始化一个多边形的sprite

var Sprite = CEC.Sprite, Ticker = CEC.Ticker;

var stage = new Sprite('canvas').on('render:before', function (dt) { 
            this.fillColor = 'rgba(0,0,0,0.1)';
        });

        var rect = new Sprite({
            x: 100,
            y: 100,
            points: [
                [-50,-30], [0, -65], [50, -30], [30, 30], [-30, 30]
            ]
        }).appendTo(stage);

        Ticker.singleton.on('tick', function (dt) {
            //stage.clear();
            stage.render(dt);
        }); 
``

## `CEC.Sprite.Rect` {Class}
继承自 `Sprite`，也就是矩形化的sprite，具有sprite所有特性和方法。同时提供一些简便操作的地方。

1. 初始化的时候`points`参数不是必选，必选值变为`width` 和 `height` 比如`new RectSprite({width:100, height:200})`。
2. RectSprite默认坐标系都是矩形中心。
3. 如果初始化的时候传入了`backgroundImage` 属性，会自动在每次render的时候在当前rect sprite中绘制这个图片，绘制的方式和位置，大小等通过 `backgroundPosition`, `backgroundRepeat`, `backgroundSize` 来控制，比如：
```javascript
var RectSprite = CEC.Sprite.Rect,
    Ticker = CEC.Ticker;

var stage = new RectSprite('canvas');

        var rect = new RectSprite({
            x: 200,
            y: 100,
            width: 200,
            height: 200,
            backgroundImage: 'http://a.tbcdn.cn/s/kissy/logo.png',
            //backgroundPosition: [-50, 0]
        })
        .setFillColor('#333')
        .appendTo(stage)
        .on('render:before', function () {
             this.rotate('+1');
        });

        Ticker.singleton.on('tick', function (dt) {
            stage.clear();
            stage.render(dt);
        });

Methods
- set(param[, autoRender]) - 批量设置属性，参考Sprite的set
- setDim(width, height[, autoRender]) - 设置宽高
- setWidth(width[, autoRender]) - 设置宽
- setHeight(height[, autoRender]) - 设置高
- setBackgroundPosition
- setBackgroundPositionX
- setBackgroundPositionY
- setBackgroundSize
- setBackgroundWidth
- setBackgroundHeight

CEC.Sprite.Anim {Class}

继承自Sprite.Rect,包装一个精灵帧动画的sprite，需要在初始化的时传入一个参数animConfig 以对象字面量的形式配置动画，比如：

        var anim = new CEC.Sprite.Anim({
            x: 0,
            y: 0,
            width: 300,
            height: 250,
            backgroundImage: './images/package/2.png',
            animConfig: {
                autoPlay: true, //动画是否初始化后自动播放
                loop: true, //是否循环播放
                frameNum: 4, //雪碧图所带的帧动画的帧数
                frameRate: 6, //播放速率，可以理解为speed
                frameData: [ //每一帧在雪碧图中的位置，[sx, sy, width, height]
                    [0, 0, 599.5, 501],
                    [600.5, 0, 599.5, 501],
                    [1201, 0, 599.5, 501],
                    [1801.5, 0, 599.5, 501]
                ]
            }
        })
        .appendTo(stage);

其中，animConfig 中的 frameData 可以不用自己填写每帧数据，前提是sprite精灵图按每帧固定高宽，横向或者纵向排布。可以简化配置，比如：

var anim2 = new CEC.Sprite.Anim({
            x: 200,
            y: 300,
            width: 300,
            height: 250,
            backgroundImage: './images/package/4.png',
            // animConfig  如果包涵imgWidth, imgHeight 字段，不配置frameData的话,会自动依据图片高宽　和　帧排列方向生成frame 数据
            animConfig: {
                frameNum: 4,
                imgWidth: 2002,
                imgHeight: 502,
                arrangeDir: 'h'
            }
        }).appendTo(stage);

Attr
- playing - 是否正在播放
- currentFrame - 当前正在播放哪一帧
- frameWidth - 当前帧的宽度
- frameHeight - 当前帧的高度
- animationLength - 帧动画播放一次的时间长度
Methods
- play() - 开始播放，如果animConfig 里的autoPlay为true时，会在初始化自动调用play()
- stop() - 停止播放。stop后可以调用play() 来继续播放
- setLoop(true|false) - 设置是否循环播放动画
- isLoop() - 获取是否循环
- isPlaying() - 获取是否正在播放
- setFrame(index) - 设置当前播放帧,调用这个api的时候会自动停止动画的自动播放。
- setSpeed(speed) - 设置播放速率
- getSpeed() - 获取当前播放速度
- getFrameNum() - 获取这个帧动画的总帧数
- getAnimationLength() - 获取这个帧动画当前的播放一次时长

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Api Doc

`CEC.Loader` {Class}

`CEC.Notifier` {Class}

`CEC.Ticker` {Class}

`CEC.Sprite`

CEC.Sprite.Anim {Class}

Clone this wiki locally

Api Doc

CEC.Loader {Class}

CEC.Notifier {Class}

CEC.Ticker {Class}

CEC.Sprite

CEC.Sprite.Anim {Class}

Clone this wiki locally

`CEC.Loader` {Class}

`CEC.Notifier` {Class}

`CEC.Ticker` {Class}

`CEC.Sprite`