一、NGUI与UGUI常用组件比较

Unity复习(四)UGUI与NGUI

组件样式如下:

Unity复习(四)UGUI与NGUI

二、细节对比:
  • 渲染顺序
    NGUI根据depth的大小,UGUI根据在层次面板上的先后顺序。如上图中文本与图片的渲染顺序,NGUI中Sprite的depth为0,Label为1,Label后渲染,显示在Sprite的上方;UGUI层次面板中,Text在Image的上方,则Image后渲染,显示在Text的上方。(UGUI中Canvas之间通过order决定渲染顺序)
  • 适配
--------------------------------NGUI------------------------------------ 
    NGUI有个子物体Camera,其Size大小会影响适配,各个组件Anchors也会影响适配,除此之外,Scaling Style也会影响适配。 UIRoot脚本是开源的,所以我们看 到Scaling枚举如下:

Unity复习(四)UGUI与NGUI Unity复习(四)UGUI与NGUI
  • Flexible:[灵活的],当Scaling Style的值设为Flexible时,UIRoot属性面板如上图所示。
    • Minimum Height:默认为320,当屏幕高度小于320时,在该屏幕上显示的效果和屏幕高度为320的效果一样。
    • Maximum Height:默认为1536,当屏幕高度大于1536时,在该屏幕上显示的效果和屏幕高度为1536的效果一样。
    • Shrink Portrait UI:当是竖屏状态时,即宽度小于高度,按宽度来适配。
    • Adjust by DPI:使用dpi做适配计算。Unity复习(四)UGUI与NGUIUnity复习(四)UGUI与NGUI
  • Constrained:[受限的],屏幕按照尺寸比例来适配。当Scaling Style的值设为Constrained时,UIRoot属性面板如下图所示。

Unity复习(四)UGUI与NGUI

Unity复习(四)UGUI与NGUI Unity复习(四)UGUI与NGUI
  • 如果Fit都没勾选(Constraint.Fill):当适配宽高比小于实际宽高比时,就会按照宽度适配,反之按照高度适配。该情况下可以保证显示结果永远没有黑边,但上下或者左右两边可能会被裁剪。
  • 如果勾选了Width(Constraint.FitWidth):那么就会在屏幕比例发生变化时,按照宽度来适配。
  • 如果勾选了Height(Constraint.FitHeight):那么就会在屏幕比例发生变化时,按照高度来适配。
  • 如果两个都勾选了(Constraint.Fit):当适配宽高比大于实际宽高比时,就会按照宽度适配,反之按照高度适配。该情况下可以保证显示开发时能见到的所有内容,但是可能上下或左右会出现黑边。
  • ConstrainedOnMobiles:如果平台是编辑器、IPhone、安卓、WP8、Unity_WP_8_1或者黑莓,UI Root缩放方式为Scaling.Constrained,其他平台为Flexible。
   Unity复习(四)UGUI与NGUI

Unity复习(四)UGUI与NGUI

--------------------------------UGUI---------------------------------

    Canvas组件上的Render Mode有三种选项:Screen Space -Overlay、Screen Space - Camera、World Space。

  1. Screen Space -Overlay:始终在最前面并充满屏幕,不可设置大小。当有多个Canvas时就需要根据Sort Order来计算前后关系,这个值越大越靠前,即值越大越显示在前面。Pixel Perfect表示是否需要打开抗锯齿。
  2. Screen Space - Camera:在没给摄像机赋值前等同于Screen Space -Overlay。不一定在最前面,但同样充满屏幕,不可设置大小。Plane Distance指定了UI与该相机的距离,越近越显示在前面。Sorting layer则指定了相机的渲染顺序,Order in Layer值越大,该UI越显示在前面。值越小越靠后。所以Sorting layer只有在有多个同类型Sorting Layer时才有效。如果两个Canvas指定的Sorting Layer一样,则依据Order in Layer的值的大小决定先后顺序。如果Sorting Layer不一样,则Order in Layer值无意义,此时会根据Sorting Layer里面值的顺序来决定,值越大显示越靠前。
  3. World Space:是世界空间。也需要指定渲染相机,Sorting Layer与Order in Layer的处理与屏幕空间相机一样。
Unity复习(四)UGUI与NGUI Unity复习(四)UGUI与NGUI Unity复习(四)UGUI与NGUI

    Canvas Scaler主要负责屏幕适配,当Canvas的Render Mode为Screen Space-Overlay或者Screen Space-Camera时,可以指定UI Scale Mode,有三种模式:
  1. Constant Pixel Size:保持UI的像素大小,无论屏幕大小如何改变。Scale Factor指定几倍像素。
  2. Scale With Screen Size:随着屏幕的大小改变而等比缩放UI大小。
  3. Constant Physical Size。

    Graphic Raycaster用于射线检测,与Canvas搭配使用。

  1. Ignore Reversed Graphic是指是否忽略图形的反面射线检测,如果勾上,说明只有正面接受射线检测,能响应射线检测事件,反面无法接收射线检测事件。
  2. Blocking Object是指屏蔽指定类型的对象使他们忽略射线检测,有None、2D、3D、All,分别代表没有忽略的,2D忽略,3D忽略,忽略所有。
  3. Blocking Mask是指屏蔽上面对象中指定层,使他们忽略射线检测。

  • 图集

    NGUI中使用图片前必须打包成图集,而UGUI中可直接使用图片,发布时自动打包成图集。

Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