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