HTML5游戏开发之将Easel.js和Box2d在画布中结合起来

标签: 技术与实践 HTML5,canvas | 发表时间:2012-05-05 14:53 | 作者:jianguang
出处:http://www.webapptrend.com

 

开发HTML5游戏 Luxahoy时遇到的比较大的困难之一是:如何将Easel.js和Box2d这两个框架结合起来。在本指南中我们将介绍基本的actor对象,让大家学会如何将box2d中的尺寸转换成easel中的x、y坐标以及旋转参数。

要想学习本指南,你应该具备box2d和easel的基本知识,知道它们是如何工作的。如何你从没学习过box2d,请阅读 box2d orientation and tutorials。要想学习easel,请参考 documentation,以学会如何往stage中添加对象,同时也会对显示的层次结构有个整体了解。

现在我们开始吧。我们将要创建的是一个简单的示例—粉红色的“鸟雨”。(注意:本示例只有在较新版本的浏览器中才可能运行)

 

在浏览器中演示下载源代码

我们假定读者已经具备了box2d和easel的基本知识,所以将跳过编写代码的步骤,直接介绍两种框架是如何结合的。如何你想好好研究的话可以下载本示例的 zip文件,也可以直接在本页中查看相关代码。

在Easel.js中,往stage中添加对象是很容易的。下面看一下ticker函数中是如何将鸟(对象)添加到屏幕的。(注意:下面这些代码只是从demo.js中简单摘录过来的。如果你想运行这些代码请下载 zip.)

var tick = function(dt, paused) {
	birdDelayCounter++;
	if(birdDelayCounter % 10 === 0) {  // delay so it doesn't spawn a bird on every frame
		birdDelayCounter = 0;
		birds.spawn();
	}
}
var spawn = function() {
	var birdBMP = new Bitmap("images/bird.png");
	birdBMP.x = Math.round(Math.random()*500);
	birdBMP.y = -30;
	birdBMP.regX = 25;   // important to set origin point to center of your bitmap
	birdBMP.regY = 25;
	stage.addChild(birdBMP);
}

这看起来非常地相象。这些代码的功能是:向stage中添加鸟(位图对象),鸟出现的水平位置是随机的,垂直位置在画布的顶端。位图对象可以具有很大的灵活性,你可以把它插到其它位图中间,可以设置它的初始位置,也可以使它任意倾斜。

如果想把easel对象转化为box2d对象,那么regX和regY(初始位置)是很重要的。因为,box2d对象的起始坐标在中心,而easel的起始坐标在左上方。

既然我们可以把图像添加到stage中了,现在就来看一下box2d的迷人之处吧。

 box2d.createBird(birdBMP);

var createBird = function(skin) {
	var birdFixture = new b2FixtureDef;
	birdFixture.density = 1;
	birdFixture.restitution = 0.6;
	birdFixture.shape = new b2CircleShape(24 / SCALE);   // half of bird.png width divided by world scale for right size
	var birdBodyDef = new b2BodyDef;
	birdBodyDef.type = b2Body.b2_dynamicBody;
	birdBodyDef.position.x = skin.x / SCALE;  // divide skin x and y by box2d scale to get right position
	birdBodyDef.position.y = skin.y / SCALE;
	var bird = world.CreateBody(birdBodyDef);
	bird.CreateFixture(birdFixture);
	bodies.push(bird);
}

以上的代码将会创建一个与鸟位图对象具有相同大小和位置的圆形box2d body。但很可惜,鸟的皮肤没有映射到box2d对象。如果不在调试状态的话,你是看不到box2d的圆圈的,鸟也会保持静止。这样,我们怎么能让皮肤随着box2d body位置的改变而变化呢?

Actors! 在box2d的可视化示例中,Actors是必不可少的。在游戏中进行循环时以及将box2d对象的米制位置转换成像素位置时,基本上都会运行Actors。下面我们就来创建一个Actor。

var actor = new actorObject(bird, skin);
bird.SetUserData(actor);  // set actor as userdata of body so we can get at it later if we need to
   
var actorObject = function(body, skin) {
	this.body = body;
	this.skin = skin;
	this.update = function() { // translate box2d positions to pixels
		this.skin.rotation = this.body.GetAngle() * (180 / Math.PI);
		this.skin.x = this.body.GetWorldCenter().x * SCALE;
		this.skin.y = this.body.GetWorldCenter().y * SCALE;
	}
	actors.push(this);
}   这是最基本的actor对象的例子,当然,你可以对它进行任意扩充。我们还需要告知actor在循环期间进行更新。
// within physics loop before world.step
for(var i=0, l=actors.length; i<l; i++) {
     actors<i>.update();
}

对于box2d body在物理模拟中所发生的一切变化,位图皮肤都会对其进行映射。

如果你想把某点上的body和其皮肤一并去除的话,可以将该body加入到“即将被去除的”数组中。在每次执行world.step之前,这些bodies必须被去除掉。

// before step
for(var i=0, l=bodiesToRemove.length; i<l; i++) {
	removeActor(bodiesToRemove<i>.GetUserData());  // get the actor object in the user data of the body and send to removeActor function
	bodiesToRemove<i>.SetUserData(null);
	world.DestroyBody(bodiesToRemove<i>);
}
// after step
if(bodies.length > 30) {
     bodiesToRemove.push(bodies[0]);
     bodies.splice(0,1);
}
var removeActor = function(actor) {
	stage.removeChild(actor.skin);
	actors.splice(actors.indexOf(actor),1);
}

