UGUI-Canvas、锚点中心点、进度条

一、新建Canvas时如何调整适配

  1. Screen Space :

    RenderMode的渲染模式有三种:Overlay、Camera、World Space

    • Overlay(屏幕控件-覆盖模式)的画布会填满整个屏幕空间,并将画布下面的所有的UI元素置于屏幕的最上层,或者说画布的画面永远“覆盖”其他普通的3D画面,如果屏幕尺寸被改变,画布将自动改变尺寸来匹配屏幕

    • Camera(屏幕空间-摄影机模式)和Screen Space-Overlay模式类似,画布也是填满整个屏幕空间,如果屏幕尺寸改变,画布也会自动改变尺寸来匹配屏幕。所不同的是,在该模式下,画布会被放置到摄影机前方。(当场景中只有1个相机时,效果基本一致)

    • World Space即世界控件模式。在此模式下,画布被视为与场景中其他普通游戏对象性质相同的类似于一张面片(Plane)的游戏物体。画布的尺寸可以通过RectTransform设置,所有的UI元素可能位于普通3D物体的前面或者后面显示。可用于空间中3dUI界面的交互

  2. UI Scale Mode为实现场景中UI随窗口大小自适应 => Scale With Screen Size 像素设置为1920x1080


二、锚点(Anchors)与中心点(Pivot)

以Image为例:

  1. 锚点:Image在Canvas中的相对位置
  2. 中心点:(由Pivot的X、Y控制(小蓝点))中心点相对于自身的百分比位置(0-1)
  • 快捷键
  1. Shift:设置锚点时,Image中心点设置在同样位置

  2. Alt:设置锚点时,将Image的位置设置在同样的位置

背景图的锚点怎么设置:

  1. Stretch:根据窗口长宽高自动压缩
  2. Center:需要背景图的尺寸稍大于设定像素(图片略超边界)

三、进度条UI制作

图片使用Sliced模式切分(9宫格)

9宫格

效果:

A、C、G、E不变,I向四个方向拉伸

H、D为水平拉伸

B、F为垂直拉伸

作用:

相比直接放做好的完整png,这种做法更节省资源

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ShallsenSalt

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值