NGUI研究院之3D模型坐标转2D屏幕坐标-血条（十一）

刚好今天有朋友问我，比较典型的例子就是游戏里面人物的血条。原理很简单就是把3D点换算成2D的点，但是由于NGUI自身是3D所以我们需要先把NGUI下的点转成2D点，然后在把他转成3D的点。听起来有点绕，不要紧我直接上代码。

目前我一直都是用NGUI来做人物血条，但是2D血条都会有个限制，就是它不能和模型有遮挡关系。不过血条可以根据人物的位置调节，比如远一点的人物血条会小一些，近一点的人物血条会大一些。

最好让美术做FBX的时候直接内置一个GameObject 的点，因为模型有的高有的低，所以血条的位置高度是不一样的，如果美术内置的话可以让美术来调节模型头顶上的点，这样比较方便。

using UnityEngine;

using System.Collections;

public class NewBehaviourScript : MonoBehaviour {

//角色

public Transform Cube;

//角色的血条

public Transform UI;

//默认血条缩与摄像机的距离

private float Fomat;

//角色头顶的点，最好让美术把这个点直接做在fbx模型里面。

private Transform Head;

void Start ()

{

//找到角色身上头顶的点

Head = Cube.Find("head");

//计算以下默认血条的距离，也可以写个常量，就是标记一下

Fomat = Vector3.Distance(Head.position,Camera.main.transform.position);

}

void Update ()

{

//这里可以判断一下如果位置没有变化就不要在赋值了

float newFomat = Fomat / Vector3.Distance(Head.position,Camera.main.transform.position);

UI.position = WorldToUI(Head.position);

//计算出血条的缩放比例

UI.localScale = Vector3.one * newFomat;

//测试代码，按下W S键前后移动角色

if(Input.GetKey(KeyCode.W))

Cube.Translate(Vector3.forward);

if(Input.GetKey(KeyCode.S))

Cube.Translate(Vector3.back);

}

//核心代码在这里把3D点换算成NGUI屏幕上的2D点。

public static Vector3 WorldToUI(Vector3 point)

{

Vector3 pt = Camera.main.WorldToScreenPoint(point);

//我发现有时候UICamera.currentCamera 有时候currentCamera会取错，取的时候注意一下啊。

Vector3 ff = UICamera.currentCamera.ScreenToWorldPoint(pt);

//UI的话Z轴等于0

ff.z = 0;

return ff;

}

再说一下，一般血条可能都是由多个UISprite组成，那么最好把这些Sprite都挂在同一个GameObject下面，这样只需要修正父对象，所以子对象的缩放都会正确。控制角色移动近一点的截图。

控制角色移动远一点的截图，你会发现血条在屏幕上的比例是不会变化的。

下载地址：http://vdisk.weibo.com/s/qDm4IY-bntUr

祝大家学习愉快，欢迎讨论，嘿嘿嘿嘿

本文固定链接: https://www.xuanyusong.com/archives/2644
转载请注明: 雨松MOMO 2014年05月21日于雨松MOMO程序研究院发表

最后编辑：2014-05-21

作者：雨松MOMO

专注移动互联网，Unity3D游戏开发

站内专栏 QQ交谈腾讯微博新浪微博

捐赠写博客不易，如果您想请我喝一杯星巴克的话？就进来看吧!

《NGUI研究院之3D模型坐标转2D屏幕坐标-血条（十一）》有 49 条评论

武强说：

2017 年 8 月 1 日下午 9:26

恩

回复
大西瓜说：

2016 年 8 月 6 日下午 10:44

你好，我上网查过一个方法制作血条，是用Slider控件做出来的，但是不知道是不是因为他的是5.2版本，他代码控制血条的value值，我的是5.1版本，无法声明Slider变量，请问这种情况该如何控制Slider的value值？

回复
- 雨松MOMO 说：
  
  2016 年 8 月 8 日上午 9:05
  
  自己写一个血条的silder组件吧
  
  回复
小布说：

2015 年 7 月 29 日下午 4:38

Debug.Log UICamera.currentCamera 输出为 null 什么情况0.0

回复
- 雨松MOMO 说：
  
  2015 年 7 月 29 日下午 5:01
  
  BUG 我以前也遇到过。不知道操作什么会这样。所以UICamera保存在自己的变量里。
  
  回复
风云寰宇说：

2015 年 7 月 7 日上午 10:30

当Cube走到镜头后面时，血条也会出现在镜头中，但这时候cube是明显不在镜头里的。因为对于镜头前后对称的两个点，投射到镜头的坐标是一样的，导致血条的坐标一样，怎么破？

回复
黎明静思说：

2015 年 5 月 19 日上午 11:59

当我旋转摄像机，血条貌似以中心点旋转，我想把点弄到左边旋转，怎么弄？

回复
- 雨松MOMO 说：
  
  2015 年 5 月 19 日下午 5:49
  
  血条是2D 正交摄像机啊。。
  
