[转]unity3D游戏开发之GUI

转自:http://blog.csdn.net/kuloveyouwei/article/details/23598171

  GUI在游戏的开发中占有重要的地位,游戏的GUI是否友好,使用是否方便,很大程度上决定了玩家的游戏体验。Unity内置了一套完整地GUI系 统,提供了从布局、控件到皮肤的一整套GUI解决方案,可以做出各种风格和样式的GUI界面。在Unity中使用GUI来完成GUI的绘制工作,目前 Unity没有提供内置的GUI可视化编辑器,因此GUI界面的制作需要全部通过编写脚本代码来实现,如果游戏有比较多的界面制作需求,可以通过编写编辑 器脚本来制作适合自身需求的GUI编辑器,或者借助第三方的GUI插件,如NGUI。

Unity的GUI类提供了丰富的界面控件,可以将这些控件配合使用,GUI控件,如下图:


GUI代码需要在OnGUI函数中调用才能绘制,GUI的控件一般都需要传人Rect参数来指定屏幕绘制区域,例如 Rect(0,10,200,300),对应的屏幕矩形区域左上角的坐标为(0,10),宽度为200,高度为300,在Unity GUI中,屏幕坐标系以左上角为原点

接下来我们看Label控件,Label控件适合用来显示文本信息或者图片,我们新建一个c#脚本,叫做TestGUI.cs,然后绑定到我们的Main Camera对象上,Label初始化代码如下:

void OnGUI()
{//GUI.color = Color.red;GUI.Label(new Rect (10, 10, 100, 200), "Hello World!");GUI.Label (new Rect (100, 100, texture.width/4, texture.height/4), texture);
}

 


我们定于了两个label,一个显示文字,另一个显示了一张图片,如下图:


Box控件,Box控件用来绘制带有边框背景的文字或图片,代码如下:

        void OnGUI(){//GUI.color = Color.red;//GUI.Label(new Rect (10, 10, 100, 200), "Hello World!");//GUI.Label (new Rect (100, 100, texture.width/4, texture.height/4), texture);GUI.Box (new Rect (10, 10, Screen.width * 0.5f, Screen.height * 0.5f), "This is a title");GUI.Box (new Rect (150, 170, texture.width/4, texture.height/4), texture);}        

 

效果如下:


Button控件,Button控件用来绘制响应单击事件的按钮,代码如下:

		GUI.Button (new Rect (10, 10, 150, 50), "这是一个文字按钮");//图片按钮GUI.Button (new Rect (150, 100, texture.width/4, texture.height/4), texture);

 

效果如下图:


绘制一个文字图片的按钮,代码如下:

            //绘制一个带图片和文字按钮GUIContent guic = new GUIContent("按钮", texture);GUI.Button(new Rect(10, 70, 150, 30), guic);        

我们可以设置按钮的点击事件,代码如下:

GUI.Button (new Rect (10, 10, 150, 50), "这是一个文字按钮");
//图片按钮
if(GUI.Button (new Rect (150, 100, texture.width/4, texture.height/4), texture))
{Debug.Log("--------aaa");
}
//绘制一个带图片和文字按钮
GUIContent guic = new GUIContent("按钮", texture);
GUI.Button(new Rect(10, 70, 150, 30), guic);    

 

当我们点击了按钮,就会在控制台输出打印的内容,

TextField控件,在游戏中,经常需要用到信息输入的窗口,比如聊天窗、用户信息的输入等;PasswordField控件用于绘制密码输入 框,经常用于用户登录界面中;TextArea控件与TextField的用法类似,区别就是TextField是单行的,TextArea可以编辑多行 的文字,创建的代码如下:

using UnityEngine;
using System.Collections;public class TestGUI : MonoBehaviour {public Texture2D texture;public string userName;public string password;public bool isSuccess;// Use this for initializationvoid Start () {userName = "admin";password="123";}// Update is called once per framevoid Update () {}void OnGUI(){//GUI.color = Color.red;//GUI.Label(new Rect (10, 10, 100, 200), "Hello World!");//GUI.Label (new Rect (100, 100, texture.width/4, texture.height/4), texture);//GUI.Box (new Rect (10, 10, Screen.width * 0.5f, Screen.height * 0.5f), "This is a title");//GUI.Box (new Rect (150, 170, texture.width/4, texture.height/4), texture);//        GUI.Button (new Rect (10, 10, 150, 50), "这是一个文字按钮");
//        //图片按钮
//        if(GUI.Button (new Rect (150, 100, texture.width/4, texture.height/4), texture))
//        {
//            Debug.Log("--------aaa");
//
//
//        }
//
//        //绘制一个带图片和文字按钮
//        GUIContent guic = new GUIContent("按钮", texture);
//        GUI.Button(new Rect(10, 70, 150, 30), guic);
userName=GUI.TextField (new Rect (10, 10, 150, 30), userName);//'*'密码字符串的掩码字符password=GUI.PasswordField (new Rect (10, 50, 150, 30), password, '*', 25);GUI.TextArea(new Rect(10, 100, 150, 50),"abcderfasdasdasdasfasdaasdfdfsfsd");if (GUI.Button (new Rect (Screen.width / 2 - 50, Screen.height / 2 - 50, 100, 100), "登录")){//判断登录if (userName.Equals("admin") && password.Equals("123")){isSuccess=true;}else{isSuccess=false;}}if (isSuccess){GUI.Label(new Rect(10, 200, 100, 30), "登录成功!");} else {  GUI.Label(new Rect(10, 200, 100, 30), "登录失败!");}}
}

 

效果如下:


Toggle控件可以用于制作开关按钮,每次单击,它都会在开和关的状态之间切换,创建代码如下:

		//文字toggleTxt = GUI.Toggle (new Rect (10, 10, 100, 30), toggleTxt, "A Toggle text");//图片toggleImg = GUI.Toggle (new Rect (10, 50, 50, 50), toggleImg, texture);

 

效果如下图:


ToolBar控件适用于绘制一组按钮,在这些按钮中同时只激活一个,可以用来制作工具栏,创建代码如下:

	public int toolbarInt;toolbarInt=GUI.Toolbar(new Rect(10,10,250,30),toolbarInt,new string[]{"功能一","功能二","功能三"});

效果如下图:


Silder滑动条是一种很常用的界面元素,可用在音量调整、进度显示、数值调整的GUI界面中,在Unity中Slider控件分为水平和垂直2种,对应的GUI函数为HorizontalSlider和VerticalSlider,创建代码如下:

hSliderValue = GUI.HorizontalSlider (new Rect (50, 25, 100, 30), hSliderValue, 0.0f, 10.0f);
//显示水平滑动条数值
GUI.Label(new Rect(25,22,100,30),hSliderValue.ToString("0.00"));vSliderVaule = GUI.VerticalSlider (new Rect (25, 70, 30, 100), vSliderVaule, 0.0f, 10.0f);//显示垂直滑动条数值
GUI.Label(new Rect(22,170,100,30),vSliderVaule.ToString("0.00"));

 

效果如下图:


Scrollbar控件,滚动条Scrollbar常用于页面区域的滚动,例如文档浏览中,在Unity中Scrollbar控件分为水平和垂直2种,对应的GUI函数为HorizontalScrollbar和VerticalScrollbar,创建代码如下:

hSbarValue = GUI.HorizontalScrollbar (new Rect (25, 25, 100, 30), hSbarValue, 1.0f, 0.0f, 10.0f);vSbarVaule = GUI.VerticalScrollbar (new Rect (25, 50, 30, 100), vSbarVaule, 1.0f, 10.0f, 0.0f);

 

效果如下图:


Unity默认的控件外观十分简单,在游戏开发过程中,开发者都会根据游戏的类型和内容来设计一套个性化的游戏界面,Unity可以通过配置 GUISkin来更改控件的默认样式,制作出符合游戏风格的控件外观。依次打开菜单栏中的Assets->Create->GUI Skin来创建GUISkin,如下图:


单击GUISkin文件,在Inspector视图中可以对GUISkin的参数进行设置,假设现在需要更换按钮的背景图片,以及按钮上的字体大小 等,单击Button折叠项,展开Button控件的样式参数,更改Normal、Hover、Active、On Normal、On Hover、On Hover、Font Size这几个参数,如下图:


然后我们在代码中创建一个button,代码如下:

public GUISkin mySkin;GUI.skin = mySkin;GUI.Button (new Rect (60, 50, 588 / 2, 288 / 2), "开始游戏");

 

设置mySkin为我们刚才创建的GUISkin,绑定,点击后的效果如下图:


GUILayout自动布局,在Unity中GUI控件的布局方式有两种,一种为固定布局,即在绘制控件的时候将位置参数传人,指定控件的精确位 置;另外Unity还支持控件的自动布局,自动布局适用于控件数量动态的情况,或者是有时候开发者不太在乎控件的精准位置,如果想使用自动布局,那么需要 使用GUILayout类来代替前面使用的GUI类,并且去掉Rect()位置参数。

//自动布局
GUILayout.Button ("aaaaaaa");

 

 

转载于:https://www.cnblogs.com/dad-bod/p/5507641.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/418499.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

swagger2如何测试单个文件或者多文件上传

http://www.pianshen.com/article/9445265955/

JS 构造图片Image对象

var imagenew Image(); image.src""; console.log(image.width); 转载于:https://www.cnblogs.com/danlis/p/5508354.html

前端学习(1937)vue之电商管理系统电商系统之渲染分配角色的对话框并请求数据

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vue import Welcome from ./components/Welcome.vue import Users from ./components/user/Users.vue import Right fr…

使用JWT实现单点登录(完全跨域方案)

https://blog.csdn.net/weixin_42873937/article/details/82460997

Javascript 获取和设置日期

关于JavaScript中日期对象使用方法: 一般有两种设置时间的方式: 一种是直接指定,如:date.setHours(13);    //指定date的时间为下午1点。 第二种是先获取时间进行计算,然后再进行设置,如: d…

前端学习(1938)vue之电商管理系统电商系统之下拉框环境

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vue import Welcome from ./components/Welcome.vue import Users from ./components/user/Users.vue import Right fr…

cookie和session的区别和用法

https://www.cnblogs.com/wangzhongqiu/p/8970935.html

javascript判断图片是否加载完成方法整理

有时候我们在前端开发工作中为了获取图片的信息,需要在图片加载完成后才可以正确的获取到图片的大小尺寸,并且执行相应的回调函数使图片产生某种显示效果。本文主要整理了几种常见的javascipt判断图片加载完成时的方法,并通过代码与实际应用相…

前端学习(1939)vue之电商管理系统电商系统之完成全部功能

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vue import Welcome from ./components/Welcome.vue import Users from ./components/user/Users.vue import Right fr…

response 中OutputStream和PrintWriter区别

https://blog.csdn.net/feipeng8848/article/details/56286399 https://blog.csdn.net/lhanson/article/details/83893999 https://blog.csdn.net/qq_16605855/article/details/78260355 public class RenderUtil {/*** 渲染json对象*/public static void renderJson(HttpSe…

为PHP7安装Windows Server 2012 R2过程记录

因为要安装php-7.0.6-Win32-VC14-x64,需要先安装vcredist2015_x64_14.0.23026.0。 之前安装了Windows Server 2012 R2后,一直无法成功安装vcredist2015_x64_14.0.23026.0。 据说是因为没有打几个补丁。但是一直都打不上,索性直接安装了个带补…

《学习OpenCV》课后习题解答1

题目:(P104) 下面这个练习是帮助掌握矩阵类型。创造一个三通道二维矩阵,字节类型,大小为100*100,并设置所有数值为0。 a.在矩阵中使用cvCircle( CvArr* img, CvPoint center, int radius, CvScalar colo…

通用的MIME类型:application/octet-stream

https://www.cnblogs.com/xiaohi/p/6550133.html

Java开发神器Lombok使用详解

https://blog.csdn.net/wo541075754/article/details/103867617?depth_1-utm_sourcedistribute.pc_feed.none-task&request_id&utm_sourcedistribute.pc_feed.none-task

Mac上更新Ruby

1、安装 RVM RVM:Ruby Version Manager,Ruby版本管理器,包括Ruby的版本管理和Gem库管理(gemset)$ curl -L get.rvm.io | bash -s stable 测试是否安装正常 rvm -v 2、用RVM升级Ruby #查看当前ruby版本 $ ruby -v ruby 2.0.0 #列出已知的ruby版本 $ rvm list…

前端学习(1943)vue之电商管理系统电商系统之通过路由加载商品分类

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vue import Welcome from ./components/Welcome.vue import Users from ./components/user/Users.vue import Right fr…

PC端支付宝支付接口的调用(沙箱环境测试最全文档)

https://blog.csdn.net/qq_43591363/article/details/104591261?depth_1-utm_sourcedistribute.pc_relevant.none-task&utm_sourcedistribute.pc_relevant.none-task