【转载】【Unity 3D】学习笔记十:GUI Skin(图形用户界面皮肤)

Unity 学习笔记十

学习资料:《Unity 3D游戏开发》 宣雨松

在这之前的学习的大部分控件用来开发游戏还是太简陋,为了让游戏更具娱乐性和美观,所以我们就需要学习GUI Skin空间来为游戏添加色彩。

首先在Project视图中点击create—->GUI Skin 。创建一个GUI Skin 。使用GUI Skin 控件可以修改任何系统提供的空间皮肤。在创建后你可以在inspector视图中看到如下:

2345截图20140607151258

里面的选项含义:

  • Font 字体

  • Box 盒

  • Button 按钮

  • Toggle 切换开关

  • Label 标签

  • Text Field 文本框

  • Text Area 文本区域

  • Window 窗口

  • Horizontal Slider 水平滑动条

  • Horizontal Slider Thumb 水平滑块

  • Vertical Slider 垂直滑动条

  • Vertical Slider Thumb 垂直滑块

  • Horizontal Scrollbar 水平滚动条

  • Horizontal Scrollbar Thumb水平滚动条滑块

  • Horizontal Scrollbar Left Button水平滚动条左侧按钮

  • Horizontal Scrollbar Right Button水平滚动条右侧按钮

  • Vertical Scrollbar 垂直滚动条

  • Vertical Scrollbar Thumb垂直滚动条滑块

  • Vertical Scrollbar Up Button垂直滚动条顶部按钮

  • Vertical Scrollbar Down Button垂直滚动条底部按钮

  • Scorll View  垂直滚动视图

  • Custom Styles 自定义样式

  • Settings 设定

然后个个空间里都有多种选项,以button为例:

2345截图20140607152512

  • Name 控件名

  • Normal 设置文字默认显示颜色和背景颜色

  • Hover 设置停留状态颜色和背景颜色,可用于鼠标停留在按键,输入框,选择框等相关控件上单没有点击显示

  • Active 设置激活状态显示颜色和背景颜色,用于按钮或者选择框点击后的显示

  • Focused 获得焦点状态,用于窗口得到焦点后显示

  • On Normal 默认状态,未选中状态,用于选择框控件显示的内容

  • On Hover 停留状态,用于选择框控件选中后文字的显示

  • On Active 激活状态,用于选择框控件选中时文字的显示

  • On Focused 获得焦点状态

  • Border 处理边界,它不会影响在按钮平面显示的高宽

  • Padding 设置按钮显示的内容与按钮边缘的偏移位置

  • Margin 设置按钮整体的偏移位置

  • Overflow 设置按钮超出原有大小的距离

  • Font 设置针对该控件的字体

  • Image Position 设置图片位置

  • Alignment 设置内容对齐方式

  • Word Wrap 是否自动换行

  • Text Clipping 设置文本剪切格式

  • Content Offset 设置内容的偏移量

  • Fixed Width 设置边缘固定的宽度

  • Fixed Height 设置边缘固定的高度

  • Font Size 字体的大小,默认为0

  • Font Style 字体的风格

  • Stretch Width 是否延伸宽度

  • Stretch Height 是否延伸高度

下面便一例子来具体说明用法:


    
    
  1. //自定义皮肤
  2. var mySkin : GUISkin;
  3. //单选是否选中
  4. private var choose : boolean = false;
  5. //拖动窗口的位置
  6. var windowRect : Rect = Rect ( 400, 200, 200, 200);
  7. //输入框中默认显示
  8. var edit : String = “请输入字符串”;
  9. function OnGUI()
  10. {
  11. //设置GUI皮肤为我们自定义皮肤
  12. GUI.skin = mySkin;
  13. //绘制自定义按钮
  14. GUI.Button(Rect ( 100, 100, 100, 100), “自定义按钮1”);
  15. //单项选择
  16. choose = GUI.Toggle(Rect( 50, 50, 100, 30), choose, “单项选择”);
  17. //输入框
  18. edit = GUI.TextField (Rect ( 200, 50, 200, 20), edit, 25);
  19. //注册窗口
  20. windowRect = GUI.Window ( 10, windowRect, setWindow, “这是一个自定义窗口”);
  21. }
  22. //创建窗口内容
  23. function setWindow (windowID : int)
  24. {
  25. //创建一个可以自由拖动的窗口
  26. GUI.DragWindow ();
  27. //绘制自定义按钮
  28. GUI.Button(Rect ( 10, 10, 100, 30), “自定义按钮2”);
  29. }

GUI Skin的设置

2345截图20140607155058

2345截图20140607155120

运行后:

2345截图20140607155400

QQ截图20140607155556

QQ截图20140607155610

QQ截图20140607155621

QQ截图20140607155634

            </div>

