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

要想学习本指南，你应该具备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
  
  
  
  
        thisthis.skin.rotation = this.body.GetAngle() * (180 / Math.PI);
  
  
  
  
        thisthis.skin.x = this.body.GetWorldCenter().x * SCALE;
  
  
  
  
        thisthis.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
  
  
  
  
     actors.update();

  
  
  
  
}
 
 
 
 

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

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

 
 
 
 

  
  
  
  
// before step
  
  
  
  
for(var i=0, l=bodiesToRemove.length; i
  
  
  
  
    removeActor(bodiesToRemove.GetUserData());  // get the actor object in the user data of the body and send to removeActor function

  
  
  
  
    bodiesToRemove.SetUserData(null);

  
  
  
  
    world.DestroyBody(bodiesToRemove);

  
  
  
  
}
  
  
  
  
// 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之后，可以实现更加强大的功能。我也希望在以后的指南中介绍更多这方面的知识。

观看示例 – 下载源代码