夏天到了，約上三五好友，騎上自行車，在灑滿陽光的海岸上飛馳，咔噠咔噠的鏈條聲，伴隨著空氣中薄荷的清香，這也許就是夏天的味道吧。

今天給大家分享如何用三行代碼創建一輛物理自行車。在分享之前，先來體驗一下最終效果 ，三、二、一，上鏈接：夏日單車🚴?♀?：https://ibear.net/summer-bike

物理引擎

首先，我們要實現的是一輛帶有物理表現效果的自行車，所以需要基于2D物理引擎來進行開發，目前主流Web2D物理引擎有P2.js、Matter.js、Box2D等，其中Box2D是最具代表性的一款2D物理引擎。

傳統的Web開發方式，使用Box2D開發較為繁瑣，比如我們要創建一個帶有重力的正方體

var?gravity?=?newb2Vec2(0,9.8);?//定義重力向量，x軸0?y軸向下，加速度是9.8.? var?world?=?newb2World(gravity,true);?//new?一個?名字叫?world?的世界變量 var?bodydef?=?newb2BodyDef();?//new?一個剛體對象? bodydef.type?=?b2Body.b2_dynamicBody;?//定義剛體對象為?動態對象.?會受到外力的作用. varfixDef?=?newb2FixtureDef();?//創建一個?b2FixtureDef?對象.? fixDef.density=1.0;?//?desity?密度，如果密度為0或者null，該物體則為一個靜止對象?fixDef.friction=0.9;?//摩擦力（0~1）? fixDef.restitution=1.0;?//?彈性（0~1） fixDef.shape?=?newb2CircleShape();?//?定義圓的半徑是?50px?window.PTM_RATIO?是米轉換像素的因子.? fixDef.shape.SetRadius(50?/?window.PTM_RATIO); ... 復制代碼

可以看到，傳統的web開發方式，僅僅是創建一個矩形，需要寫一堆的API，創建剛體、創建形狀 、創建材質、設置各種屬性，相當繁瑣。

所以我們選擇使用Cocos Creator游戲引擎來進行開發。Cocos Creator對Box2D進行了封裝，讓開發者可以以可視化操作的方式創建物理對象，無需編寫任何代碼。

游戲引擎

CocosCreator是一款十分容易上手的優秀國產游戲引擎，支持JS/TS，編輯器界面也十分簡潔：

image.png

使用CocosCreator創建一個具有物理屬性的對象，只需要在節點樹中創建一個普通對象，在對象的屬性檢查器中創建物理碰撞組件即可：

與物理相關的所有屬性配置，對象綁定，關節綁定等都可以通過可視化的方式進行配置。

開始造車

1. 結構拆解

接下來我們開始使用CococsCreator創建一輛自行車，先來看看自行車的結構：

image.png

2.創建車輪

把車輪圖片拖到場景樹中，添加CircleCollider圓形碰撞體：

3.創建車架

車架是一個不規則圖形，這里我們添加一個多邊形碰撞體，選擇編輯模式，手動調整多邊形形狀：

4.建立關節綁定

有了車架和兩個輪子，接下來我們要把輪子固定在車架上，并且可以自由旋轉，這就涉及到物理引擎中的一個重要組件：關節。

先來認識一下物理引擎中常用的幾個關節的定義和表現：

image.png

旋轉關節：圍繞一個固定點自由旋轉（無法產生位移），可開啟Motor屬性，模擬輪子驅動效果。

焊接關節：收到力的作用后，圍繞一個固定點旋轉（無法產生位移），當失去里的作用后恢復原狀，過程中的表現具有彈力效果。

距離關節：當剛體受力后受距離關節影響被拉回初始位置，并具有彈力效果。

棱柱關節：約束剛體運動的方向，通常可以跟距離關節組合使用。

繩子關節：與距離關節相似，不具有彈力屬性。

馬達關節：受力產生位移和旋轉后回到初始的位置與初始旋轉角度，并具有彈力屬性。

下面用一個DEMO來演示下每種關節的不同表現：

了解完不同關節的用法，接下來我們選擇用旋轉關節將輪子與車架進行連接：

由于旋轉關節是繞著一個固定的點旋轉，不具有彈力效果，所以騎上這臺車，落地的時候可能有點蛋疼。我們可以借助一個中間看不見的空節點“零件”，來模擬一個避震的效果：

