NGUI基本控件制作

最新推荐文章于 2023-12-28 11:59:57 发布

爱不释手lc

最新推荐文章于 2023-12-28 11:59:57 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： unity Ngui

本文链接：https://blog.youkuaiyun.com/sinat_26368235/article/details/48650339

unity Ngui 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用NGUI制作UIButton和ScrollBar两种基本控件。首先，通过创建Sprite并设置Atlas来制作UIButton，包括添加Button脚本、Collider和事件监听。接着，详细阐述了ScrollBar的创建过程，涉及添加UIScrollBar组件、设置Background和Foreground以及调整大小和透明度。通过此教程，读者可以掌握NGUI界面元素的基本操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">NGUI 基本控件的制作。</span>

NGUI基本控件的制作。在NGUI的Prefab ToolBar中有预先制作好的按钮、复选框、列表框、滚动条、进度条和滑块控制条。下面是我接触NGUI并制作这些控件的一些过程记录。

UIButton：

uiButton按钮应该是最常用到的控件。

1、在菜单栏NGUI选项卡下点击Create->Sprite。创建完毕将会在Hierarchy面板中看到新创建的Sprite，在这里我将它重命名为Ngui_Button。选择Ngui_Button，在Inspector面板上会看见UISprite脚本组件。

2、在UISprite脚本组件中，选择Atlas按钮会弹出选择图集的面板，里面有制作好的图集供选择。选择Sprite按钮会弹出一个选择框，里面是当前选择的图集Atlas所包含的素材，在这里可以选择想要的sprite。

3、然后添加在NGUI选项下，Attach->Button Script。给Ngui_Button附着一个Button脚本。再给Ngui_Button附着一个碰撞器：

Attach->Collider。或者使用快捷键：SHIFT+ALT+C。注意这里需要设置一下Collider的Size。一般设置成和Button的UISprite的尺寸一致。

4、接下来要为按钮添加触发事件。SHIFT+ALT+N，在场景中新创建一个空的GameObject。编写脚本Ngui_Event。在当中添加如下的代码：

	int  count;
	public void button_Click()
	{
		count++;
		print("点击次数："+count);
	}

将Ngui_Event.cs拖到新创建的GameObject上。选择Ngui_Button，展开UIButton，将GameObject拖动至On Click下方的Notify框下，再点击Method框选择需要触发的方法，这里选择上面刚添加的方法：button_Click()。

5、接下来点击RUN运行，然后点击刚才创建出来的按钮，在Console控制台将会输出"点击次数："+count。

也可以在Ngui_Button下再创建一个脚本UILabel来显示按钮的名字，选择Ngui_Button，按下SHIFT+ALT+L来快捷创建UILabel。在Label中输入适合的文字，用作按钮的名称。

ScrollBar：

1、按上面的步骤创建一个UISprite，命名为Ngui_ScrollBar。在Ngui_ScrollBar下面创建一个子UISprite命名为block。

2、给Ngui_ScrollBar添加collider，添加UIButton，添加UIScrollBar三个组件。collider的尺寸设置和Ngui_ScrollBar的UISprite相同(可以自定义自己想要的尺寸，太小了影响触发交互)。将block的尺寸设置成同Ngui_ScrollBar的大小(根据实际需求和外观自定义)。

3、将Ngui_ScrollBar拖动到UIScrollBar下Appearance下的Background框中。将block拖动至Foreground框中。设置UIScrollBar下的Size调整block的大小，设置Value设置初始化的值。设置Alpha设置整体ScrollBar的透明度。

4、在Ngui_Event.cs中添加脚本：

	public void test_NguiScrollBar()
    {
        print("changeScrollBar:  " +  UIProgressBar.current.value);
    }

5、运行，拖动block，在Console中将会输出"changeScrollBar: "