  回复
流浪的蛋酥卷说：

2015 年 4 月 20 日下午 1:41

我想问个问题，如果这个血条是敌人的血条话，敌人死亡这个血条消失该怎么办？还有敌人生成了，这个血条怎么出现？

回复
- 雨松MOMO 说：
  
  2015 年 4 月 20 日下午 10:48
  
  这个在逻辑里面判断一下就行了啊。
  
  回复
  - 流浪的蛋酥卷说：
    
    2015 年 4 月 21 日上午 8:53
    
    逻辑里判断？如果说这个敌人是一个预制物，然后死亡消失，敌人要重新生成，这个血条要怎么办？？而且场景里不会只有一个敌人吧
    
    回复
信师台说：

2015 年 4 月 11 日下午 2:03

为啥我用着不行呢。。求大大指教

回复
韩恩鹏说：

2015 年 2 月 13 日下午 2:17

万向锁

回复
- 小布说：
  
  2015 年 7 月 29 日下午 4:32
  
  四元数
  
  回复
Simon 说：

2015 年 1 月 9 日下午 5:49

为什么我把脚本放在cube上不行？只能放在Main Camera上？我有很多物体想要都显示他们的血条怎么办？

回复
封忆-NO_1 说：

2014 年 12 月 24 日下午 3:55

角色，和血条，都各有父物体吗？有父物体的话，计算出来的坐标会不会有影响

回复
- 雨松MOMO 说：
  
  2014 年 12 月 24 日下午 7:24
  
  不要紧，只要把gameobject选对就行。。
  
  回复
  - 封忆-NO_1 说：
    
    2014 年 12 月 26 日下午 3:44
    
    好的。谢啦
    
    回复
  - 封忆-NO_1 说：
    
    2014 年 12 月 26 日下午 3:46
    
    再问个问题，就是关于场景烘焙的，是不是只能让美工做好的场景，然后烘焙，之后程序再用这个场景，但是这样如果场景很多的话，是不是会使得包体很大？而如果我整个场景里的所有物体都是动态加载进来的，是不是就没办法烘焙
    
    回复
    - 雨松MOMO 说：
      
      2014 年 12 月 26 日下午 6:09
      
      只有标记static的才会参与烘培。如果你的场景比较小可以让美术烘培小一点的烘培贴图。。包大小都是一样的。
      
      回复
馍馍说：

2014 年 12 月 4 日下午 2:53

楼主你那个下载包不可用了

回复
相思雪说：

2014 年 11 月 14 日上午 10:53

亲，提一个不是技术上的，newFomat —> newFormat

回复
带鱼舒吉克居然竟然说：

2014 年 10 月 31 日下午 5:38

我刚学NGUI，看网上的教程都是删掉原来的MainCamera，只用NGUI的camera的。这个教程是要用MainCamera的吗

回复
偏不说啊说：

2014 年 10 月 14 日下午 11:53

松爷请问一下我这计算距离的方法跟你的是一样的其余我的略改了一些就不提了但是为什么血条的大小显示的不科学呢

回复
LeoLin 说：

2014 年 8 月 26 日下午 3:50

您好，我看了你这篇文章后在我的游戏项目中制作了英雄的血条，但是如果我的鼠标左右移动屏幕时，血条会跟着左右移动。这要怎么解决呀？

回复
- sss 说：
  
  2015 年 6 月 23 日下午 4:51
  
  hello, 你这个问题怎么解决的？我现在也遇到这样的情况了
  
  回复
急速小黄瓜说：

2014 年 8 月 26 日上午 9:21

你好MOMO老师，请问老师这篇文章的血条如何让所有的敌人公用呢？

回复
夜朦胧说：

2014 年 8 月 5 日下午 2:50

大神，问下哪里有你的NGUI的视频或者学习的书？我的邮箱：445932581@qq.com

回复
ss168235907 说：

2014 年 6 月 21 日下午 2:16

MOMO老师，我看了您这篇教材。我觉得蛮好的，这个NGUI的确用起来很方便。你的教程也很简单易懂。但是我遇到一个小问题， UICamera.currentCamera.ScreenToWorldPoint(pt);这段代码写上去后提示说UICamera不存在，这是怎么回事,刚开始学最好帮我解释一下这句话的意思，希望能得到老师您的指点，谢谢

回复
赵川说：

2014 年 6 月 16 日上午 1:22

雨大我这边遇到一个问题对象在移动到世界相机后面一定位置的时候血条会再出现，这个时候对象已经在相机后面去了，我想做个对象不再相机视野内就不执行血条位置同步的代码，但是又找不到判断是否在相机视野内的方法，要怎么弄这个问题啊

回复
小梁说：

2014 年 6 月 5 日上午 3:04

真的很崇拜你。

回复
shim 说：

2014 年 5 月 31 日上午 8:55

Camera.main.WorldToViewportPoint(point); 计算出来的屏幕2d坐标，有时候会偏到摄像机视野（fieldOfView ）外面去，请问有什么好的解决方法么？

回复
- 雨松MOMO 说：
  
