zoukankan      html  css  js  c++  java
  • uGUI练习(一) Anchor

    一、练习步骤

    如果用过NGUI的Anchor,我们知道在2.x的版本有UIAnchor组件(下图左),3.x版本中,每个UIWidget有自带的Anchors(下图右)

    imageimage

    而uGUI的Anchor用起来也一样很直观,简单易使用。

    1、创建一个新场景,我们创建一个UI/Button

    image——>image——>image

    2、创建完成后,观察Scene中的情况

    image

    3、Inspector截图,注意图中框选的部分,对于Anchor很有用。

    image

    4、在Scene里拖动Button(注意:拖动浅白色圆圈image,而不是image)

    image

    image

    通过上面的拖动观察,我们可以得到,它是先Anchor在中心(0,0,0),然后根据你的拖动而做偏移。

    5、在Inspect属性面板中,点击Rect Transform的图标image,弹出如下选项

    image

    下面我们解释一下这些图形的意思(按住 Alt 显示Position)

    image

    6、有了上面的概念之后,我们就可以轻松的完成Anchor了,比如我想Anchor在左下角,那我只需要选择 bottom – left

    image

    7、选择完之后,在场景中可以看到,Button已经Anchor在左下角了,同进看到Anchors下的值也发生了改变。

    imageimage

    8、查看Game视图,拉伸窗口不管在什么分辨率下,Button都始终固定在左下角

    image

    二、完成练习

    image

    三、Anchor效果

    imageimage

  • 相关阅读:
    Redis最佳实践:7个维度+43条使用规范,带你彻底玩转Redis | 附实践清单
    laravel生命周期
    日志写入
    商城表设计
    10个你不一定知道的PHP内置函数
    PHP函数详解:call_user_func()使用方法
    Dingo与JWT的使用
    商城-会员与用户的数据表设计
    MVVM模式
    vue面试题
  • 原文地址:https://www.cnblogs.com/zhaoqingqing/p/3972656.html
Copyright © 2011-2022 走看看