就是这些了。当你理解诸如:命中次数、box2d 碰撞过虑器的改变、越界检查等这样的actors之后,可以实现更加强大的功能。我也希望在以后的指南中介绍更多这方面的知识。

观看示例下载源代码

原文链接: http://www.luxanimals.com/blog/article/combining_easel_box2d?utm_source=html5weekly&utm_medium=email

作者: Son Tran ,发表于2012年4月22日

译者: 林建光

您可能也喜欢:

在游戏中发挥HTML5 Canvas的潜能

利用HTML5 Canvas创建交互式Bubble Chart

HTML5—背后的现实和炒作(上)

关于HTML5的11个让人难以接受的事实
无觅

相关 [html5 游戏开发 easel] 推荐:

HTML5游戏开发工具推荐:IMPACT

- iDesperadO - HTML5研究小组
Impact 是一个 JavaScript 游戏引擎,可以为桌面和手机浏览器开发令人惊叹的 HTML5 游戏. 我已经试过了四个其他 JavaScript 游戏引擎,这是我用过的第一个比较有意义的(……)Impact 是市场上第一个真正专业级的 JavaScript 和 HTML5 游戏引擎. ——《Game Developer Magazine》,2011年5月.

游戏开发商开源HTML5游戏

- - Solidot
游戏工作室Wooga开源了其开发的HTML5游戏Pocket Island,源代码托管在GitHub上,该公司在官方博客上介绍了他们的开发经验,认为HTML5游戏有潜力,但尚未做好准备,开源的意图将是让其他人了解他们的工作,学习和改进. Wooga认为,2012年也许不是HTML5的黄金时代,但它的黄金时代即将到来.

以圆桌骑士为例浅尝HTML5游戏开发

- never-online - 搜索研发部官方博客
随着XHTML的逐渐式微,Chrome,Safari,FireFox,Opera等现代浏览器正在积极完善HTML5实现,IE9也加入到标准的行列并将在今年上半年发布正式版,HTML5时代来临了. 在各种HTML5特性中,最吸引人的莫过于canvas标签,其提供的绘图API将颠覆以往web表现力匮乏的形象.

HTML5游戏开发的5条最佳实践

- - HTML5研究小组
HTML5很棒,因为它几乎无所不能——它并不是为某种特殊的应用设计的. 更重要的是,HTML5几乎是无处不在的. 它就在你的PC机上、你的手机上、你的平板设备上——它甚至可能就在你的厨房电器上. 正是由于HTML5具有丰富的功能并且无处不在,所以它给开发者带来了很多的灵感. 俗话说得好,“一旦开发者有了灵感,他们就开始编写游戏了.

HTML5游戏开发之将Easel.js和Box2d在画布中结合起来

- - Web App Trend
开发HTML5游戏 Luxahoy时遇到的比较大的困难之一是:如何将Easel.js和Box2d这两个框架结合起来. 在本指南中我们将介绍基本的actor对象,让大家学会如何将box2d中的尺寸转换成easel中的x、y坐标以及旋转参数. 要想学习本指南,你应该具备box2d和easel的基本知识,知道它们是如何工作的.

代码托管网站Github收购基于Web的页面设计工具Easel

- - 36氪 | 关注互联网创业
代码托管网站 Github已收购基于Web的页面设计工具 Easel. 作为一个已从YC顺利毕业的创业公司, Easel可以帮助不会代码和用户界面设计的创业者,快速把自己的创意制作成产品原型页面. 除此之外,Easel还支持多人同时在线编辑. 虽然与与强大的桌面设计软件相比功能并不完善,但 Easel 提供的工具却也能够帮用户设计出适合桌面、移动或平板浏览的基本站点.

基于浏览器的页面设计工具Easel帮你快速制作出产品原型页面

- - VooSee - 拮取生活中的彩虹
很多初入互联网的创业者脑子里可能有一大堆的创意,却苦于不会代码和用户界面设计,没有办法快速把这些想法快速呈现出来. 注意到你的这种痛点,推出基于浏览器的所见即所得Web设计工具,帮助你和你的团队快速制作出产品原型页面. Easel最重要的特点是速度和协作,它支持多人同时在线编辑. 虽然与强大的桌面设计软件相比功能并不完善,但Easel提供的工具却也能够帮用户设计出适合桌面、移动或平板浏览的基本站点.

游戏开发的51条军规

- 章明 - 互联网的那点事
Struan Robertson在gamesbrief中撰文讲述了他在游戏开发的51条经验:. 预留20%时间修改Bug以确保完美. 记住游戏发布的时间和期限把这件事放在心上,给自己一个开始修改的deadline. 怀着“我能弄出伟大的游戏”的心态开始每一个项目. 以在预定的时间和预算内完成项目为终极目标.

游戏开发者评微软Surface

- - CocoaChina移动观察
6月19日,微软揭开了携Surface进军平板市场的计划,这一全新平台将会把人体工程学设计的移动设备与笔记本功能性融合于一体. 据微软说,由Windows 8(以及Window RT)驱动的Surface将会为应用和游戏提供许多令人兴奋的机遇. 然而游戏开发者也是这样看的吗. 为此,我们在采访了业界的众多的开发者,而他们的第一印象显然是各不相同,不少开发者对这款设备的核心功能设定表示了担忧.