【Unity学习笔记】——基础篇:UGUI基础Image Type

先放一个讲 UGUI 的博客:

宣雨松的 UGUI 研究院

Image——Image Type:

① 在做界面时常常是美工设计好UI元素,然后程序在Unity里把它们摆一摆。比如做一个Image图标,美工设计好的尺寸是100*100,那么我们在unity里创建一个image,设置它的长宽为100*100,然后放到合适位置。有没有省事的方法呢?

看Image组件底下有一个按钮:

【Unity学习笔记】——基础篇:UGUI基础Image Type

点击此按钮则 Image 组件的长宽自动与原图片长宽一致,这常常用于使用脚本创建Image并改贴图。

② 美工做了一张100*100的边框图给你,这张图有时以100*100显示,有时以200*100显示,有时……,放大会失真,难道要美工做 n 张图吗?

【Unity学习笔记】——基础篇:UGUI基础Image Type 

下面是解决步骤:

【Unity学习笔记】——基础篇:UGUI基础Image Type

看那个绿框,把边界留出来

【Unity学习笔记】——基础篇:UGUI基础Image Type

【Unity学习笔记】——基础篇:UGUI基础Image Type

效果如下:

【Unity学习笔记】——基础篇:UGUI基础Image Type

③ 平铺

【Unity学习笔记】——基础篇:UGUI基础Image Type

【Unity学习笔记】——基础篇:UGUI基础Image Type【Unity学习笔记】——基础篇:UGUI基础Image Type

④技能冷却 & 血条

【Unity学习笔记】——基础篇:UGUI基础Image Type【Unity学习笔记】——基础篇:UGUI基础Image Type