NGUI--->制作血条UI

需求分析

本篇博文拟实现类似英雄联盟中英雄头上的血条，但由于图片资源有限，仅制作像

这样渣效果。该血条有前景图片（红色），背景图片（黑色）。注意：先利用NGUI把前景和背景图片资源创建到图集中，以方便使用。本博文仅制作血条UI.

具体实现

1. 在UI Root下创建一个Sprite并命名为HpBar，选择图集中的bg_经验条短

，具体设置如下图：


 


2. 在Scene窗口中选中HpBar，右键以创建血条前景sprite，并命名为Fg，选择Atlas中的前景图片

，设置相关参数后并得到我们拟创建的血条；具体步骤如下：





3. 为血条attach一个Box Collider,在attach一个Progress Bar Script（只有先添加了Box Collider后才可以attachProgress Bar Script），这里因为不需要交互，所以添加完Progress Bar Script后把Box Collider移除。具体步骤如下：





其中，UIScript中的value控制血量进度（多少）：



至此，血条UI制作完毕。。。。