cocos creator3.3.2,实现血条跟随,一开始使用的camera的converToUINode,也是按照麒麟子大师的博客操作,结果最终的效果,在屏幕中间,血条显示正常,在屏幕边缘就开始出现偏差,x和y都有的偏差
最终也没有解决方案,后来麒麟子大师说,这个convertToUINode其实可以不用,不确定好不好用,最好使用worldToScreen,最终使用了这个,太好用了,血条显示正常
完整代码
@ccclass('PlayerCtrl')
export class PlayerCtrl extends Component {
@property(CameraComponent)
cam: CameraComponent = null!;// 照射角色的相机
@property(RenderTexture)
render: RenderTexture = null!; // 渲染投射图
@property(Sprite)
show3d: Sprite = null!; // 显示投射的ui
@property([Node])
player3dHps: Node[] = []; // 所有角色3d血条位置
@property([Node])
uiHps: Node[] = []; // 所有血条ui
start() {
// 投影 吧3d照射的投影到2d ui上
const renderTex = this.render;
this.cam.targetTexture = renderTex;
this.show3d.spriteFrame.texture = renderTex;
}
lateUpdate() {
// 使用 worldToScreen 实现血条跟随
this.player3dHps.forEach((item, i) => {
// 血条
let ve1 = new Vec3(0, 0, 0)
this.cam.worldToScreen(item.worldPosition, ve1);
let design = view.getDesignResolutionSize();
// 这里就是计算一下 浏览器端屏幕是横屏的,实际我们canvas区域是中间手机屏,而且血条还不能加widget固定死,所有在pc端
// 转出来的坐标是实际屏幕算的,不是中间手机位置的,我们要计算到中间手机位置的区域,计算出的位置+屏幕左侧到手机屏的左侧的距离,就是中间手机的显示区域
// 这里计算offsetHeight,是因为手机端是适配宽度,不同机型的实际高度不一,可能血条高于正常值或者低于,所以在这里要-(根据设计分辨率求出的高度-实际屏幕的高度)/2
// 对于offsetHeight不理解,可以尝试在手机浏览器运行一下就明白了,和pc显示的差别
let canvasWidget = find("Canvas").getComponent(Widget)
let offsetHeight = !sys.isMobile?0: ((view.getVisibleSize().width*design.height/design.width)-view.getVisibleSize().height);// 计算出高度比实际分辨率的差距,
this.uiHps[i].worldPosition = ve1.add(new Vec3(canvasWidget.left,-offsetHeight/2,0));;
})
// // 使用convertToUINode 实现血条跟随
// this.player3dHps.forEach((item, i) => {
// // 血条
// let ve1 = new Vec3(0, 0, 0)
// this.cam.convertToUINode(new Vec3(item.worldPosition), this.uiHps[i].parent, ve1);
// this.uiHps[i].setPosition(ve1)
// })
}
// update (deltaTime: number) {
// // [4]
// }
}
项目地址 GitHub - SuiFengErQu/cocos-creator3d-mini_demo: cocos creator3.3.2练手小功能 adaptationScreen场景