實現原理：將中間零件B與車架交接處建立一個距離關節（DistanceJoint），將距離設置為0，彈力（Frenquency）設置成一個合適的彈力值，B跟C就產生了彈力連接的效果，再加上一個棱柱關節（PrismaticJoint），限制距離關節運動的方向僅在Y軸方向運動，最后車輪A跟零件B建立一個自由旋轉關節（RevoluteJoint），讓輪胎掛在零件B上進行旋轉，這樣我們就完成一個山地車的車輪避震效果。

按照相同原理將前輪、后輪與車架完成關節綁定后，我們來看看效果：

有了前后懸掛，小車車一下就DUANG起來了，騎上它腰也不酸，🥚也不疼了。

最后，添加腳踏板，與車架建立一個旋轉關節，自行車就完成了：

5.創建騎手

首先我們要找到人體的根骨骼，也是人體質量占比最高的身體部位-上半身與盆骨，將其與車架進行連接，四肢與頭部再與身體部位建立關節綁定：

11.gif

我們希望在自行車發生碰撞時，身體能隨車輛自然著晃動搖擺，所以我們要選擇一個具備彈力屬性的關節進行連接，距離關節（DistanceJoint）、焊接關節（WeldJoint）、摩托關節（MotorJoint）都具備彈力屬性，三種關節綁定方式都有不同的表現，這里我使用了焊接關節。

在身體節點上加上WeldJoint組件，拖動車架節點到ConnectedBody中完成綁定，設置關節的松緊與阻尼大小，將身體節點的關節錨點拖動到身體外部，與車架錨點重合，完成關節綁定：

12.gif

由于我們需要給上肢和下肢足夠的活動空間，所以身體擺動和位移的幅度不宜過大，如果使用距離或摩托關節，受到較大撞擊時產生的位移可能導致四肢斷裂或者擠壓過度的情況，經過測試這里使用WeldJoint效果最佳。

6.創建四肢

在創建各個身體部位時，有一個細節需要注意：每個身體部位的質量大小應該符合正常人體部位質量比例，最終創建的布娃娃物理表現會更接近真實效果：

image.png

接下來我們用自由旋轉關節給四肢創建關節綁定，用焊接關節給頭部創建關節綁定：

13.gif

將前臂末端與車把手建立旋轉關節綁定：

14.gif

7.腳踏齒輪驅動

按照符合現實規律的常規思路，我們如果想通過對雙腳施加外力來驅動腳踏齒輪旋轉，實現方案可能比較復雜，這里我們進行一波反向操作：將兩根小腿的末端與齒輪兩端連接，通過齒輪旋轉來反向驅動雙腳運動，也就是動力學中的一個重要方法：反向動力學（IK - Inverse kinematics）

反向動力學（Inverse kinematics）是一種通過先確定子骨骼的位置，然后反求推導出其所在骨骼鏈上n級父骨骼位置，從而確定整條骨骼鏈的方法。

完成綁定后，我們看看最終效果：

至此我們就完成了一輛Q彈自行車的全部創建工作。

不對？說好的三行代碼造一輛自行車？怎么一行代碼都沒有？上代碼：

Game.js onLoad?()?{//?在入口函數中開啟物理模擬，默認是關閉的，并設置重力方向與大小。let?physicsManager?=?cc.director.getPhysicsManager();physicsManager.enabled?=?true;physicsManager.gravity?=?cc.v2(0,?-640); } 復制代碼

最后

在開始嘗試讓自行車跑起來后發現了一些問題：由于人體重心與車輛結構重心均靠后，導致自行車在行駛過程或在空中姿態中容易失去平衡向后翻倒，所以我在車架上加入一個質量遠大于車身質量的隱形無重力擺錘（類似大樓振蕩器原理），來抵消減小車輛失去平衡產生的扭力，同時施加不同方向的恒力，動態調整車身姿態。

寫一個物理游戲，跟寫好一個物理游戲，差異往往都在細節當中，對于不同物理組件的靈活運用，每個物理參數配置的細微差異，都影響著整體游戲的表現與體驗。

最后，騎上它去海邊兜風吧！HAVE FUN！

體驗連接：：夏日單車🚴?♀?：https://ibear.net/summer-bike

關于本文

來自：Guowc

https://juejin.cn/post/7105973605451694087

往期干貨：26個經典微信小程序+35套微信小程序源碼+微信小程序合集源碼下載（免費）?干貨~~~2021最新前端學習視頻~~速度領取前端書籍-前端290本高清pdf電子書打包下載 點贊和在看就是最大的支持??

總結

以上是生活随笔為你收集整理的三行代码做一辆Q弹物理自行车，骑上它去海边兜风吧！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。