cocos creator 3D | 拇指投籃 | 3D項目入門實戰

你的命中率是多少呢？文章底部試玩！

效果預覽

配置環境：

Cocos Creator 3D v1.0.1

玩法說明：

觸摸屏幕，向上滑動投籃！注意籃板是會移動的哦！看看你的命中率是多少！

實現原理

爲了能達到好的投籃效果，在網上找了一個投籃機參數，大體按照實際參數設置籃框大小，球的大小，以及籃框的位置。

碰撞器：

籃板直接使用 盒碰撞器組件（BoxColliderComponent），籃球使用的是 球碰撞器組件（SphereColliderComponent）。

由於沒有 圓環碰撞器組件，因此對於籃球框用了多個 球碰撞器組件 實現碰撞檢測。

小球軌跡：

因爲徹底採用了物理引擎計算，要讓小球軌跡如咱們所預期同樣，得遵循物理原理。這裏須要的知識是 位移與加速度、速度、時間的關係。

咱們能夠分爲三個方向來考慮，須要計算初始速度 V_z 和 V_y 。在 Z 軸方向能夠看做勻速運動，Y 軸方向爲勻加速運動。其中 Z 軸 和 Y 軸 的位移咱們已經設定好了，咱們只須要設定拋球時間 t 就能夠計算出初速度。注意 Y 軸的末速度要知足與初速度相反，才能達到圖中拋物線的效果哦。參考計算方式以下：

const CONST_H = 1.25;
const CONST_S = 2.3;
const CONST_G = -10;
const CONST_T = 0.8;
const CONST_V_Z = CONST_S / CONST_T;
const CONST_V_Y = CONST_H / CONST_T - CONST_G * CONST_T / 2;

初始速度 V_x 能夠根據觸摸開始的位置 x 和觸摸結束的位置 x 的差值乘以一個係數來獲取。

進球判斷：

我是在籃球框下方添加一個碰撞器檢測。再經過分組和掩碼控制碰撞器的開關。發射前，打開碰撞檢查，投進時，關閉碰撞檢測，讓球往下掉。

只要如下條件爲真就會進行碰撞檢測。

(GroupA & MaskB) && (GroupB & MaskA)

經測試發現，默認的 Mask 爲 -1 (即每一位都是1)，默認的 Group 爲 1 。 因此只要將 MaskB 設置爲 2 (即只有第二位爲1，其他爲0 ) ，經過控制 GroupA 第二位能夠控制碰撞器開關。參考代碼以下：

const PHY_GROUP = {
    Group1: 1 << 1
}

// 設置籃框碰撞器mask
this.colliderComponent_goal.setMask(PHY_GROUP.Group1)

// 打開碰撞，設置球的group
this.colliderComponent_basketball.addGroup(PHY_GROUP.Group1)

// 關閉碰撞，設置球的group
this.colliderComponent_basketball.removeGroup(PHY_GROUP.Group1)

小結

小球軌跡經過基本的物理知識分析得出初始速度！得分判斷採用的是碰撞器檢測，並控制其檢測開關讓球繼續運動。若是你有更好的方法或想法，歡迎留言分享交流！

以上爲白玉無冰使用 Cocos Creator 3D 開發"拇指投籃"項目的主要技術分享，歡迎關注【白玉無冰】公號。公號內回覆【拇指投籃】可獲取完整代碼。

---

本文使用圖片素材來自網絡！版權歸原做者全部，若有侵權還請聯繫！

在線試玩
源碼獲取