2.GUI控件的使用 --《UNITY 3D 游戏开发》笔记

1.Label 控件

编写脚本文件，直接绑定在main camera上

public class labelScript : MonoBehaviour {

    //设定一个值来接收外部赋值的字符串
    public string str;
    //接收外部赋值贴图
    public Texture imageTexture;
    //设定私有变量，只可以在脚本内访问的
    private int imageWidth;
    private int imageHeight;
    private int screenWidth;
    private int screenHeight;

    // Start方法，只执行一次，初始化用
    void Start () {

        //得到屏幕的宽高
        screenWidth = Screen.width;
        screenHeight = Screen.height;
        //得到图片的宽高
        imageWidth = imageTexture.width;
        imageHeight = imageTexture.height;

    }

    // OnGUI方法绘制页面UI
    void OnGUI () {

        //将文字内容显示在屏幕中
        GUI.Label(new Rect(, , , ), str);
        GUI.Label(new Rect(, , , ), "当前屏幕宽：" + screenWidth);
        GUI.Label(new Rect(, , , ), "当前屏幕高：" + screenHeight);
        //将贴图显示在屏幕中
        GUI.Label(new Rect(, , imageWidth, imageHeight), imageTexture);

    }
}

脚本保存以后，在main camera的属性栏里就可以添加自己定义的两个变量str和贴图啦~

贴图直接从project视图拖到Image Texture栏就可以了~

直接运行游戏就能看到效果啦：

2.Button控件

同理呢，编写一个关于button控件的脚本：

public class buttonScript : MonoBehaviour {

    //设定一个按钮贴图
    public Texture2D buttonTexture;
    //提示信息
    public string str;
    //设定一个计数器
    private int frameTime;

    void Start()
    {

        //初始化赋值
        str = "请您点击按钮";

    }

    void OnGUI()
    {

        //显示提示信息内容
        GUI.Label(new Rect(, , Screen.width, ), str);

        if(GUI.Button(new Rect(, , buttonTexture.width, buttonTexture.height), buttonTexture))
        {
            //当图片按钮被按下，修改提示信息
            str = "您点击了图片按钮";
        }

        //设置按钮中文字的颜色
        GUI.color = Color.green;
        //设置按钮背景色
        GUI.backgroundColor = Color.red;

        if (GUI.Button(new Rect(, , , ), "文字按钮"))
        {
            //当文字按钮被按下，修改提示信息
            str = "您点击了文字按钮";
        }

        //设置按钮中文字的颜色和背景色
        GUI.color = Color.yellow;
        GUI.backgroundColor = Color.black;

        if (GUI.RepeatButton(new Rect(, , , ), "按钮按下中"))
        {
            //当按钮被按下，修改提示信息
            str = "按钮按下中的时间：" + frameTime;
            //时间计数器
            frameTime++;
        }

    }
}

运行一下，效果图如下哦：

左上角的文字呢，会根据点击的不同按钮来变化，不过在这个脚本中我们并没有还原计时器的操作，所以第二次点击连续按钮的时候，计时器会继续在原来的基础上往上增加，不会重置哦。

3.TextField控件

老规矩，上一个脚本，by the way，这些脚本跟原书上javascript脚本作用是一样的，我只是通过改写成C#脚本这种模式来练习一下~

public class TextFieldScript : MonoBehaviour {

    //用户名
    private string editUserName;
    //密码
    private string editPassword;
    //提示信息
    private string editShow;

    void Start()
    {

        //初始化赋值
        editUserName = "请输入用户名";
        editPassword = "请输入密码";
        editShow = "请您输入正确的用户名和密码";

    }

    void OnGUI()
    {

        //显示提示信息内容
        GUI.Label(new Rect(, , Screen.width, ), editShow);

        if (GUI.Button(new Rect(, , , ), "登录"))
        {
            //点击按钮修改提示信息
            editShow = "您输入的用户名为：" + editUserName + "，您输入的密码为：" + editPassword;
        }

        //编辑框提示信息
        GUI.Label(new Rect(, , , ), "用户名");
        GUI.Label(new Rect(, , , ), "密码");

        //获取输入框输入的内容
        //public static string TextField(Rect position, string text, int maxLength, GUIStyle style);
        //public static string PasswordField(Rect position, string password, char maskChar, int maxLength, GUIStyle style);
        editUserName = GUI.TextField(new Rect(, , , ), editUserName, );
        editPassword = GUI.PasswordField(new Rect(, , , ), editPassword, "*"[], );

    }
}

