全民打槍！在3D模型上的2D血條如何實現(xiàn)？
大家好，我是「楊宗寶」，穿越來到了現(xiàn)代！很高興你能認識到我，因為我現(xiàn)在不喜歡舞槍弄棒，而癡迷于敲代碼，特別是游戲代碼！
作者：楊宗寶
排版：張曉衡
在大多數(shù) 3D 對戰(zhàn)或者打怪游戲中，角色身上的血量條會很直觀的顯示出生命值，傷害值等信息，讓游戲效果更加完美，先上兩張簡單的效果圖：
從上邊的圖片可以很清楚的看到，此功能主要分為兩部分：
3D角模型
2D血條UI
將這兩部分結(jié)合起來（說白了就是將 3D 角色坐標(biāo)轉(zhuǎn)化到 UI 界面上）就實現(xiàn)了這個功能
1. 首先將 3D 角色放到場景中去，可以簡單的讓其在場景中行走
2. 創(chuàng)建腳本 Monster.ts 將腳本掛載 3D 角色節(jié)點上
3. 在腳本的start生命周期中動態(tài)創(chuàng)建血條（提前將血條做成一個預(yù)制體）
initLifeBarUi():?void?{this.lifeBarNode = PoolController.getDictPool(PoolRes.MONSTER_LIFE_BAR_KEY);let monsterLifePanel: Node = find("monsterLifePanel", GameEntity.mGameUI);monsterLifePanel.addChild(this.lifeBarNode);this.lifeBarNode.getComponent(MonsterLifeBar).initLife(this.mLife);this.lifeBarNode.active = false;}
考慮到了性能，我將血條預(yù)制體放在了對象池中，PoolController是自己封裝的一個對象池類，通過鍵值去從對象池中拿。將創(chuàng)建的血條添加到界面上，（在這里本人對血條創(chuàng)建了一個單獨的腳本進行血條屬性的控制刷新MonsterLifeBar）
4. 實時去刷新進度條的位置
refreshLifeBarUi():?void?{if (!this.lifeBarNode) return;let _v3_0: Vec3 = new Vec3(0, 0, 0);this.lifeBarParentNode.getWorldPosition(_v3_0);GameEntity.mCamera.getComponent(CameraComponent).convertToUINode(_v3_0, this.lifeBarNode.parent, _v3_0);this.lifeBarNode.setPosition(_v3_0);let distance: any = Math.sqrt(Math.pow(this.node.position.x, 2) + Math.pow(this.node.position.z, 2));this.lifeBarNode.getComponent(MonsterLifeBar).refresh(distance)}
主要代碼就是下面三行，將 3D 坐標(biāo)轉(zhuǎn)換到 2D 下：
let _v3_0: Vec3 = new Vec3(0, 0, 0);this.lifeBarParentNode.getWorldPosition(_v3_0);GameEntity.mCamera.getComponent(CameraComponent).convertToUINode(_v3_0, this.lifeBarNode.parent, _v3_0);
this.lifeBarParentNode—這個節(jié)點是?3D 角色節(jié)點下創(chuàng)建的一個用來與血條對應(yīng)的空節(jié)點，位置是在默認角色頭部偏高一點的位置，為了防止血條和模型重疊。GameEntity.mCamera—攝像機節(jié)點。
大家也可以直接使用this.node.getWorldPosition(_v3_0)，然后再this.lifeBarNode.setPosition(_v3_0)設(shè)置血條坐標(biāo)的時候，對y軸的坐標(biāo)適當(dāng)?shù)南蛏险{(diào)整來避免模型個血條重疊。
let distance: any = Math.sqrt(Math.pow(this.node.position.x, 2) + Math.pow(this.node.position.z, 2));this.lifeBarNode.getComponent(MonsterLifeBar).refresh(distance)
這兩句代碼大家可以忽略，主要是根據(jù)角色離攝像機的位置對血條的大小進行縮放，實現(xiàn)近大遠小的效果
希望對大家了解 Cocos Creator3D 有所幫助，同時在此推薦幾個私人小游戲二維碼，歡迎大家光顧：
其中的《躲一躲》與《機智三角》已經(jīng)上架張哥微店（閱讀原文）：
https://weidian.com/item.html?itemID=3766874060
https://weidian.com/item.html?itemID=3755120093
后面我將會分享更多 Cocos Creator 3D 相關(guān)項目經(jīng)驗，感謝大家多多支持！