unity3d制作RPG游戏系列（4）——UI界面

个人博客文章链接：http://www.huqj.top/article?id=161

游戏中除了3d场景以外，UI界面也是很重要的一部分，例如主角的头像、血条、背包、按钮等。

下面是myrpg中的简单UI界面，使用NGUI插件制作：

 

一、导入NGUI插件

NGUI是一个非官方的GUI插件，但是特别好用，所以一般大家都会选择NGUI来制作界面，导入方式很简单，下载NGUI 的unity包然后拖到项目中即可，因为NGUI包有版本要求，所以这里就不贴资源了，大家可以到网上下载。

倒入之后菜单栏会多一个NGUI的菜单：

 

二、使用NGUI制作血条示例

NGUI有一些预制的组件，例如进度条，这可以方便的实现血条显示功能，首先从 NGUI -> open -> prefeb toolbar 打开预制对象

然后选择一个进度条样式拖拽到Hierarchy中，这样就创建了一个进度条：

这里的hp bar就是血条，它由多个子物体组成，包括背景色、前景色等，可以在Inspector中设置调整进度条的颜色，大小、位置

 

然后注意到进度条中on个有一个UISlider组件，通过这个组件的value值就可以调整进度条的进度显示：

所以在代码中人物血量变化的地方（例如收到攻击、喝药水），重新设置进度条的进度从而实现血条的功能。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

//血条显示 private static UISlider _hPSlider;   void Start() {     _hPSlider = GameObject.FindGameObjectWithTag("hp").GetComponent<UISlider>(); }   /** * 给主角造成伤害 */ public static void GotAttack(int hurt) {    ......       tmp = Health - hurt;     Health = tmp > 0 ? tmp : 0;     //血条显示值变化     _hPSlider.value = (float) Health / MaxHealth; }

 

三、按钮制作示例

按钮制作的关键在于绑定点击事件，如果使用u3d自带的ui组件还挺麻烦的，但是NGUI就很简单了。

首先创建一个sprite组件，这个组件其实就可以理解为一个图片，然后选择图集里的一张图片绑定在sprite上，然后在父sprite目录下还可以创建子sprite，同样可以绑定一张图片，这样就可以实现按钮的背景和前景图片了。

这里我制作的是加血的按钮，所以还有一个数字label用来显示还剩多少血药，效果如下：