本案例使用引擎Cocos Creator v2.1.4。代碼編輯工具VSCode或WebStorm。

一、 物理引擎的開啟與使用

1. 可視化編輯基礎(chǔ)場(chǎng)景

如上圖所示：

【1】新建單色精靈節(jié)點(diǎn)bg，添加適配組件Widget，設(shè)置距離上下左右分別為0，或者設(shè)置bg節(jié)點(diǎn)的大小跟Canvas分辨率一致。如下圖所示：

【2】新建單色精靈節(jié)點(diǎn)red，設(shè)置節(jié)點(diǎn)顏色為紅色，添加RigidBody，設(shè)置Type屬性值為Dynamic，表示此節(jié)點(diǎn)位置可變。添加PhysicsBoxCollider。

【3】新建ground單色渲染節(jié)點(diǎn)，設(shè)置顏色，設(shè)置適配，添加RigidBody組件，設(shè)置Type屬性值為Static，表示地面位置固定，添加PhysicsBoxCollider組件，如下：

2. 組件化開發(fā)（開啟物理引擎）

【1】創(chuàng)建一個(gè)組件類，要能夠被游戲引擎識(shí)別。新建enable_phy.js。

【2】實(shí)例化得到組件的實(shí)例，通過節(jié)點(diǎn)上的【添加組件】按鈕，或者在代碼中使用addComponent方法。如下圖所示，通過編輯器，給Canvas節(jié)點(diǎn)上添加用戶自定義腳本組件enable_phy，開啟物理引擎。

【3】在代碼中提供固定的入口（onLoad、start、update方法），供游戲引擎識(shí)別。如下圖所示：

運(yùn)行，紅色塊會(huì)往下掉，掉到ground地面停止。說明物理引擎開啟成功。

二、 繩子關(guān)節(jié)的使用

1. ?旋轉(zhuǎn)固定點(diǎn)

如上圖所示，新建單色渲染節(jié)點(diǎn)blue，添加Widget組件，使得藍(lán)色塊位于頂部。作為旋轉(zhuǎn)繩子的掛載點(diǎn)。同時(shí)，給blue節(jié)點(diǎn)添加RigidBody，設(shè)置其Type屬性為static，靜止的。添加PhysicsBoxCollider。

2. ?繩子的制作

如上圖所示，新建單色渲染節(jié)點(diǎn)，修改節(jié)點(diǎn)大小，設(shè)置節(jié)點(diǎn)顏色；添加RigidBody組件，設(shè)置Type屬性為Dynamic，可以運(yùn)動(dòng)；添加PhysicsBoxCollider；點(diǎn)擊【添加組件】按鈕，選擇【物理組件】-【Joint】-【Rope】，設(shè)置最大Max Length為5，將blue節(jié)點(diǎn)拖動(dòng)到Connected Body，表示繩子連接點(diǎn)為Blue節(jié)點(diǎn)，然后拖動(dòng)繩子上的圓圈，可以修改錨點(diǎn)。

復(fù)制wire節(jié)點(diǎn)，得到wire2節(jié)點(diǎn)，修改相關(guān)屬性如下即可，主要修改wire2連接的剛體為wire，連接上第一段繩子，調(diào)整連接的錨點(diǎn)如下圖。

同樣的道理，我們復(fù)制wire2得到wire3，修改wire3連接的剛體為wire2，調(diào)整連接錨點(diǎn)，復(fù)制wire3得到wire4，修改wire4連接的剛體為wire3，調(diào)整連接錨點(diǎn)。如此，一條具有四段的繩子已經(jīng)制作好了。如下圖：

修改地面和red塊的摩擦力為0，如下：

三、 運(yùn)行測(cè)試

繩子會(huì)在重力的作用下往下擺，紅色塊會(huì)在重力的作用下掉到地面，當(dāng)繩子撞到磚塊會(huì)將磚塊推向右方，且繩子會(huì)繼續(xù)來回?cái)[動(dòng)。如上圖所示。