  2014 年 5 月 31 日下午 1:23
  
  啊？不会呀。。。WorldToViewportPoint 就是转到屏幕内的呀。。
  
  回复
  - shim 说：
    
    2014 年 6 月 7 日下午 12:02
    
    WorldToViewportPoint 转了一会有些会偏到屏幕外，需要转动摄像机或者调大fieldOfView才能看得到。不知道怎么回事
    
    回复
阿斯蒂芬说：

2014 年 5 月 30 日上午 2:50

看着你的教程博客长大的。。。问个问题哈。。困扰很长时间了。。就是 transform.rotate(1,0,0); 这样只旋转物体X轴，旋转到270 和90度的时候，Y和Z轴就会突然变成180，但是，我不想让这两个值变，，这两个值跟别的物体绑着的，怎么办啊？

回复
cwwqq 说：

2014 年 5 月 28 日上午 3:13

又来问问题了～如果想实现在某区域内的模型才显示，区域外的隐藏用什么方法啊，不同的模型倒可以做，但是如果是一个模型的一部分有没有办法实现啊

回复
- 雨松MOMO 说：
  
  2014 年 5 月 29 日下午 4:17
  
  判断摄像机和模型之间的距离。。。。或者判断模型是否在某个区域内。。坐标判断。。
  
  回复
飞说：

2014 年 5 月 26 日上午 8:51

NGUI做血条居然不直接用Widget的anchors???

回复
just 说：

2014 年 5 月 24 日下午 1:40

MoMo老师，问你一下，你是用Mono还是用VS?另外，你这篇文章中贴的代码有注释，下载的工程中的代码没注释。你这是怎么做到的？是写了2份代码还是只写了一份有详细注释的代码，然后用一个工具可以把那些注释清除掉。我一直在寻求这样的工具，有时候自己写的一些工程，注释太多，已经影响我阅读代码了。

回复
k3498gg 说：

2014 年 5 月 23 日上午 7:45

雨松老师, NGUI上挂UIStretch脚本后,导致NGUI的UIDragpanel裁剪滑动会出问题,这个有什么方法解决吗? 请赐教/

回复
oPeNZzz 说：

2014 年 5 月 23 日上午 6:43

雨松老师，请教一下，做一个安卓端3D游戏，用的是Ngui做的UI。人物在场景中的行走依靠发射Ray来确定位置，但是要是点击画面按钮的话也会发射射线，导致人物会向按钮的方向行走。尝试了几个方法解决，但是在电脑上没事，手机上测试倒有问题了，请教有没有什么好的思路来解决这个问题？

回复
一线天说：

2014 年 5 月 23 日上午 4:59

Momo好帅，支持！顺便想问松哥一个问题，是在做sharesdk导入unity后出现的错误提示，不知道是什么问题了。问他们客服也没解决掉。提示如下Error building Player: CommandInvokationFailure: Unable to convert classes into dex format. See the Console for details.C:Program FilesJavajdk1.7.0_45binjava.exe -Xmx1024M -Dcom.android.sdkmanager.toolsdir=”D:/SDKForAndroid4.4/adt1/adt-bundle-windows-x86-20131030/sdktools” -Dfile.encoding=UTF8 -jar “D:/MySoft/Unity-4.3.0/Editor/Data/BuildTargetTools/AndroidPlayersdktools.jar” -这是他们那个u3dDemo，我只换了他们的demo.jar和AndroidManifest.xml文件就这样了

回复
- 一线天说：
  
  2014 年 5 月 27 日上午 1:46
  
  嗯，player setting对它没用，4个都试了。我的是android4.4，他们说版本太高了，可我换成了4.0，还是错误。。首先说发布官方demo是没问题的，说明环境配置是对的，唯一的原因就是我的jar出问题了，可那是根据官方demo导出的，版本目标我也是改成跟我API一样的了，UTF-8也改了，可问题还是存在。。导出jar没有任何异常。
  
  回复
抬头仰望星空丶说：

2014 年 5 月 22 日下午 2:40

一直在看大神的博客~ 学习了

回复
王小姐在1909 说：

2014 年 5 月 22 日上午 9:15

勤奋的孩子我终于能评论了

回复
呼呼笨猪猪说：

2014 年 5 月 21 日下午 2:18

厉害啊，momo大神，我今天正好做血条，3d的血条怎么看怎么不顺，明天把他转成2D

回复
- 雨松MOMO 说：
  
  2014 年 5 月 21 日下午 3:29
  
  嗯，用这个方法吧，很好用的。
  
  回复

NGUI研究院之3D模型坐标转2D屏幕坐标-血条（十一）

您可能还会对这些文章感兴趣！

《NGUI研究院之3D模型坐标转2D屏幕坐标-血条（十一）》有 49 条评论

给Simon的回复取消回复

您可能还会对这些文章感兴趣！

《NGUI研究院之3D模型坐标转2D屏幕坐标-血条（十一）》有 49 条评论

给Simon的回复 取消回复

给Simon的回复取消回复