<bdo id="4g88a"><xmp id="4g88a">
    • <legend id="4g88a"><code id="4g88a"></code></legend>

    2D物理引擎 Box2D for javascript Games 第六章 關節和馬達

    2D物理引擎 Box2D for javascript Games 第六章 關節和馬達

    關節和馬達

    到現在你所見到的所有類型的剛體有著一些共同點：它們都是自由的并且在除碰撞的請款之外，彼此沒有依賴。

    有時你可能想要剛體之間進行約束。

    如果你試想一下粉碎城堡（Crush the Castle）這款游戲，投擲器是通過某種方法將一系列的剛體連接在一起而組成的。

    Box2D 允許我們通過關節（joint）來創建剛體之間的約束。

    關節允許我們創建復雜的對象并使我們的游戲更加真實。

    在本章，你將學習怎樣創建比較常見類型的關節，并且你將會發現一些別的事情，

    下面是本章的知識列表：

    • 通過鼠標關節拾取、拖拽以及拋擲
    • 通過距離關節保持剛體之間一個固定的距離
    • 使用旋轉關節使剛體旋轉
    • 使用發動機（motor）為你的游戲賦予生命

    在本章最后，你將有能力通過投擲器摧毀憤怒的小鳥的關卡。

    總之，關節也可以通過拾取和拖拽來實現剛體的交互。

    這是你要學習的第一種類型的關節。

    拾取并拖拽剛體——鼠標關節

    最難的事情最先做

    我們將從最難的關節之一開始

    雖然蛋疼，但是必須去做，因為這樣將使我們創建并測試別的關節變的容易（當你完成了很困難的事情后，轉而去做相對簡單些的事情時，這些事情將變得更加容易）

    一個鼠標關節允許玩家通過鼠標來移動剛體，我們將創建具有以下特性的鼠標關節：

    • 通過在剛體上點擊來拾取它
    • 只要按鈕按下，剛體將隨鼠標移動
    • 一旦按鈕被釋放，剛體也將被釋放

    開始的步驟與你通過本書已經掌握的腳本并無什么區別

    1. 在 main()方法中沒有什么新的東西，只是放置了兩個盒子形狀到舞臺上：

      大的 static 類型的地面和在其上面的很小的 dynamic 類型的盒子

      function main(){
   world = new b2World(gravity, sleep);
   debugDraw();

   // 地面
   var bodyDef  = new b2BodyDef();
   bodyDef.position.Set(320 / worldScale, 470 / worldScale);
   var polygonShape  = new b2PolygonShape();
   polygonShape.SetAsBox(320 / worldScale, 10 / worldScale);
   var fixtureDef  = new b2FixtureDef();
   fixtureDef.shape = polygonShape;
   var groundBody = world.CreateBody(bodyDef);
   groundBody.CreateFixture(fixtureDef);

   // 小盒子
   bodyDef.position.Set(320 / worldScale, 430 / worldScale);
   bodyDef.type = b2Body.b2_dynamicBody;
   polygonShape.SetAsBox(30 / worldScale, 30 / worldScale);
   fixtureDef.density = 1;
   fixtureDef.friction = 0.5;
   fixtureDef.restitution = 0.2;
   var box2 = world.CreateBody(bodyDef);
   box2.CreateFixture(fixtureDef);

   setInterval(updateWorld, 1000 / 60);
   
   document.querySelector('#canvas').addEventListener('mousedown', createJoint)
}

    2. 不要為在 mousedown 監聽中 createJoint() 回調方法而煩惱

      目前，我們沒有創建任何關節，所以我們只是通過當我們學習怎樣銷毀剛體時的相同的方式來查詢世界

      function createJoint(e){
   world.QueryPoint(queryCallback, mouseToWorld(e));
}

    3. 現在來看看 mouseToWorld() 方法，因為我們將要對鼠標的坐標進行很多的操作，我創建一個小方法將鼠標坐標轉變成b2Vec2對象的世界坐標。

      function mouseToWorld(e) {
   const mouseX = e.x;
   const mouseY = e.y;
   return new b2Vec2(mouseX/worldScale,mouseY/worldScale);
}

    4. queryCallback() 方法只是通過 GetType() 方法檢測剛體是否是 dynamic 類型的

      所以，很顯然你希望檢測的剛體是 dynamic 類型的，這樣你將可以拖拽這個剛體。

      在這一步，我們只是將一些文本從輸出窗口中輸出：

      function queryCallback(fixture)  {
   var touchedBody = fixture.GetBody();
   if (touchedBody.GetType() === b2Body.b2_dynamicBody) {
         console.log("will create joint here");
   }
   return false;
}

    5. 其它常規的 updateWorld、debugDraw 與之前章節中無異

      測試網頁:
      image

    6. 直到你點擊地面上的 dynamic 類型的盒子時，否則將不會有任何事情發生，這時將會立即在輸出窗口出現下面的文本

      will create joint here

      事實上此處就是我們要創建鼠標關節的地方

      源碼： article/ch06/ch06-1.html

    7. 關節（Joints）類在別的包中，我們將它導入進來命名為 :

      b2MouseJoint = Box2D.Dynamics.Joints.b2MouseJoint

    8. 然后我們還要聲明一個新的類變量，它將存儲我們的鼠標關節（mouse joint）

      let mouseJoint;

      在這里非常直觀，b2MouseJoint 類是我們用來處理鼠標關節的，所以我聲明一個該類型的變量，叫做 mouseJoint。

    9. 最后，讓我們來創建關節（Joint）。

      一旦我們得知玩家嘗試拾取一個 dynamic 類型的剛體，我們需要在 queryCallback() 方法中來實現關節的創建。

      function queryCallback(fixture, e)  {
   var touchedBody = fixture.GetBody();
   if (touchedBody.GetType() === b2Body.b2_dynamicBody) {
         var jointDef = new b2MouseJointDef();
         jointDef.bodyA = world.GetGroundBody();
         jointDef.bodyB = touchedBody;
         jointDef.target = mouseToWorld(e);
         jointDef.maxForce = 1000 * touchedBody.GetMass();
         mouseJoint = world.CreateJoint(jointDef);
         stage.addEventListener('mousemove', moveJoint);
         stage.addEventListener('mouseup', killJoint);
   }
   return false;
}

      這里有一些新的代碼，所以讓我們來一行行的解析它：

      var jointDef = new b2MouseJointDef();

      我們創建一個 b2MouseJoint 對象。

      在這里，創建關節與創建剛體沒有什么不同。

      無論哪種情況我們都要有一個與所有調整參數以及剛體或關節自身相關的定義。

      所以我們創建了關節的定義。

      現在，我們需要一些關節參數，例如：通過關節連接的剛體。

      jointDef.bodyA = world.GetGroundBody();