然后，运行起来，就得到了一个正儿八经的用户名密码输入框~

4.ToolBar控件

接下来使我们的工具栏控件啦，脚本长这样 ：

public class ToolBarScript : MonoBehaviour {

    //工具栏选择按钮的ID
    private int select;
    //工具栏显示按钮的字符串
    private string[] barResource;
    //选择按钮是否被按下
    private bool selectToggle0;
    private bool selectToggle1;

    void Start () {

        //初始化
        select = ;
        barResource = new string[] { "工具栏A", "工具栏B", "工具栏C", "工具栏D" };

        selectToggle0 = false;
        selectToggle1 = false;

    }

    void OnGUI()
    {

        //备份上一次工具栏选择的ID
        int oldSelect = select;
        //重新计算本次工具栏选择的ID
        //public static int Toolbar(Rect position, int selected, GUIContent[] contents, GUIStyle style, GUI.ToolbarButtonSize buttonSize);
        //返回所选项的ID
        select = GUI.Toolbar(new Rect(, , barResource.Length * , ), select, barResource);
        //如果两次选择的是不同的工具栏，将选择按钮全部释放掉
        if(oldSelect != select)
        {
            selectToggle0 = false;
            selectToggle1 = false;
        }

        //根据工具栏选择的ID显示不同的信息
        switch (select)
        {
            case :
                //public static bool Toggle(Rect position, bool value, GUIContent content, GUIStyle style);
                //所返回值为布尔值
                selectToggle0 = GUI.Toggle(new Rect(, , , ), selectToggle0, "A选项--1");
                selectToggle1 = GUI.Toggle(new Rect(, , , ), selectToggle1, "A选项--2");
                break;
            case :
                selectToggle0 = GUI.Toggle(new Rect(, , , ), selectToggle0, "B选项--1");
                selectToggle1 = GUI.Toggle(new Rect(, , , ), selectToggle1, "B选项--2");
                break;
            case :
                selectToggle0 = GUI.Toggle(new Rect(, , , ), selectToggle0, "C选项--1");
                selectToggle1 = GUI.Toggle(new Rect(, , , ), selectToggle1, "C选项--2");
                break;
            case :
                selectToggle0 = GUI.Toggle(new Rect(, , , ), selectToggle0, "D选项--1");
                selectToggle1 = GUI.Toggle(new Rect(, , , ), selectToggle1, "D选项--2");
                break;
        }

    }
}

然后呢，效果长这样：

大概就是一个tab页切换效果~

5.Slider控件

这个就是个滑动条咯，原书上有定义一个int属性的参数，但是我查了这个控件的API是不支持int属性的哦，默认都是float属性，所以照着原书写可能会报错，代码如下：

public class SliderScript : MonoBehaviour {

    //纵向滑动条数值
    public float verticalValue = 0.0f;
    public float horizontalValue = 0.0f;

    void OnGUI () {

        //计算滑动速度
        //public static float VerticalSlider(Rect position, float value, float topValue, float bottomValue, GUIStyle slider, GUIStyle thumb);
        verticalValue = GUI.VerticalSlider(new Rect(, , , ), verticalValue, 100.0f, 0.0f);
        horizontalValue = GUI.HorizontalSlider(new Rect(, , , ), horizontalValue, 0.0f, 100.0f);

        //将滑动进度显示在屏幕中
        GUI.Label(new Rect(, , Screen.width, ), "纵向滑动条当前进度：" + verticalValue + "%");
        GUI.Label(new Rect(, , Screen.width, ), "横向滑动条当前进度" + horizontalValue + "%");

    }
}

运行一下，两个华丽丽的滚动条就出现了：

6.ScrollView控件

滚动条控件，用来做页面滚动咯

public class ScrollViewScript : MonoBehaviour {

