EaselJs 测试小结
来源:互联网 发布:淘宝二手卡地亚手表 编辑:程序博客网 时间:2024/05/16 11:32
目的:基于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这方面的处理方法应该更适合本测试。
Shape:矢量图
Bitmap:位图
Sprite:精灵
下面是这些对像的简单用法
【 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);
其中“explosion.png”是一张由动画的各个帧组合成的一张大图,大图宽高为每一帧宽高的整数倍,Sprite将以从左到右,从上到下的顺序读取每一帧。
如果将 "jump" : [15,20,"run"] 改为 "jump" ::[15,20],Sprite播放到jump后,将只循环播放jump.
利用createjs.Ticker来增加监听来更新stage,让元素动起来。
第五步,碰撞
官方例子中碰撞是检测圆,半径设置比较麻烦。
https://github.com/olsn/Collision-Detection-for-EaselJS
框架下载地址: 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
0 0
- EaselJs 测试小结
- EaselJS 简介
- EaselJS 事件
- 测试小结
- easeljs的基础
- 测试工具小结
- 测试工作小结
- 两年测试小结
- web 性能测试小结
- 小结--性能测试步骤
- 软件测试小结
- Web测试工具小结
- 性能测试小结
- 软件测试模版小结
- ITransform接口测试小结
- spring测试小结
- 性能测试小结
- 个人小结-测试
- 数据结构课程设计--通讯录管理(C语言实现)
- centos调整时区
- Maximo - psdi.util.MXObjectNotFoundException: server#LookupNotFound
- 51Talk-Level 7 Unit 4 L4
- 酷狗音乐API
- EaselJs 测试小结
- 成都青羊考场科目二考试分享
- android 发送短信和接受短信模块
- hdu 4947 A simple dynamic programming problem(2014 Multi-University Training Contest 10)
- hdu 4970 Killing Monster
- UIView、Layer、Animation
- 二分图的最大匹配————匈牙利算法(hungary)基础详解。
- 国际化与本地化(i18n)支持函数库(多语言)
- net spy memcached 使用demo