`
445822357
  • 浏览: 730997 次
文章分类
社区版块
存档分类
最新评论

NGUI基本组件学习(1)-->Label、Button、Input

 
阅读更多

很久没有更新博客了,最近在搞Unity的游戏开发,NGUI是Unity做UI界面比较火的插件,为了开发效率也学习学习。

NGUI-API 网址:http://tasharen.com/ngui/docs

网络游戏开发,少不了的就是登陆界面,那就来张效果图吧。


刚刚学习Unity,各种不熟悉看了两天别人的文章,大部分文章都是东拼西凑出来的,有些细节就没有讲到,或者说我不太熟悉吧。

下面说下制作登陆界面的步骤:

第一步:导入NGUI Next-Gen UI v3.0.6.unitypackage 插件包,自己可以在网上搜到,很多的


导入后的效果:菜单栏也会多出一个NGUI选项

步骤2:New Scene,删除Main Camara,创建UI界面Panel,如下图:


说明:点击Open the New UI Wizard

说明:为了UI界面与游戏别的组件区分,单独键一个NGUI的Layer出来

说明:点击AddLayer,然后添加一个NGUI层,然后在选择Layer下拉框时,就会出现红色框NGUI的Layer了

点击,效果图如下:


简单说下目录结构:

1.在2D的根对象上有个UIRoot脚本.这个脚本会重新调整游戏对象符合你的屏幕高度,有自动和手动选择高度.
2.Camera对象包含Camera和UICamera脚本.UICamera脚本包含NGUI的时间系统.
3.Anchor包含UIAnchor脚本.虽然这个脚本可以附加给控件,但在这里可以避免Windows机器上半个像素偏移的问题.
4.Panel对象有UIPanel脚本呢,UIPanel是一个容器,它将包含所有UI小部件,并负责将所包含的部件组合优化,以减少DrawCall.
注意:同样你可能还注意到目前自动帮你选中了Panel对象,也就是说下面添加的所有部件都将在作为它的子对象.

步骤3:组件Label、Input、Button

创建组件:



说明:

Atlas:选择纹理资源

Font:字体资源

Template:Label、Sprite、Texture、Button、Image Button、Toggle、ProgressBar、Slider、Input、PopupList、PopupList等

pivot:轴中心点位置

注意:最后Add To 添加对应的组件中。

1》创建Label:


说明:点击AddTo,就创建Label到Panel里面了,下面来设置其属性:


说明:

Transfrom:以此控制各轴显示位置、倾斜、缩放比例(行)

UILabel:控制内容属性,颜色,深度,占用组件大小等

具体属性大家都自己试下吧,现在我们就可以弄出一下的效果出来了。


2》创建Input:



说明:

Transform:同上

Box Collider:碰撞,也就是说点击事件和Input组件,发生碰撞会产生效应,否者我们点击Input对话框会点不中,也就不能输入东西了

UIInput:颜色、输入类型、键盘类型,校验,限制长度等

自己设置完属性后,就可以弄出下面的效果了。


3》创建Button和Login.cs 脚本



说明:将下面创建的Login脚本添加到Button上面,然后再按箭头指示,将脚本拖到On Click的Notify上,然后效果如下:


说明:选择点击按钮,就会效应Login对应的方法,我们选择Login.onClick

注意:Login脚本中访问权限为public的方法才会在上面的列表中,否者是不会有的。

----------------------

创建Login.cs 脚本:先在Assets目创建一个Scrpts文件夹


点击Create,选择C# Script,并且命令为Login


脚本如下:

using UnityEngine;
using System.Collections;

public class Login : MonoBehaviour {

	public UIInput username;
	public UIInput password;

	public void Awake(){
		//组件的获取

		//1.获取对应的对象名字
		GameObject uname = GameObject.Find("account_Input");
		//2.然后根据对象名字,获取其中对应的组件
		username = uname.GetComponent<UIInput>();

		password=GameObject.Find("password_Input").GetComponent<UIInput>();
	}

	public void Start(){

	}

	public void onClick(){
		Debug.Log ("Login with UserName=  "+username.value+",password="+password.value);
	}
}


最后的效果,就和前面一样了


点击button的时候,就会打印出你输入的account和password。


说明:其实这个demo是先弄好,然后再倒着来讲的。没有实际一步一步来进行,然后讲解。如果不是很清楚的话,可能先全文看一遍,然后在重上到下来,没有理解就再看后面的部分。


相关文章:

http://blog.csdn.net/kuloveyouwei/article/details/23740893

http://blog.1vr.cn/?p=604







分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics