EaselJs 测试小结

目的：基于PhoneGap + html5 + javascript 的手机2D游戏开发的性能等方面测试。
框架下载地址：  http://www.createjs.com/
EaselJs 目前版本：0.7
目前已测试如下环境 ：
   手机：HTC t528t(android 4.1),不知名平版(android 4.0)
   浏览器： ie 10,firefox 23,chrome 29,Safari 5.1,
EaselJS 是 CreateJS 工具之一，用来处理HTML5的canvas。其它工具暂没用到，也没有测试， 如SOUNDJS，用来帮助简化处理音频相关的API，但因为是手机游戏开发，而PhoneGap这方面的处理方法应该更适合本测试。

 
*********************高端大气上档次的分隔线*********************
以下有些说法是本人用在线词典翻译的，所以请连猜带蒙的看。
************************************************************

第一步，准备Stage（舞台），舞台实际就是HTML5的canvas：

var canvas = document.getElementById( "testCanvas"); //不能使用jquery的$("#testCanvas")。
var stage = new createjs.Stage(canvas);

第二步，向Stage添加内容，及EaselJs对像， 测试中用到的有：
  Shape：矢量图
  Bitmap：位图
  Sprite：精灵

  Container：容器

var sky = new createjs.Shape();
var container = new createjs.Container();
var bitmap = new createjs.Bitmap();
var grant = new createjs.Sprite(ss, "bom");
container.addChild(grant);
stage.addChild(sky, bitmap, container);//注意顺序，靠后的显示在最上层。

*********************高端大气上档次的分隔线*********************
下面是这些对像的简单用法
【  Shape：矢量图  】
     显示位图（Bitmap表示很纳闷）
      var sky = new createjs.Shape();
      sky.graphics.beginBitmapFill(img/sky.png).drawRect(0, 0, w, h);
       绘一个三角形
       var trigon=new createjs.Shape();
       var g = trigon.graphics;
     g.clear();
     g.beginStroke("#FFFFFF");
     g.moveTo(0, 10);  
     g.lineTo(5, -6);   
     g.lineTo(0, -2);   
     g.lineTo(-5, -6);  
     g.closePath();
 【  Bitmap：位图  】
      var image = new Image();
      image.src = "img/2.png";
      var bitmap = new createjs.Bitmap(image);

【 Sprite：精灵 】

注意，现有一个方法 BitmapAnimation与Sprite一样，官方说以后的版本将删除

     首先需要一个SpriteSheet（精灵动画图片）

     var ss = new createjs.SpriteSheet({
        "animations":
        {
            "bom": [0, 9]
        },
        "images": ["img/explosion.png" ],
        "frames":
            {
                "height": 60,
                "width": 60,
                "regX": 0,
                "regY": 0,
                "count": 10
            }
    });

     
   其中“explosion.png”是一张由动画的各个帧组合成的一张大图，大图宽高为每一帧宽高的整数倍，Sprite将以从左到右，从上到下的顺序读取每一帧。

     animations(动画片断)：假设explosion.png里有60帧动画，但你需要的只是其中某部分，以上定义Sprite将只播放其中的0-9帧。

"animations" :
        {
            "bom" : [0, 9]
        }

var grant = new createjs.Sprite(ss, "bom");//自动重复

    animations可以定义多个片断，还可以定义多个片断之间链接关系，如：

"animations" :
        {
            "run" : [0, 9,"jump"],
             "jump" : [15,20,"run"]
        }

var grant = new createjs.Sprite(ss, "run");

     以上定义中Sprite将先播放“run”，再播放“jump”,再播放“run”,如此循环。
     如果将 "jump" : [15,20,"run"] 改为 "jump" ::[15,20]，Sprite播放到jump后，将只循环播放jump.

    frames（帧）的定义：

"frames" :
            {
                "height": 60,  
                "width": 60,
                "regX": 0,
                "regY": 0,
                "count": 10
            }

     height、width、count分别为帧的高、宽和帧的总数。

第三步，拖动

bitmap.on("mousedown", function (evt) {
        this.parent.addChild(this );
        this.offset = { x: this .x - evt.stageX, y: this.y - evt.stageY };
    });
    bitmap.on("pressmove", function (evt) {
        this.x = evt.stageX + this .offset.x;
        this.y = evt.stageY + this .offset.y;
   });
在Ticker监听事件中
stage.update(event);

第四步，更新stage
     利用createjs.Ticker来增加监听来更新stage，让元素动起来。

     function init() {
            createjs.Ticker.addEventListener( "tickname" , tick);
     ｝
      function tick(event) {
             //更新元素
            stage.update(event);
     ｝
      function stop() {
          createjs.Ticker.removeEventListener( "tickname" , tick);
     }

第五步，碰撞
   官方例子中碰撞是检测圆，半径设置比较麻烦。

    p.hitPoint = function (tX, tY) {
        return this .hitRadius(tX, tY, 0);
    }
    p.hitRadius = function (tX, tY, tHit) {
        //early returns speed it up
        if (tX - tHit > this .x + this.hit) {
            return;
        }
        if (tX + tHit < this .x - this.hit) {
            return;
        }
        if (tY - tHit > this .y  + this.hit) {
            return;
        }
        if (tY + tHit < this .y  - this.hit) {
            return;
        }
        //now do the circle distance test
        return this .hit + tHit > Math.sqrt(Math.pow(Math.abs(this.x - tX), 2) + Math.pow(Math.abs( this.y - tY), 2));
    }

   下面是找到的一个替代方案，目前没有具体测试
    https://github.com/olsn/Collision-Detection-for-EaselJS