NGUI系列教程二

摘要:
我们先看Input它主要包括三个物体,一个带有UIInput代码和BoxCollider的物体,一个Background和一个Label。参数解释如图示例:1.创建一个NGUI2DUI,在Panel节点下创建两个Input和一个Button,方法参考上述步骤。更改Input名称,第一个我们改为UserName,第二个我们改为Password,并勾选UIInput属性中的IsPassword,设置Password的SelectionOnTab物体为Button按钮。

接下来我们创建一个Label,NGUI->Open the Widget Wizard,打开widgetTool对话框,在Template中选择Label,确定AddTo右侧选项为panel,点击,Add To完成Label创建。

NGUI系列教程二第1张

1.Label属性窗口如图

NGUI系列教程二第2张

1.下面的节奏可能有点快,大家可以先熟悉一下上面讲的流程,再进行下面的学习。接下来我们依次创建Button和Input,因为这两个选项差不多,我们放一块讲,在WidgetTool窗口中,他们都需要选择一个Background,这里和选择Spirit一样。
我们先看Input

NGUI系列教程二第3张

它主要包括三个物体,一个带有UIInput代码和BoxCollider的物体,一个Background和一个Label。这里的Background就是刚才讲的Sprite,Label就是上节讲的label。这两个我们都熟悉了,我们主要看Input上面的UIInput属性

NGUI系列教程二第4张

Label:默认为空,也就是会自动识别子物体Label。
Max Chars最大字符数,默认为0,表示不限
Carat Char 激活状态下默认字符
Type 字符类型,在移动平台下,可以激活不同键盘
IsPassword 是否为密码,勾选显示为星号
AutoCorrect 自动纠正
UseLabelText At Start 使用Label的字符为输入字符开始,如果勾选,则以Carat Char字符为开始
Active Color 字符激活状态颜色
SelectOnTab,当Input激活状态下,按tab键要选择的物体,例如,填写完该Input后可能要点击按钮输入,这时候我们如果设置SelectOnTab 物体为要按的按钮,在按下Tab键后会自动选择该按钮。

Event Reciever事件接收物体,和下面的functionname 合并起来用,Event Reciever物体上对应的代码如果有和function name相同名称的函数,则当我们在Input激活下按回车键的时候会激发该方法。不知道这样解释能不能理解?

按钮:接下来我们看按钮,按钮结构和Input类似如图

NGUI系列教程二第5张

也是包括一个background和一个Label物体,这两个大家都熟悉了,不用讲了。
我们看Button,它上面包括一个用于接收碰撞信息的Box Collider ,一个UIbutton,一个用于缩放的UIButtonScale,一个用于偏移的UIButtonOffset,一个用于播放声音的UIButton Sound。我们可以发现,Button只能更改鼠标滑过和点击的颜色,而不能做出鼠标滑过很复杂的效果,如果我们想要鼠标滑过和点击显示不同的图片,我们该用什么呢?答案就是ImageButton,它比Button强大的地方在于它可以让我们分别选择鼠标滑过,按下时候显示的图片。给我们更多的灵活性。

参数解释如图

NGUI系列教程二第6张

示例:(结合Button和Input创建一个登陆界面)

1.创建一个NGUI 2D UI,在Panel节点下创建两个Input和一个Button,方法参考上述步骤。创建完成的效果如图

NGUI系列教程二第7张

2.调节Input大小,注意这里首先要调节Input节点下的Background大小,然后再根据Background大小调节根节点下的BoxCollider大小和位置。更改Input名称,第一个我们改为UserName,第二个我们改为Password,并勾选UIInput属性中的IsPassword,设置
Password的SelectionOnTab物体为Button按钮。
新建一个C#脚本Test.cs
添加以下函数
public UIInput username;
public UIInput password;
void OnSubmit()
{
Debug.Log("Login with UserName: " +username.text+"Password:" +password.text);
}

3.将脚本赋给Main Camera,然后设置Password的Event Receiver物体为MainCamera。
4.给Button添加Button Message脚本(该脚本可以调用Target物体上的名称和FunctionName一致的没有参数的函数):选择Button,点击Component->NGUI->Interaction->Button Message.设置Button Message的target为Main Camera,FunctionName为OnSubmit。
5.运行程序,在Username和Password中输入一些内容,然后回车,查看控制台输出内容,或者在输入password输入之后按下Tab键,然后回车查看效果。可以看到控制台输出了我们输入的用户名和密码。
声明:本文由(zqcyou)原创编译,转载请保留链接:NGUI系列教程二

免责声明:文章转载自《NGUI系列教程二》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇如何提升大容量文件上传性能也谈谈拖延癌下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

【自然语言处理篇】--Chatterbot聊天机器人

一、前述 ChatterBot是一个基于机器学习的聊天机器人引擎,构建在python上,主要特点是可以自可以从已有的对话中进行学(jiyi)习(pipei)。 二、具体 1、安装 是的,安装超级简单,用pip就可以啦 pip install chatterbot 2、流程 大家已经知道chatterbot的聊天逻辑和输入输出以及存储,是由各种adapter...

更改CMD默认的初始路径

一直用CMD开启本地服务,每一次都得切换路径,有点尴尬。记录一下,修改CMD默认路径   1.打开注册表编辑器(WIN+R打开运行。输入regedit,或者直接找到路径,双击打开C:Windows egedit.exe); 2.定位到“HKEY_CURRENT_USERSoftwareMicrosoftCommandProcessor”下; 3.新建...

用css画图标

css3的属性 transform(转换) 用途很广泛,功能也很强大,为了熟悉它的各种转换方式(平移 translate,旋转 rotate,扭曲 skew,放缩 scale),我做了一些平常常用的一些简单的图标。 这些图标很多是通过三角形来拼贴起来的,所以我们需要知道怎么样画三角形。 1. 我们要将该 div 的 width 和 height 都设置为...

JS实现日程安排 日程安排插件

    代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EmpWeekPlan.aspx.cs" Inherits="Aepri.InfoDev.DPP.Web.PlanManage.EmpWeekPlan" %> <!DOCTYPE html>...

jQueryEasyUI Messager基本使用

http://www.cnblogs.com/libingql/archive/2011/07/17/2109020.html 一、jQueryEasyUI下载地址 http://www.jeasyui.com/ 二、jQueryEasyUI Messager基本使用 1、$.messager.alert(title, msg, icon, fn) 1&...

五分钟彻底学会iptables防火墙--技术流ken

iptables简介 IPTABLES 是与最新的 3.5 版本 Linux内核集成的 IP 信息包过滤系统。如果 Linux 系统连接到因特网或 LAN、服务器或连接 LAN 和因特网的代理服务器, 则该系统有利于在 Linux 系统上更好地控制 IP 信息包过滤和防火墙配置。 iptables 组件是一种工具,也称为用户空间(userspace)...