Unity 学习笔记十

学习资料:《Unity 3D游戏开发》 宣雨松

在这之前的学习的大部分控件用来开发游戏还是太简陋,为了让游戏更具娱乐性和美观,所以我们就需要学习GUI Skin空间来为游戏添加色彩。

首先在Project视图中点击create—->GUI Skin 。创建一个GUI Skin 。使用GUI Skin 控件可以修改任何系统提供的空间皮肤。在创建后你可以在inspector视图中看到如下:

2345截图20140607151258

里面的选项含义:

  • Font 字体

  • Box 盒

  • Button 按钮

  • Toggle 切换开关

  • Label 标签

  • Text Field 文本框

  • Text Area 文本区域

  • Window 窗口

  • Horizontal Slider 水平滑动条

  • Horizontal Slider Thumb 水平滑块

  • Vertical Slider 垂直滑动条

  • Vertical Slider Thumb 垂直滑块

  • Horizontal Scrollbar 水平滚动条

  • Horizontal Scrollbar Thumb水平滚动条滑块

  • Horizontal Scrollbar Left Button水平滚动条左侧按钮

  • Horizontal Scrollbar Right Button水平滚动条右侧按钮

  • Vertical Scrollbar 垂直滚动条

  • Vertical Scrollbar Thumb垂直滚动条滑块

  • Vertical Scrollbar Up Button垂直滚动条顶部按钮

  • Vertical Scrollbar Down Button垂直滚动条底部按钮

  • Scorll View  垂直滚动视图

  • Custom Styles 自定义样式

  • Settings 设定

然后个个空间里都有多种选项,以button为例:

2345截图20140607152512

  • Name 控件名

  • Normal 设置文字默认显示颜色和背景颜色

  • Hover 设置停留状态颜色和背景颜色,可用于鼠标停留在按键,输入框,选择框等相关控件上单没有点击显示

  • Active 设置激活状态显示颜色和背景颜色,用于按钮或者选择框点击后的显示

  • Focused 获得焦点状态,用于窗口得到焦点后显示

  • On Normal 默认状态,未选中状态,用于选择框控件显示的内容

  • On Hover 停留状态,用于选择框控件选中后文字的显示

  • On Active 激活状态,用于选择框控件选中时文字的显示

  • On Focused 获得焦点状态

  • Border 处理边界,它不会影响在按钮平面显示的高宽

  • Padding 设置按钮显示的内容与按钮边缘的偏移位置

  • Margin 设置按钮整体的偏移位置

  • Overflow 设置按钮超出原有大小的距离

  • Font 设置针对该控件的字体

  • Image Position 设置图片位置

  • Alignment 设置内容对齐方式

  • Word Wrap 是否自动换行

  • Text Clipping 设置文本剪切格式

  • Content Offset 设置内容的偏移量

  • Fixed Width 设置边缘固定的宽度

  • Fixed Height 设置边缘固定的高度

  • Font Size 字体的大小,默认为0

  • Font Style 字体的风格

  • Stretch Width 是否延伸宽度

  • Stretch Height 是否延伸高度

下面便一例子来具体说明用法:


  
  
  1. //自定义皮肤
  2. var mySkin : GUISkin;
  3. //单选是否选中
  4. private var choose : boolean = false;
  5. //拖动窗口的位置
  6. var windowRect : Rect = Rect ( 400, 200, 200, 200);
  7. //输入框中默认显示
  8. var edit : String = “请输入字符串”;
  9. function OnGUI()
  10. {
  11. //设置GUI皮肤为我们自定义皮肤
  12. GUI.skin = mySkin;
  13. //绘制自定义按钮
  14. GUI.Button(Rect ( 100, 100, 100, 100), “自定义按钮1”);
  15. //单项选择
  16. choose = GUI.Toggle(Rect( 50, 50, 100, 30), choose, “单项选择”);
  17. //输入框
  18. edit = GUI.TextField (Rect ( 200, 50, 200, 20), edit, 25);
  19. //注册窗口
  20. windowRect = GUI.Window ( 10, windowRect, setWindow, “这是一个自定义窗口”);
  21. }
  22. //创建窗口内容
  23. function setWindow (windowID : int)
  24. {
  25. //创建一个可以自由拖动的窗口
  26. GUI.DragWindow ();
  27. //绘制自定义按钮
  28. GUI.Button(Rect ( 10, 10, 100, 30), “自定义按钮2”);
  29. }

GUI Skin的设置

2345截图20140607155058

2345截图20140607155120

运行后:

2345截图20140607155400

QQ截图20140607155556

QQ截图20140607155610

QQ截图20140607155621

QQ截图20140607155634

            </div>

猜你喜欢

转载自blog.csdn.net/qq_16440237/article/details/81179288