HTML5游戏开发之将Easel.js和Box2d在画布中结合起来
开发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个让人难以接受的事实 |
无觅 |