    //滚动条位置
    public Vector2 scrollPosition;

    void Start () {

        //初始化滚动条位置
        scrollPosition[] = ;
        scrollPosition[] = ;

    }

    void OnGUI () {

        //开始滚动视图
        //public static Vector2 BeginScrollView(Rect position, Vector2 scrollPosition, Rect viewRect, bool alwaysShowHorizontal, bool alwaysShowVertical, GUIStyle horizontalScrollbar, GUIStyle verticalScrollbar);
        scrollPosition = GUI.BeginScrollView(new Rect(, , , ), scrollPosition, new Rect(, , Screen.width, ), true, true);
        GUI.Label(new Rect(, , Screen.width, ), "测试滚动视图，测试滚动视图，测试滚动视图，测试滚动视图。");

        //结束滚动视图
        GUI.EndScrollView();

    }
}

效果图：

 7.群组视图（GroupView）

群组视图都是相对坐标，相对群组视图左上角的坐标，据说这个可以解决屏幕大小不同的自适应问题，emmm...

先看一下代码吧：

public class GroupViewScript : MonoBehaviour {

    //贴图
    public Texture2D viewTexture0;
    public Texture2D viewTexture1;

    void OnGUI() {

        //开始这个群组
        //public static void BeginGroup(Rect position, GUIContent content, GUIStyle style);
        GUI.BeginGroup(new Rect(, , , ));
        //显示贴图，坐标为相对群组的点（10,50）的坐标
        //public static void DrawTexture(Rect position, Texture image, ScaleMode scaleMode, bool alphaBlend, float imageAspect);
        GUI.DrawTexture(new Rect(, , viewTexture0.width, viewTexture0.height), viewTexture0);
        //标签提示信息
        GUI.Label(new Rect(, , , ), "群组视图1");
        //按钮
        GUI.Button(new Rect(, , , ), "按钮");
        //结束这个群组
        GUI.EndGroup();

        //开始这个群组
        GUI.BeginGroup(new Rect(, , , ));
        //显示贴图，坐标为相对群组的点（300,0）的坐标
        GUI.DrawTexture(new Rect(, , viewTexture1.width, viewTexture1.height), viewTexture1);
        //标签提示信息
        GUI.Label(new Rect(, , , ), "群组视图2");
        //按钮
        GUI.Button(new Rect(, , , ), "按钮");
        //结束这个群组
        GUI.EndGroup();

    }
}

在创建视图中内容时，我们使用了一样的代码，但是由于有群组视图的存在，这些坐标并不会冲突，效果实现如下：

8.窗口（View）

窗口呢概念比视图要大一些，一个窗口可以包含很多东西，运行一下代码是最好理解的了：

public class ViewScript : MonoBehaviour {

    //默认窗口位置
    private Rect window0 = new Rect(, , , );
    private Rect window1 = new Rect(, , , );

    void OnGUI() {

        //在这里注册两个窗口
        //public static Rect Window(int id, Rect clientRect, GUI.WindowFunction func, GUIContent title, GUIStyle style);
        GUI.Window(, window0, oneWindow, "第一个窗口");
        GUI.Window(, window1, twoWindow, "第二个窗口");

    }

    //显示窗口1的内容
    void oneWindow(int windowID) {

        //public static void Box(Rect position, GUIContent content, GUIStyle style);
        GUI.Box(new Rect(, , , ), "这里窗口的ID是" + windowID);
        if(GUI.Button(new Rect(, , , ), "普通按钮")) {

            Debug.Log("窗口ID = " + windowID + "按钮被点击");
        }

    }

    //显示窗口2的内容
    void twoWindow(int windowID) {

        GUI.Box(new Rect(, , , ), "这里窗口的ID是" + windowID);
        if(GUI.Button(new Rect(, , , ), "普通按钮")) {

            Debug.Log("窗口ID = " + windowID + "按钮被点击");
        }

    }

}

效果图呢，就是两个小小的窗口，大概长这样：

我们的Debug.log在左下角会输出日志哦，感觉跟console.log差不多，hhh~

控件练习就到这里啦，撒花完结，✿✿ヽ(°▽°)ノ✿~