canvas教程

学习Unity 4.6新GUI系统

字号+ 作者:H5之家 来源:H5之家 2015-11-22 10:48 我要评论( )

最近在学习Unity的过程中,自己做一款小游戏自娱自乐。自然需要用到GUI。但4.5中的GUI很难用,一个选择是传说中的NGUI插件。但对于4.6中的新GUI,我也有所耳闻。

最近在学习Unity的过程中,自己做一款小游戏自娱自乐。自然需要用到GUI。但4.5中的GUI很难用,一个选择是传说中的NGUI插件。但对于4.6中的新GUI,我也有所耳闻。想了想还是选择官方的技术较好,于是就有了这篇。

Canvas

在新GUI中,所有的UI组件都位于Canvas上。Canvas有三种渲染模式:

Rect Transform

所有的UI元素都使用矩形来表示。
Rect Transform是为UI设计的新transform组件。除了普通transform组件的position、rotation、scale之外, 还增加了width和height。

Update:两种编辑模式:

  • Blueprint:在此模式下,物体不会旋转和缩放。
  • Raw Edit:在此模式下,调整物体的Pivot和Anchor不会改变物体的位置和尺寸。
  • Rect Tool

    4.6的工具栏中加入了新的小工具Rect Tool,用于调整UI和2D对象。使用这个小工具,就可以完成移动、调整大小、旋转等工作。
    当使用Rect Tool调整对象的尺寸时,如果是2D或3D对象,他会调整其scale;而对于有Rect Transform的对象,则会调整其width和height。

    Update:Resize和Scale的区别:前者不影响字体大小;后者可以设置负值,相当于将物体反过来,前者不允许负值。

    当切换至Pivot模式,可以调整其pivot。再次点击切换回Center模式。

    Anchors

    Rect Transform中增加了Anchors属性,其中包括Anchor Min和Anchor Max。Anchors用于指定在父UI元素调整时,子UI元素如何调整。具体行为由Anchor Min(左下)和Anchor Max(右上)两个锚点决定。坐标以矩形左下为(0, 0),右上为(1, 1)。
    但实际上,Unity已经提供了预定义的模式。在Rect Transform的左上角点击,出现如下的常用Anchor模式。

    以top-left模式为例,此时锚点位于父元素的左上角。如果拉动父元素矩形的左边框和上边框,则子元素的位置也随之变化。而拉动另外两条边则不发生变化。
    在middle或center模式下,拉动轴两侧的边子元素均会随之移动。
    此外还有stretch模式,在拉动时会拉伸或压缩子元素。

    新的组件
  • Text:也就是Label。
  • Image
  • RawImage:与Image不同之处在于,Image的参数是Sprite,而RawImage的参数是Texture。
  • 交互

    交互组件都有一个transition属性,用于实现组件在不同状态下产生不同的变化。有三个选项:

    Button提供了OnClick属性,可以为按钮添加响应。点击加号,可以添加一个委托。

    其中有三个空,第一个表示目标对象,第二个表示要选用的函数,第三个是对应的参数列表,由前两项决定。
    以点击按钮改变按钮的文字为例。第一个就是Button下的Text对象,第二个是Text.text,第三个则是你要改变为的内容。

    此外还有其他的控件,如Toggle、Slider、ScrollBar、Selection List。

    自动布局

    一些更加复杂的布局技术,暂时没有这个需求,就不看了。

    动画集成

    这部分文档没写,囧。

    富文本

    Rich Text在新的GUI系统中默认是禁用的,但是可以通过GUIStyle来使用:

    GUIStyle style = new GUIStyle (); style.richText = true; GUILayout.Label("<size=30>Some <color=yellow>RICH</color> text</size>",style);

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • 学习慕课网canvas倒计时实例笔记

      学习慕课网canvas倒计时实例笔记

      2017-04-30 14:01

    • 从一个画板demo学习canvas

      从一个画板demo学习canvas

      2017-04-30 13:00

    • canvas游戏开发学习之四:应用图像

      canvas游戏开发学习之四:应用图像

      2017-04-29 16:00

    • JS canvas学习笔记

      JS canvas学习笔记

      2017-04-29 15:03

    网友点评