Unity3D之UGUI——制作纸牌类游戏加入房间的输入面板

       Unity3D之UGUI——制作纸牌类游戏加入房间的输入面板

        在玩纸牌类游戏，我们经常创建房间，然后邀请好友加入房间进行游戏。点击加入房间后，弹出加入房间的面板，输入房号即可加入。

现在我们就利用unity制作一个加入房间的输入面板，GO GO！

首先我们利用UGUI组件搭建输入界面，大家可以自行设计样式，图片素材可自找，当然如有需要，我会附上我的工程文件下载地址。搭建界面如下图：

Button_0至Button_9 表示0至9数字按键，Button_reset为重置，Button_del为删除，Button_exit为右上方的退出按钮，

num_group下的6个text为输入后显示的房间号。

界面就是这样，具体的布置就不详讲了。

代码部分:

创建C#脚本：JoinRoomSettingScript.cs

using System;using System.Collections;using System.Collections.Generic;using UnityEngine;using UnityEngine.UI;public class JoinRoomSettingScript : MonoBehaviour {    private List<String> inputChars;//输入的字符    public List<Text> inputTexts;//显示的text组件    public List<GameObject> btnList;//所有数字按键    public Button button_reset, button_del;//撤销，删除按钮void Start () {                inputChars = new List<string>();//实例输入字符集合        //通过访问集合，循环绑定按钮的监听事件        for(int i = 0; i < btnList.Count; i++) {            GameObject obj = btnList[i];            btnList[i].GetComponent<Button>().onClick.AddListener(delegate () {                this.OnClickHandle(obj);});        }}/// <summary>    /// 每帧运行都调用onEnterOk()函数    /// </summary>void Update () {        onEnterOk();}    /// <summary>    /// 数字按钮点击事件    /// </summary>    /// <param name="gobj"></param>    public void OnClickHandle(GameObject gobj) {        clickNumber(gobj.GetComponentInChildren<Text>().text);    }    private void clickNumber(string number) {        if (inputChars.Count >= 6) {            return;//输入达到6位数，跳出该函数        }        inputChars.Add(number);        int index = inputChars.Count;        inputTexts[index - 1].text = number.ToString();//显示数字到显示处    }    /// <summary>    /// 删除按钮的点击事件    /// </summary>    public void deleteNumber() {        if (inputChars != null && inputChars.Count > 0) {            inputChars.RemoveAt(inputChars.Count - 1);            inputTexts[inputChars.Count].text = "";        }    }    /// <summary>    /// 重置按钮的点击事件    /// </summary>    public void resetNumber() {        if(inputChars !=null && inputChars.Count > 0) {            inputChars.Clear();            for(int i=0;i< inputTexts.Count; i++) {                inputTexts[i].text = "";            }        }    }    /// <summary>    /// 输入6个字符就提交    /// </summary>    private void onEnterOk() {        if (inputChars.Count == 6) {            String roomNumber = inputChars[0] + inputChars[1] + inputChars[2] + inputChars[3] + inputChars[4] + inputChars[5];            Debug.Log(roomNumber);        }    }    /// <summary>    /// 关闭面板    /// </summary>    public void closeDialog() {        Destroy(this);        Destroy(gameObject);    }    }

将该代码挂载载Panel_join _room _bg上，然后并拖动组件到脚本中声明的集合中，Input Texts中size输入6，Btn List中 size 输

入 10

然后绑定 Button_reset,Button_del,Button_exit的点击事件

拖动后点击Founction，选择 JoinRoomSettingScript----->ResetNummber()

，

我只演示其中一个按钮绑定，其余两个方法相同，相信一定难不倒聪明的你。

绑定完成后，就可以运行了，点击数字按钮就可以显示了，nice nice！

如有不同想法，请互相交流！共同学习！ GO GO！继续成长之路。

如需工程文件请留言哦，我会尽快发上！当然也可以用NGUI来做，原理一样。