jointDef.bodyB = touchedBody;

      指定 bodyA 和 bodyB 屬性為通過關節連接起來的剛體。

      因為我們將一個剛體和鼠標連接在一起，所以 bodyA 將是地面剛體（ground body）。

      地面剛體（ground body）不是我們自己創建的用作地面的 static 類型的盒子剛體，它是不可見的，不可觸摸的剛體，它代表了 Box2D 世界。

      在現實世界中，地面剛體（ground body）就是圍繞著我們的空氣。

      它無處不在，但是我們卻看不見摸不著。

      另一面，bodyB 是我們剛要點擊的剛體，所以我們將說：“被點擊的剛體將要被定到世界中給定的點上”。

      那一個點？

      當然是鼠標指針坐標，這要歸功于 target 屬性帶來的便利，它允許我們指派 b2Vec2 對象的坐標

      然后就是 mouseToWorld() 方法出場的時候了：

      jointDef.target = mouseToWorld(e);

      現在，你可以在舞臺上拖拽你的鼠標，然后剛體將如你所期望的跟隨鼠標的指針。

      Box2D 將為你處理這些事情，可是你需要為關節指定作用力（force）。

      作用力越大，當你移動鼠標時剛體響應也將更加迅速。試想一下，在你的鼠標指針與剛體之間有一個橡皮帶連接著。

      彈性越大，移動越精確

      maxForce 屬性允許我們設置關節的最大作用力。

      我依據剛體的質量設置了一個很大的值：

      jointDef.maxForce=1000*touchedBody.GetMass();

      現在一切都決定好了，然后我們準備將在上面我們剛剛結束的定義基礎上創建關節。

      所以，讓我們通過 CreateJoint() 方法將關節添加到世界中：

      mouseJoint=world.CreateJoint(jointDef)

    10. 現在，我們完成了關節。

    總之，大家將期望在保持按下鼠標的左鍵按鈕后，只要移動鼠標，剛體也將移動，或者一旦釋放鼠標左鍵，剛體也將被釋放。

    所以，首先我們需要添加兩個監聽，來檢測當鼠標移動和鼠標左鍵被釋放時所發生的事件：

    stage.addEventListener('mousemove', moveJoint);
