EaselJs 测试小结

最新推荐文章于 2019-08-12 18:13:28 发布

转载最新推荐文章于 2019-08-12 18:13:28 发布 · 1.6k 阅读

文章标签：

#html5

EaselJS 专栏收录该内容

3 篇文章

订阅专栏

目的：基于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