unity ui小技巧

一:使图片背景图片平铺

unity ui小技巧

unity ui小技巧

选择背景

unity ui小技巧

unity ui小技巧

set native size 按钮可以是图片保持原有的比例

unity ui小技巧

unity ui小技巧

使用rect tool 工具移动图片不会造成z轴方向的移动(建议在平面移动时使用这个)

unity ui小技巧

选择锚点(锚点就像船的锚一样,能够固定位置,保持相对位置不改变)

为了使图片平铺,我们使用四角为锚点

unity ui小技巧

按住alt选择右下角的向四周拉伸

二:技能冷却特效

unity ui小技巧

在此图上面再加一层图片并调成暗色

unity ui小技巧

unity ui小技巧

unity ui小技巧

将image type改成filled

使用代码调整fill amount 就可以实现技能冷却特效

unity ui小技巧

unity ui小技巧

三:能量条,血条制作

ui—>slider

unity ui小技巧

unity ui小技巧

back ground :背景

unity ui小技巧unity ui小技巧

fill area:填充区域

unity ui小技巧unity ui小技巧 

点击播放unity ui小技巧

拖动按钮

unity ui小技巧

按钮(可以选择把按钮删除)

unity ui小技巧

其实slider就是几张图片(颜色)相互覆盖制作的特效

在父级图片挂上了slider组件

unity ui小技巧

四:切换背包物品栏

toggle 的使用可以实现这个功能

ui->toggle

unity ui小技巧

点击播放unity ui小技巧

unity ui小技巧

unity ui小技巧

unity ui小技巧

将需要scene视图需要控制的图片放入image中

我们也可以根据自己的需求来使用toggle

例如:

unity ui小技巧

图片挂上toggle组件就可以成为按钮

unity ui小技巧

 

unity ui小技巧

unity ui小技巧

效果

unity ui小技巧

unity ui小技巧

头盔消失

点击左边

unity ui小技巧

双剑消失

有个bug(我们需要必须有一个存在,不能两个同时消失同时出现,这时候使用toggle group)

添加toggle group 组件

unity ui小技巧

unity ui小技巧

将添加了toggle group组件的物体移入按钮的group

使两个按钮都在同一个toggle group中,使他们不能同时被触发

unity ui小技巧

unity ui小技巧

五:grid layout group的使用

能够自动生成多个元素

unity ui小技巧

unity ui小技巧

unity ui小技巧

选择要复制的元素ctrl +D

unity ui小技巧

就会自动排列

六:滑动scroll rect

 

unity ui小技巧

unity ui小技巧

unity ui小技巧

unity ui小技巧

scroll 加个mask组件可以隐藏颜色