首先制作背景图片,在ngui中插入一个texture,把选好的背景图片放入texture中,在texture组件上添加一个uistretch脚本(自适应屏幕大小),把其属性中的style调成both,如图所示
。
如果感觉画面失真了,点击你Unity的图片,把其属性中的texture type调成advanced,然后把generate mip map选项后面的勾去了就好了,文章出处【狗刨学习网】。
然后用ngui自带的组件,拖上去两个input(输入框)组件,再拖进去两个label组件,最后再拖入两个button组件,可以根据自己的喜欢,再加一个label当做游戏的标题,把所有添加的组件放入panel中,这样比较好操作,效果如图所示
下面把注册时的界面搭建好,原理都是一样了,最后的效果如图
下面要写代码来控制所有要触发的事件了,在我们uiroot中的摄像机上创建一gameSence,然后我先口述一下大概流程,随后就贴上代码(其实很简单的几句)
在登录界面上需要有交互功能的就两个按钮,一个注册一个进入游戏,进入游戏先不管,因为这个涉及到与服务器连接的一些知识,本人小白,还没涉及到,等涉及到的时候一定会跟大家分享一下,言归正传,还一个按钮就是注册,当点击注册的时候,就会弹到注册的界面中,也就是把当前的登录界面隐藏掉,显示出咱们得注册界面,在咱们得注册界面中,涉及到交互的按钮也是两个,一个提交,一个返回,提交按钮涉及到用户填写的账号要提交的数据库中,并且提交成功后要返回登录界面,咱们只做返回登录界面的这个功能。
其实跟登录界面跳转到注册界面是一个概念,还有一个返回按钮,也是跳转到登录页面。因为以后肯定要跟服务器有一个交互的过程,所以在用户点击进入游戏按钮也好,还是注册页面中的提交按钮也好,在与服务器通讯的过程中,要防止用户再次操作,所以要另见一个panel,里面放入一个sprite和一个label,把sprite的透明度调成1(!!!注意,一定不要调成0,调成0后unity就不会渲染,那咱的层级设定就没有意义了,这也算unity的一个小bug吧),这样就用户就点击不了任何组件了。当通讯完成的时候,再取消这个panel,用户就可以再次操作了。
大概思路就是这样,废话不多说,贴上我的代码,供大家参考,也希望大神挑出我的毛病,哦对了,在说一点,在建父物体的时候,我都是用的panel,我觉得应该用gameobject,因为用panel会增大draw call,对优化有一定的帮助。
using UnityEngine;
using System.Collections;
public class gameSence : MonoBehaviour {
//登录场景
public GameObject sence1;
//注册场景
public GameObject sence2;
//Loading场景
public GameObject sence3;
//注册场景中账号的输入
public UIInput r_name;
//注册场景中第一次密码的输入
public UIInput r_pwd;
//注册场景中第二次密码的输入
public UIInput r_pwdok;
//Use this for initialization
voidStart () {
//显示场景1
sence1.SetActive(true);
//不显示场景2
sence2.SetActive(false);
//不显示Loading场景
sence3.SetActive(false);
}
//Update is called once per frame
voidUpdate () {
}
//登录场景切换到注册场景
public void change() {
//不显示场景1
sence1.SetActive(false);
//显示场景2
sence2.SetActive(true);
}
//注册场景切换到登录场景
public void toChange() {
//显示场景1
sence1.SetActive(true);
//不显示场景2
sence2.SetActive(false);
}
//当点击运行(go)按钮的时候触发的事件
public void sendToServer() {
//Loading场景,防止用户误操作
sence3.SetActive(true);
//向服务器发送数据
}
public void r_name_input() {
//如果账户输入为空
if (r_name.value == null || r_name.value == "") {
print("请输入账号");
return;
}
//如果两次密码输入的值不相同
if (r_pwd.value != r_pwdok.value) {
print("两次密码输入不相同");
return;
}
}
}