stage.addEventListener('mouseup', killJoint);

    注： stage 為 const stage = document.querySelector('#canvas'); 網頁上的 canvas

    1. 現在，回調方法 moveJoint() 將在鼠標使用時被調用，然后它只要更新關節的目標即可。

    在之前的部分通過 target 屬性設置的 b2MouseJointDef 對象的目標，你是否還記得呢？

    現在你可以直接通過 b2MouseJoint 自身的 SetTarget() 方法來更新目標。

    哪兒是新的目標的位置呢？新的鼠標位置：

    function moveJoint(e){
   mouseJoint.SetTarget(mouseToWorld(e));
}
    1. 當鼠標的左鍵被釋放，killJoint 方法將被調用，所以我們將通過 Destroy() 方法移除關節，這和我們銷毀剛體時使用的 DestroyBody() 一樣。

    此外，將關節的變量設置為 null，然后顯示的移除監聽：

    function killJoint(e){
   world.DestroyJoint(mouseJoint);
   mouseJoint = null;
   stage.removeEventListener('mousemove', moveJoint);
   stage.removeEventListener('mouseup', killJoint);
}

    現在你可以去拾取另一個剛體了。

    但是糟糕的是，世界中只有一個 dynamic 類型的剛體，但是我們將在幾秒鐘內添加很多東西。

    1. 測試網頁，拾取并拖拽 dynamic 類型的盒子。

    在調試繪圖中將以一條藍綠色的線來代表關節，并且箭頭代表了鼠標移動的方向

    ![image](https://img2023.cnblogs.com/blog/405426/202310/405426-20231027210409932-908314168.png)

    源碼： article/ch06/ch06-2.html

    現在，你能夠拖拽并拋擲剛體了，讓我們來創建一個新的盒子吧，然后學習另一種類型的關節。

    讓剛體之間保持給定的距離——距離關節

    距離關節可能是最容易理解和處理的關節。

    它只需要設置兩個對象的點之間的距離，然后，無論發生什么，它都將保持對象的點之間的距離為你所設置的數值。

    所以，我創建一個新的盒子并將它與之前已經存在于這個世界的盒子通過距離關節連接在一起。

    讓我們來對 main() 方法做一些小的改動吧：

    function main(){   
   world = new b2World(gravity, sleep);
   debugDraw();

   // 地面
   var bodyDef  = new b2BodyDef();
   bodyDef.position.Set(320 / worldScale, 470 / worldScale);
   var polygonShape  = new b2PolygonShape();
   polygonShape.SetAsBox(320 / worldScale, 10 / worldScale);
   var fixtureDef  = new b2FixtureDef();
   fixtureDef.shape = polygonShape;
   var groundBody = world.CreateBody(bodyDef);
   groundBody.CreateFixture(fixtureDef);

   // 小盒子
   bodyDef.position.Set(320 / worldScale, 430 / worldScale);
   bodyDef.type = b2Body.b2_dynamicBody;
   polygonShape.SetAsBox(30 / worldScale, 30 / worldScale);
   fixtureDef.density = 1;
   fixtureDef.friction = 0.5;
   fixtureDef.restitution = 0.2;
   var box2 = world.CreateBody(bodyDef);
   box2.CreateFixture(fixtureDef);

   bodyDef.position.Set(420/worldScale,430/worldScale);
   var box3 = world.CreateBody(bodyDef);
   box3.CreateFixture(fixtureDef);
   var dJoint = new b2DistanceJointDef();
   dJoint.bodyA = box2;
   dJoint.bodyB = box3;
   dJoint.localAnchorA = new b2Vec2(0,0);
   dJoint.localAnchorB = new b2Vec2(0,0);
   dJoint.length = 100 / worldScale;
   var distanceJoint = world.CreateJoint(dJoint);
   
   setInterval(updateWorld, 1000 / 60);
   
   stage.addEventListener('mousedown', createJoint)
}

    對于剛剛創建的 box3 剛體我們沒有什么需要注釋的，它只是我們創建的又一個盒子而已，但是我將要一行行的來說明一下創建的距離關節

    var dJoint = new b2DistanceJointDef();

    首先，你應該使用 Box2D 的方式來創建關節的定義，所以在這里使用 b2DistanceJointDef 來創建距離關節的定義。

    注意，請自己在程序開始處引入 b2DistanceJointDef = Box2D.Dynamics.Joints.b2DistanceJointDef

    和鼠標關節一樣，距離關節也有屬性需要定義，所以我們將再次看到 bodyA和 bodyB 屬性，這時為它們分配兩個 dynamic 類型的盒子

    dJoint.bodyA = box2;
dJoint.bodyB = box3;

    然后，我們需要定義關節綁定到兩個剛體上的點。

    localAnchorA 和 localAnchorB 屬性定義你要應用的距離關節綁定到剛體上的本地點。

    注意這些本地點，它們采用的坐標為剛體自身內的坐標（在本地點中，剛體中心位置坐標為（0,0）），與剛體相對世界的坐標位置無關

    dJoint.localAnchorA = new b2Vec2(0,0);
dJoint.localAnchorB = new b2Vec2(0,0);

    最后，來定義關節的長度，這是一個在 localAnchorA 和 localAnchorB 所定義的點之間不變的距離。

    這些盒子分別創建在（320,430）和（420,430）的位置，所以，這里的距離是 100 像素。

    我們不打算修改這個數值，所以 length 屬性將是

    dJoint.length=100/worldScale;

    現在，關節定義準備在世界中來創建關節，這些都要歸功于 b2DistanceJoint 對象——像往常一樣創建并添加關節到世界中：

    var distanceJoint = world.CreateJoint(dJoint);

    現在，你可以測試網頁，拾取并拖拽任何一個dynamic類型的剛體，但是，在剛體上起源點（0,0）之間距離不會改變，這要感謝距離關節。

    image

    源碼： article/ch06/ch06-3.html

    雖然你可以通過鼠標和距離關節做很多事情，但是這里還有另一種類型的關節，它是游戲設計中的萬金油（原文翻譯為：它是游戲設計中的救生圈）：旋轉關節

    使剛體繞一個點旋轉——旋轉關節

    旋轉關節將兩個剛體綁定到彼此的共有的錨點上，這樣剛體就只剩下一個自由度：繞著錨點旋轉。

    一個最常見使用旋轉關節的地方是創建輪子和齒輪。

    我們將在稍后搭建攻城機（一個投擲石塊的拋擲器）時，創建輪子。

    目前，我只想添加另一個盒子到我們的腳本中然后將它綁定到地面剛體（在鼠標關節的介紹中曾提到過，它就像真實世界的空氣）上，讓你看到怎樣與旋轉關節交互。

    我們只需要對 main() 方法做些許的改變, 在 var distanceJoint... 代碼后添加上：

    bodyDef.position.Set(320/worldScale,240/worldScale);
var box4 = world.CreateBody(bodyDef);
box4.CreateFixture(fixtureDef);
var rJoint = new b2RevoluteJointDef();
rJoint.bodyA = box4;
rJoint.bodyB = world.GetGroundBody();
rJoint.localAnchorA = new b2Vec2(0,0);
rJoint.localAnchorB = box4.GetWorldCenter();
var revoluteJoint = world.CreateJoint(rJoint);

    像往常一樣，對于創建的 box4 沒有什么好說的，不過我將一行行的來解釋關節的創建，它是從定義 b2RevoluteJointDef 開始的

    注: 在程序頂部記得引入 var b2RevoluteJointDef = Box2D.Dynamics.Joints.b2RevoluteJointDef

    var rJoint = new b2RevoluteJointDef();

    處理過程和之前的方式一樣，將我們最新創建的盒子和地面剛體分配給 bodyA 和 bodyB 屬性:

    rJoint.bodyA = box4;
rJoint.bodyB = world.GetGroundBody();

    現在，將本地錨點關聯到剛體上，它們分別是盒子的起源點（0,0）和該點在世界中的坐標。

    rJoint.localAnchorA = new b2Vec2(0,0);
rJoint.localAnchorB = box4.GetWorldCenter();

    那么現在，我們來創建旋轉關節自身：

    var revoluteJoint = world.CreateJoint(rJoint);

    測試網頁，然后與最新創建的盒子進行交互：

    嘗試拖拽它、將別的盒子放置到它的上面，做任何你想要做的事情。

    可是你沒有辦法移動它，因此它將只是繞著它的錨點旋轉。

    image

    源碼： article/ch06/ch06-4.html

    這里有很多 Box2d 支持的關節類型，但是列舉出它們并解釋所有的關節已超出本書的范圍。

    我想要你學習的是怎樣使 Box2D 來增強游戲，而鼠標、距離以及旋轉關節已經可以讓你實現幾乎所有的事情。

    你可以通過參考官方文檔來獲取完整的關節列表信息：http://box2d.org/manual.pdf

    所以，我沒有將那些沒有意義的 Box2D 關節一一列舉，我將向你展示一些確實關聯到游戲開發的東西：一個攻城機（粉碎城堡一款android的游戲中的攻城器械）。

    當憤怒的小鳥遇見粉碎城堡

    如果小鳥有一個攻城機會怎樣呢？讓我們來探索這個游戲的設置吧！

    但是，首先讓我來說明一下我想要只使用距離和旋轉關節來搭建的攻城機類型。

    攻城機是由兩個安裝了輪子的掛車組成。

    第一個手推車可以通過玩家控制并且它是作為卡車的車頭。

    第二個掛車只是一個掛車，但是在它的上面有一個投石器。

    是不是有點困惑？讓我想你展示一下它的原型吧：

    image

    這里有很多事情要做，所以我們立即開始吧。

    1. 開始的一步在本書中已經無數次寫過了，main 函數改造成：

      function main(){
   world = new b2World(gravity, sleep);
   debugDraw();

   ground();
   var frontCart = addCart(200,430);
   var rearCart = addCart(100,430);
   setInterval(updateWorld, 1000 / 60);
}

    2. 像往常我們創建一個新世界一樣，一個調試繪圖慣例，一個地面以及一個監聽添加（流程中的公有方法調用）

      這樣做是為了保證我們在這些流程中沒有遺漏，ground() 方法如往常一樣創建一個大的 static 類型的剛體作為地面，如下所示：

      function ground()  {
   var bodyDef = new b2BodyDef();
   bodyDef.position.Set(320/worldScale,470/worldScale);
   var polygonShape = new b2PolygonShape();
   polygonShape.SetAsBox(320/worldScale,10/worldScale);
   var fixtureDef = new b2FixtureDef();
   fixtureDef.shape = polygonShape;
   var groundBody = world.CreateBody(bodyDef);
   groundBody.CreateFixture(fixtureDef);
}

    3. 在 main() 方法中唯一不同的是 addCart() 方法，它只是用來添加一個盒子形狀并給與坐標，總的來說，這里也沒有什么新的東西：

      function addCart(pX, pY) {
   var bodyDef = new b2BodyDef();
   bodyDef.position.Set(pX / worldScale, pY / worldScale);
   var polygonShape = new b2PolygonShape();
   polygonShape.SetAsBox(40 / worldScale, 20 / worldScale);
   var fixtureDef = new b2FixtureDef();
   fixtureDef.shape = polygonShape;
   fixtureDef.density = 1;
   fixtureDef.restitution = 0.5;
   fixtureDef.friction = 0.5;
   var body = world.CreateBody(bodyDef);
   body.CreateFixture(fixtureDef);
   var frontWheel = addWheel(pX + 20, pY + 15);
   var rearWheel = addWheel(pX - 20, pY + 15);
   return body;
}

    4. 方法的最后，返回剛體之前，這里調用了兩次addWheel()方法，它將在給定的坐標創建一個球型。

      說到這里也就沒有什么新的東西可說了，但是你將看到我們的攻城機是個什么形狀了。

      function addWheel(pX, pY) {
   var bodyDef = new b2BodyDef();
   bodyDef.position.Set(pX / worldScale, pY / worldScale);
   var circleShape = new b2CircleShape(0.5);
   var fixtureDef = new b2FixtureDef();
   fixtureDef.shape = circleShape;
   fixtureDef.density = 1;
   fixtureDef.restitution = 0.5;
   fixtureDef.friction = 0.5;
   var body = world.CreateBody(bodyDef);
   body.CreateFixture(fixtureDef);
   return body;
}

    5. 在 debugDraw() 方法內確保有下面這一句，它將向我們呈現出關節:

      debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);

    6. 此刻，兩個static類型的掛車將被創建

      測試網頁然后檢查一切是否看起來正常：

      image

      源碼： article/ch06/ch06-5.html

      記住，當你在Box2D世界中創建新的東西時，請使用static類型的剛體來查看，在沒有重力、作用力以及碰撞的情況下，你的模型的樣子。

      現在，一切看起來都不錯，讓我們將剛體變為 dynamic 類型然后添加需要的關節。

    7. 通過在 addWheel() 方法和 addCart() 方法中添加 type 屬性將輪子和掛車設置為 dynamic 類型的剛體。

      addWheel() 方法內添加：

      bodyDef.type = b2Body.b2_dynamicBody;

    8. 然后，addCart() 方法也要做同樣的修改：

      function addCart(pX, pY) {
   var bodyDef = new b2BodyDef();
   bodyDef.type = b2Body.b2_dynamicBody;
   bodyDef.position.Set(pX / worldScale, pY / worldScale);
   var polygonShape = new b2PolygonShape();
   polygonShape.SetAsBox(40 / worldScale, 20 / worldScale);
   var fixtureDef = new b2FixtureDef();
   fixtureDef.shape = polygonShape;
   fixtureDef.density = 1;
   fixtureDef.restitution = 0.5;
   fixtureDef.friction = 0.5;
   var body = world.CreateBody(bodyDef);
   body.CreateFixture(fixtureDef);
   var frontWheel = addWheel(pX + 20, pY + 15);
   var rearWheel = addWheel(pX - 20, pY + 15);

   var rJoint = new b2RevoluteJointDef();
   rJoint.bodyA = body;
   rJoint.bodyB = frontWheel;
   rJoint.localAnchorA.Set(20 / worldScale, 15 / worldScale);
   rJoint.localAnchorB.Set(0, 0);
   var revoluteJoint = world.CreateJoint(rJoint);
   rJoint.bodyB = rearWheel;
   rJoint.localAnchorA.Set(-20 / worldScale, 15 / worldScale);
   revoluteJoint = world.CreateJoint(rJoint);
   return body;
}

      但是，在 addCart() 方法中添加的代碼并不止這些。

      如你所見，我添加了兩個旋轉關節分別將每個輪子的起源點（0,0）與掛車綁定在一起。

      不要擔心通過旋轉關節綁定在一起的剛體之間的碰撞。

    9. 最后，我們需要一個距離關節來管理兩個掛車之間的距離，將它們添加到 main() 方法中：

       function main() {
   world = new b2World(gravity, sleep);
   debugDraw();

   ground();
   var frontCart = addCart(200, 430);
   var rearCart = addCart(100, 430);

   var dJoint = new b2DistanceJointDef();
   dJoint.bodyA = frontCart;
   dJoint.bodyB = rearCart;
   dJoint.localAnchorA = new b2Vec2(0, 0);
   dJoint.localAnchorB = new b2Vec2(0, 0);
   dJoint.length = 100 / worldScale;
   var distanceJoint = world.CreateJoint(dJoint);

   setInterval(updateWorld, 1000 / 60);
}

    10. 目前，在這里沒有什么新的東西，但是你可以去開始構建你的攻城機。

    測試網頁：

    ![image](https://img2023.cnblogs.com/blog/405426/202310/405426-20231027210527856-406965285.png)

    源碼： article/ch06/ch06-6.html

    你的掛車現在有輪子并且他們通過一個距離關節連接在了一起。

    現在我們必須介紹一些新的東西，來讓玩家移動這個掛車

    通過馬達控制關節

    有些關節，例如旋轉關節有一個馬達的特性，在這種情況下，除非給定的最大扭矩超出范圍，不然在給定的速度下，可以使用它來旋轉關節。

    學習馬達將讓你可以去開發在網頁上看到的任何汽車/卡車游戲

    1. 創建卡車，我們需要在最右邊的掛車上應用一個馬達，所以在 addCart() 方法中，我們添加一個參數來告知我們創建的掛車是否需要一個馬達。

      改變 main() 方法，指定 frontCart 將要一個馬達，而 rearCart 不需要：

      var frontCart = addCart(200, 430, true);
var rearCart = addCart(100, 430, false);

    2. 因此，addCart() 方法的聲明也將要發生改變，但是這并不是什么新鮮事了。

      我希望你注意添加的判斷 motor為 true 的代碼：

      function addCart(pX, pY, motor) {
   var bodyDef = new b2BodyDef();
   bodyDef.type = b2Body.b2_dynamicBody;
   bodyDef.position.Set(pX / worldScale, pY / worldScale);
   var polygonShape = new b2PolygonShape();
   polygonShape.SetAsBox(40 / worldScale, 20 / worldScale);
   var fixtureDef = new b2FixtureDef();
   fixtureDef.shape = polygonShape;
   fixtureDef.density = 1;
   fixtureDef.restitution = 0.5;
   fixtureDef.friction = 0.5;
   var body = world.CreateBody(bodyDef);
   body.CreateFixture(fixtureDef);
   var frontWheel = addWheel(pX + 20, pY + 15);
   var rearWheel = addWheel(pX - 20, pY + 15);

   var rJoint = new b2RevoluteJointDef();
   rJoint.bodyA = body;
   rJoint.bodyB = frontWheel;
   rJoint.localAnchorA.Set(20 / worldScale, 15 / worldScale);
   rJoint.localAnchorB.Set(0, 0);

   if (motor) {
      rJoint.enableMotor = true;
      rJoint.maxMotorTorque = 1000;
      rJoint.motorSpeed = 5;
   }

   var revoluteJoint = world.CreateJoint(rJoint);
   rJoint.bodyB = rearWheel;
   rJoint.localAnchorA.Set(-20 / worldScale, 15 / worldScale);
   revoluteJoint = world.CreateJoint(rJoint);
   return body;
}

      讓我們來看看新的代碼：

      rJoint.enableMotor = true;

      b2RevoluteJointDef 的 enableMotor 是一個布爾值屬性。

      它的默認值是 false，但是設置它為 true 將允許我們添加為旋轉關節添加一個馬達。

      rJoint.maxMotorTorque = 1000;

      maxMotorTorque 屬性是馬達可以應用的最大扭力的定義。它的值越大，馬達越加的強勁。

      請注意該屬性不控制馬達的速度，但是最大扭力可以用來達到理想的轉速。它的計量單位是牛頓米或Nm。

      最后，motorSpeed 屬性設置期望的馬達速度，計量單位是弧度/秒：

      rJoint.motorSpeed = 5;

    3. 結尾，三行與馬達相關的代碼意味著：可以使用馬達和設置它的速度為5度/秒，使用最大扭矩為 1000 Nm

    4. 測試網頁，然后看著你的掛車向右運動：

      image

      源碼： article/ch06/ch06-7.html

    現在你可以使掛車移動了。但是怎樣通過一個鍵盤輸入來移動掛車呢？

    通過鍵盤控制馬達

    我們希望玩家通過方向鍵來控制掛車。

    左方向鍵將掛車向左移動而右方向鍵將掛車向右移動。

    1. 讓玩家通過鍵盤控制馬達，你需要一些新的類變量

      let left = false;
let right = false;
let frj;
let rrj;
let motorSpeed = 0;

      left 和 right是布爾值變量，它將讓我們知道左或右方向鍵是否被按下。

      frj 和 rrj 分別是前后的旋轉關節。

      你可能會對變量名產生困惑，但是我這樣做是為了便于代碼的布局而盡量使用較少的字母。

      （變量名分別是front/rear revolute joint的首字母縮寫）

      motorSpeed 是當前馬達的速度，初始值為 0

    2. 在 main()方法中，我們添加了當玩家按下或釋放按鍵時觸發的事件監聽：

      document.addEventListener("keydown", keyPressed)
document.addEventListener("keyup", keyReleased)

    3. 同時在下面的回調方法中。當玩家按下左或右方向鍵時，left 或 right將變成:

      function keyPressed(e) {
   switch (e.keyCode) {
         case 37:
            left = true;
            break;
         case 39:
            right = true;
            break;
   }
}

      通過相同的方式，當玩家按下左或右方向鍵時，left 或 right將變成 false：

      function keyReleased(e) {
   switch (e.keyCode) {
         case 37:
            left = false;
            break;
         case 39:
            right = false;
            break;
   }
}

    4. 在 addCart() 方法中有一些改變，但是這些大多是為了區別旋轉關節是否帶有馬達，它是通過鍵盤控制還是被動的旋轉關節。

      function addCart(pX, pY, motor) {
   var bodyDef = new b2BodyDef();
   bodyDef.type = b2Body.b2_dynamicBody;
   bodyDef.position.Set(pX / worldScale, pY / worldScale);
   var polygonShape = new b2PolygonShape();
   polygonShape.SetAsBox(40 / worldScale, 20 / worldScale);
   var fixtureDef = new b2FixtureDef();
   fixtureDef.shape = polygonShape;
   fixtureDef.density = 1;
   fixtureDef.restitution = 0.5;
   fixtureDef.friction = 0.5;
   var body = world.CreateBody(bodyDef);
   body.CreateFixture(fixtureDef);


   var frontWheel = addWheel(pX + 20, pY + 15);
   var rearWheel = addWheel(pX - 20, pY + 15);
   var rJoint = new b2RevoluteJointDef();
   rJoint.bodyA = body;
   rJoint.bodyB = frontWheel;
   rJoint.localAnchorA.Set(20 / worldScale, 15 / worldScale);
   rJoint.localAnchorB.Set(0, 0);

   if (motor) {
         rJoint.enableMotor = true;
         rJoint.maxMotorTorque = 1000;
         rJoint.motorSpeed = 0;
         frj = world.CreateJoint(rJoint);
   } else {
         var rj = world.CreateJoint(rJoint);
   }

   rJoint.bodyB = rearWheel;
   rJoint.localAnchorA.Set(-20 / worldScale, 15 / worldScale);

   if (motor) {
         rrj = world.CreateJoint(rJoint);
   } else {
         rj = world.CreateJoint(rJoint);
   }
   return body;
}

      主要的不同是用來創建旋轉關節的變量。

      前掛車需要馬達將使用 frj 和 rrj 類變量 來代表旋轉關節，而后掛車不需要馬達只要使用本地變量即可。

    5. 核心的腳本編寫在 updateWorld() 方法中

      它依據被按下的按鍵來調節 motorSpeed 變量(我通過每次乘以0.99來模擬慣性和摩擦力)，

      極限速度是 5 或 -5，然后更新旋轉關節的馬達速度。

      function updateWorld() {
   if (left) {
         motorSpeed -= 0.1;
   }
   if (right) {
         motorSpeed += 0.1;
   }
   motorSpeed * 0.99;
   if (motorSpeed > 5) {
         motorSpeed = 5;
   }
   if (motorSpeed < -5) {
         motorSpeed = -5;
   }
   frj.SetMotorSpeed(motorSpeed);
   rrj.SetMotorSpeed(motorSpeed);
   world.Step(1 / 30, 10, 10);// 更新世界模擬
   world.DrawDebugData(); // 顯示剛體debug輪廓
   world.ClearForces(); // 清除作用力
}

    6. SetMotorSpeed 方法將直接作用于旋轉關節(而不是它的定義)從而允許 我們及時更新馬達的速度。

    7. 測試網頁，你將可以通過左右方向鍵來控制掛車

      image

      源碼： article/ch06/ch06-8.html

    現在，我們有一個可以運行的掛車，但是不要忘記在這兒我們還沒有搭建支架，使用攻城機來摧毀小豬的藏匿處。

    讓一些剛體不要發生碰撞——碰撞過濾

    不要被標題唬住了：我們將搭建攻城機，但是這將沒有什么新的東西，而我希望你在每一步的學習中都能學習到新的知識，所以本節的主要目的是學習碰撞過濾。

    1. 首先要做，是讓我們來搭建攻城機。

      投擲器將通過距離關節被綁定到掛車上，這使我們能夠發射摧毀性的石塊，所以我們需要把它作為類變量：

      let sling;

    2. 在掛車上的攻城機的構造并不復雜，當 motor 為 false 時，這里的代碼量增加了不少，這是為了在不使用馬達的掛車上搭建攻城機。

      在上一節源碼 addCard 方法內增加:

      function addCart(pX, pY, motor) {
   var bodyDef = new b2BodyDef();
   bodyDef.type = b2Body.b2_dynamicBody;
   bodyDef.position.Set(pX / worldScale, pY / worldScale);
   var polygonShape = new b2PolygonShape();
   polygonShape.SetAsBox(40 / worldScale, 20 / worldScale);
   var fixtureDef = new b2FixtureDef();
   fixtureDef.shape = polygonShape;
   fixtureDef.density = 1;
   fixtureDef.restitution = 0.5;
   fixtureDef.friction = 0.5;
   var body = world.CreateBody(bodyDef);
   body.CreateFixture(fixtureDef);

   if (!motor) {
      // 垂直長臂
      var armOrigin = new b2Vec2(0, -60 / worldScale);
      var armW = 5 / worldScale
      var armH = 60 / worldScale
      polygonShape.SetAsOrientedBox(armW, armH, armOrigin);
      body.CreateFixture(fixtureDef);
      // 旋轉臂
      bodyDef.position.Set(pX / worldScale, (pY - 115) / worldScale);
      polygonShape.SetAsBox(40 / worldScale, 5 / worldScale);
      fixtureDef.shape = polygonShape;
      fixtureDef.filter.categoryBits = 0x0002;
      fixtureDef.filter.maskBits = 0x0002;
      var arm = world.CreateBody(bodyDef);
      arm.CreateFixture(fixtureDef);
      //旋轉關節
      var armJoint = new b2RevoluteJointDef();
      armJoint.bodyA = body;
      armJoint.bodyB = arm;
      armJoint.localAnchorA.Set(0, -115 / worldScale);
      armJoint.localAnchorB.Set(0, 0);
      armJoint.enableMotor = true;
      armJoint.maxMotorTorque = 1000;
      armJoint.motorSpeed = 6;
      var siege = world.CreateJoint(armJoint);
      // 拋擲物
      var projectileX = (pX - 80) / worldScale;
      var projectileY = (pY - 115) / worldScale;
      bodyDef.position.Set(projectileX, projectileY);
      polygonShape.SetAsBox(5 / worldScale, 5 / worldScale);
      fixtureDef.shape = polygonShape;
      fixtureDef.filter.categoryBits = 0x0004;
      fixtureDef.filter.maskBits = 0x0004;
      var projectile = world.CreateBody(bodyDef);
      projectile.CreateFixture(fixtureDef);
      // 距離關節
      var slingJoint = new b2DistanceJointDef();
      slingJoint.bodyA = arm;
      slingJoint.bodyB = projectile;
      slingJoint.localAnchorA.Set(-40 / worldScale, 0);
      slingJoint.localAnchorB.Set(0, 0);
      slingJoint.length = 40 / worldScale;
      sling = world.CreateJoint(slingJoint);
   }

   var frontWheel = addWheel(pX + 20, pY + 15);
   var rearWheel = addWheel(pX - 20, pY + 15);
   var rJoint = new b2RevoluteJointDef();
   rJoint.bodyA = body;
   rJoint.bodyB = frontWheel;
   rJoint.localAnchorA.Set(20 / worldScale, 15 / worldScale);
   rJoint.localAnchorB.Set(0, 0);

   if (motor) {
         rJoint.enableMotor = true;
         rJoint.maxMotorTorque = 1000;
         rJoint.motorSpeed = 0;
         frj = world.CreateJoint(rJoint);
   } else {
         var rj = world.CreateJoint(rJoint);
   }

   rJoint.bodyB = rearWheel;
   rJoint.localAnchorA.Set(-20 / worldScale, 15 / worldScale);

   if (motor) {
         rrj = world.CreateJoint(rJoint);
   } else {
         rj = world.CreateJoint(rJoint);
   }
   return body;
}

      讓我們一段一段的來分析這些代碼

      var armOrigin = new b2Vec2(0, -60 / worldScale);
var armW = 5 / worldScale
var armH = 60 / worldScale
polygonShape.SetAsOrientedBox(armW, armH, armOrigin);
body.CreateFixture(fixtureDef);

      上面的 5 行代碼在拋擲器和掛車之間創建了一個垂直的“長臂”。

      垂直支撐條是掛車的一部分，正如它的夾具被添加到相同的剛上。

      它是個復合對象。

      bodyDef.position.Set(pX / worldScale, (pY - 115) / worldScale);
polygonShape.SetAsBox(40 / worldScale, 5 / worldScale);
fixtureDef.shape = polygonShape;
fixtureDef.filter.categoryBits = 0x0002;
fixtureDef.filter.maskBits = 0x0002;
var arm = world.CreateBody(bodyDef);
arm.CreateFixture(fixtureDef);

      這是一個旋轉臂，投擲器的一部分。

      它是作為一個單獨剛體被創建的，因此它將通過旋轉關節綁定到掛車的垂直支撐條上。

      var armJoint = new b2RevoluteJointDef();
armJoint.bodyA = body;
armJoint.bodyB = arm;
armJoint.localAnchorA.Set(0, -115 / worldScale);
armJoint.localAnchorB.Set(0, 0);
armJoint.enableMotor = true;
armJoint.maxMotorTorque = 1000;
armJoint.motorSpeed = 6;
var siege = world.CreateJoint(armJoint);

      上面是旋轉關節。它有一個馬達來旋轉投擲器。

      var projectileX = (pX - 80) / worldScale;
var projectileY = (pY - 115) / worldScale;
bodyDef.position.Set(projectileX, projectileY);
polygonShape.SetAsBox(5 / worldScale, 5 / worldScale);
fixtureDef.shape = polygonShape;
fixtureDef.filter.categoryBits = 0x0004;
fixtureDef.filter.maskBits = 0x0004;
var projectile = world.CreateBody(bodyDef);
projectile.CreateFixture(fixtureDef);

      拋擲物——這個剛體通過攻城機發射，它在投擲器的頭部——將通過一個距離關節綁定到旋轉臂上。

      var slingJoint = new b2DistanceJointDef();
slingJoint.bodyA = arm;
slingJoint.bodyB = projectile;
slingJoint.localAnchorA.Set(-40 / worldScale, 0);
slingJoint.localAnchorB.Set(0, 0);
slingJoint.length = 40 / worldScale;
sling = world.CreateJoint(slingJoint);

      然后，我們通過距離關節將完成投擲器。

      一切看起來很容易，但是你還遺漏了下面的兩行在創建垂直支撐條時的代碼：

      fixtureDef.filter.categoryBits = 0x0002;
fixtureDef.filter.maskBits = 0x0002;

      下面的兩行代碼同樣也被遺漏在創建拋擲物時：

      fixtureDef.filter.categoryBits = 0x0004;
fixtureDef.filter.maskBits = 0x0004;

      你已經知道通過旋轉關節綁定在一起的剛體之間是不會發生碰撞。

      不幸的是，拋擲物不是旋轉關節的一部分，所以將會和垂直臂發生碰撞，所以拋擲器將無法工作，除非我們發現一種可以避免垂直臂和拋擲物之間發生碰撞的方法。

      Box2d 有一個特性是碰撞過濾，它允許你阻止夾具間的碰撞。

      碰撞過濾允許我們對夾具的 categoryBits 進行設置。

      通過這個方法，更多的夾具可以被放置在一個組中。

      然后，你需要為每個組指定它們將于那個組發生碰撞，通過設置 maskBits 屬性

      在我們剛剛看過的四行代碼中，掛車和拋擲物被放置在了不同的類別中

      它們被允許只能與同一類別的夾具發生碰撞，所以拋擲物和垂直臂之間將不會發生碰撞,這樣拋擲器將可以自由的旋轉了。

      這樣做，拋擲物也將不會和地面發生碰撞，但是我們將在稍后修復這個問題。

    3. 最后一件事，玩家將能夠通過釋放向上的方向鍵來銷毀距離關節從而發射拋擲物，所以我們在 keyPressed() 方法中的 switch 語句中添加另一個條件

      function keyReleased(e) {
   switch (e.keyCode) {
         case 37:
            left = false;
            break;
         case 39:
            right = false;
            break;
         case 38 :
            world.DestroyJoint(sling);
            break;
   }
}

      DestroyJoint 方法將從世界中移除一個關節

    4. 測試網頁，左右移動攻城機，然后通過上方向鍵發射拋擲物

      image

      源碼： article/ch06/ch06-9.html

    這是一個很大的成就。

    在 Box2D 中搭建一個攻城機并不容易，但是你做到了。那么我們開始消滅小豬吧！

    將它們放在一起

    是時候將我們知道的所有Box2D知識整合到一起了，來創建憤怒的小鳥和摧毀城堡的最終混合版吧！

    1. 首先，我們對 ground() 方法做一點修改 bodyDef.position 來讓它將地面放置在我們最近一次創建憤怒的小鳥模型時的地面位置相同的地方：

      function ground() {
   var bodyDef = new b2BodyDef();
   bodyDef.position.Set(320/worldScale, 465/worldScale);
   var polygonShape = new b2PolygonShape();
   polygonShape.SetAsBox(320 / worldScale, 10 / worldScale);
   var fixtureDef = new b2FixtureDef();
   fixtureDef.shape = polygonShape;
   var groundBody = world.CreateBody(bodyDef);
   groundBody.CreateFixture(fixtureDef);
}

    2. 然后，我們需要更新 main() 方法來加入自定義事件監聽、磚塊以及小豬

      function main() {
   world = new b2World(gravity, sleep);
   world.SetContactListener(new CustomContactListener());
   debugDraw();

   ground();

   brick(402,431,140,36);
   brick(544,431,140,36);
   brick(342,396,16,32);
   brick(604,396,16,32);

   brick(416,347,16,130);
   brick(532,347,16,130);
   brick(474,273,132,16);
   brick(474,257,32,16);

   brick(445,199,16,130);
   brick(503,199,16,130);
   brick(474,125,58,16);
   brick(474,100,32,32);
   brick(474,67,16,32);

   brick(474,404,64,16);
   brick(450,363,16,64);
   brick(498,363,16,64);
   brick(474,322,64,16);
   
   pig(474,232,16);
   
   var frontCart = addCart(200, 430, true);
   var rearCart = addCart(100, 430, false);
   var dJoint = new b2DistanceJointDef();
   dJoint.bodyA = frontCart;
   dJoint.bodyB = rearCart;
   dJoint.localAnchorA = new b2Vec2(0, 0);
   dJoint.localAnchorB = new b2Vec2(0, 0);
   dJoint.length = 100 / worldScale;
   var distanceJoint = world.CreateJoint(dJoint)


   document.addEventListener("keydown", keyPressed)
   document.addEventListener("keyup", keyReleased)

   setInterval(updateWorld, 1000 / 60);
}

    3. 很顯然，你需要像最近一次創建憤怒的小鳥模型時一樣，添加 brick() 和 pig() 方法，并且讓 CustomContactListener 類來處理碰撞。

      CustomContactListener 還記得吧，在第 5 章 Box2D 內建的碰撞監聽 一節我們自己創建的類

    4. 然后，我們對 addCart() 方法做一點修改

      通過使用自定義數據（userData屬性）為我們的掛車部分起一個名字，增加它們的重量——直到增加的重量通過拋擲物足夠摧毀小豬的城堡，然后我們也將移除過濾。

      function addCart(pX, pY, motor) {
   ... 代碼省略
   bodyDef.userData="cart";
   ... 代碼省略
   ... 代碼省略
   fixtureDef.density = 15;
   ... 代碼省略
   bodyDef.userData="projectile";

}

      為小車，和 拋擲物 添加 userData，將

    5. 因此，我們使用一個自定義接觸監聽，我們將使用 CustomContactListener 類來禁止攻城機和拋擲物之間的碰撞。

    6. 最后，updateWorld()方法必須也要改變，添加用來包含移除剛體的代碼。

      function updateWorld() {
   if (left) {
         motorSpeed -= 0.1;
   }
   if (right) {
         motorSpeed += 0.1;
   }
   motorSpeed * 0.99;
   if (motorSpeed > 5) {
         motorSpeed = 5;
   }
   if (motorSpeed < -5) {
         motorSpeed = -5;
   }
   frj.SetMotorSpeed(motorSpeed);
   rrj.SetMotorSpeed(motorSpeed);
   world.Step(1 / 30, 10, 10);// 更新世界模擬
   world.DrawDebugData(); // 顯示剛體debug輪廓
   world.ClearForces(); // 清除作用力
   // 移除剛體
   for (var b = world.GetBodyList(); b; b = b.GetNext()) {
         if (b.GetUserData() == "remove") {
            world.DestroyBody(b);
         }
   }
}

    7. 最后但并不意味著最少，有些關于碰撞的新知識需要學習。

      下面是我怎樣使用 PreSolve() 回調方法來決定如果掛車與拋擲物發生碰撞，將在接觸決算之前禁止碰撞發生，將這個方法添加到 CustomContactListener 類中

      PreSolve(contact, oldManifold)  {
      var fixtureA =contact.GetFixtureA();
      var fixtureB =contact.GetFixtureB();
      var dataA =fixtureA.GetBody().GetUserData();
      var dataB =fixtureB.GetBody().GetUserData();
      if (dataA=="cart" && dataB=="projectile") {
         contact.SetEnabled(false);
      }
      if (dataB=="cart" && dataA=="projectile") {
         contact.SetEnabled(false);
      }
}

      這里都是你已經學習過的處理碰撞的知識。

      我只是檢查發生碰撞的掛車和拋擲物，如果是，則通過 setEnabled() 方法禁止接觸發生。

    8. 測試網頁，然后如預期的，你將有一個攻城機摧毀小豬的城堡

      image

      源碼： article/ch06/ch06-10.html

    一切運行順利，我們對它完全滿意，不是嗎？

    告訴你個秘密，在某些情況下，你將會看到拋擲物似乎穿過了磚塊而沒有發生接觸。

    這個是 Box2D 的 bug 嗎？或者在接觸回調中有什么錯誤嗎？

    全都不是，它只是一個你還沒有發現的 Box2D 的特征，不過你將會很快接觸到它了。

    小結

    在本書最長也最難的一章中，你學習了怎樣使用鼠標、距離以及旋轉關節來使游戲設置更加的高級。

    為什么不去嘗試搭建一個投石機呢？

    本文相關代碼請在

    https://github.com/willian12345/Box2D-for-Javascript-Games

    注：轉載請注明出處博客園：王二狗Sheldon池中物 (willian12345@126.com)

    posted @ 2023-10-27 21:08  池中物王二狗  閱讀(318)  評論(0)  編輯  收藏  舉報
    轉載入注明博客園 王二狗Sheldon Email: willian12345@126.com https://github.com/willian12345
    免费视频精品一区二区_日韩一区二区三区精品_aaa在线观看免费完整版_世界一级真人片
    <bdo id="4g88a"><xmp id="4g88a">
    • <legend id="4g88a"><code id="4g88a"></code></legend>