很久没有更新博客了,最近在搞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
分享到:
相关推荐
NGUI-Next-Gen-UI-v3.6.8
NGUI-Unity(2020-2021)亲测可用
最新版本的NGUI插件NGUI Next-Gen UI
Unity3D使用NGUI上的UITexture使用界面高光特效以及特效控制C#代码
Unity3D NGUI插件,适应于U3D 5.4版本
NGUI is a powerful UI system and event notification framework for Unity (both Pro and Free) written in C# that closely follows the KISS principle. It features clean code and simple, minimalistic ...
在Unity中对于NGUI的设计文档有助于你设计NGUI
NGUI Next-Gen UI v3.6.8插件用于unity3d的开发
- NEW: Added UICamera.first referencing the active NGUI event system. - FIX: Alpha should now work as expected with Linear lighting. - FIX: UICamera.isOverUI should now work properly for all types of ...
- NEW: NGUI now has new written documentation. - NEW: NGUI now has an abundance of context-sensitive help. Just right click on an NGUI component and choose the Help option. - NEW: NGUI now has robust ...
最新版本的NGUI插件NGUI Next-Gen UI
NGUI Next-Gen UI v2.6.1e.zip
NGUI最新版本 NGUI: Next-Gen UI v3.0.7 f1 (Dec 09,2013) https://www.assetstore.unity3d.com/#/content/2413 加入NGUI最新的布局系统--- NGUI LayOut System Requires Unity 3.5.7 or higher. NGUI is a very ...
NGUI是严格遵循KISS原则并用C#编写的Unity(适用于专业版和免费版)插件,提供强大的UI系统和事件通知框架。其代码简洁,多数类少于 200行代码。这意味着程序员可以很容易地扩展NGUI的功能或调节已有功能。对所有...
关于Unity3D插件NGUI的宝贵资料。
NGUI 是专门针对 Unity 引擎、用 C#语言编写的一套插件,它已经成为了目前世界上应用最广、最成熟的 Unity 制作 UI 的插件,完美地弥补了 Unity 引擎原生 GUI 系统和 NewGUI 系统的各种不足。程序员可以利用它提供的...
NGUI Next-Gen UI是一款功能强大、灵活性高的UI插件,是当前最新版本的NGUI插件。它可以覆盖Unity的多个版本,包括Unity 5、Unity 2017和Unity 2018等。与其他UI插件相比,NGUI Next-Gen UI具有高效的性能和优秀的...
unity3d下得ngui最新版,测试好使。付费购买来的,现在共享出来仅供给大家学习
第 1 章 初识NGUI 1.1 游戏UI开发介绍 1.2 什么是NGUI 第 2 章 NGUI基础 2.1 导入NGUI插件 2.2 认识基本的UI资源 2.3 制作第一个UI图集 2.4 制作第一个UI字体 2.5 创建第一个UI 2.6 2DUI和3DUI的工作原理 ...
NGUI Next-Gen UI v3.5.7 12m 和 17m 2个插件