Unity技术手册-Image图片

7,588 阅读3分钟

“我报名参加金石计划1期挑战——瓜分10万奖池,这是我的第8篇文章,点击查看活动详情

👉关于作者

众所周知,人生是一个漫长的流程,不断克服困难,不断反思前进的过程。在这个过程中会产生很多对于人生的质疑和思考,于是我决定将自己的思考,经验和故事全部分享出来,以此寻找共鸣!!!

专注于Android/Unity和各种游戏开发技巧,以及各种资源分享(网站、工具、素材、源码、游戏等)

欢迎关注公众号【空名先生】获取更多资源和交流!

👉前提

这是小空坚持写的Unity新手向系列,欢迎品尝。

小空为了方便更多的人(新手)看明白,使用的汉字,真实项目尽量使用英文规则昂。

新手(√√√)

大佬(√)

👉实践过程

Image可以说是最简单的控件了,大部分情况只需要指定一个精灵Sprite即可。我们往Unity中导入一个图片,将纹理类型(Texture Type)改为精灵(Sprite 2D and UI)即可拖拽到Image控件中的Source Image属性中。

image.png

image.png Source Image(源图像):指定精灵Sprite即可。

Color:选择一个颜色,会和Image图片进行叠加显示。

Material(材质):可以让文字拥有更真实的效果,比如金属材质,比如一种石头上的文字就需要石头材质。

Raycast Target:是否可以作为射线检测的目标,勾选表示可以检测,这样在代码中可以获取鼠标针对该控件的碰撞。

Image Type:总共有四个模式,(默认是Simple模式,有两个属性,User Sprite Mesh-表示使用图片网格,暂时只知道可以集合Sprite Tight完成Overdraw减少,Preserve Aspect-表示图片是否保持宽高比,而不是填充,set Native Size-直接将图片设置为原始大小,并且会改变Image组件的)、(Sliced是切片模式,表示的是点9,形式的图片,这样可以不断拉伸进而不影响特定位置,也就是九宫格方式,需要选择图片素材,点击Sprite Editor进入编辑之后修改保存。除此之外Sliced切片模式还有个Fill Center属性,表示是否填充中心,取消勾选编辑过的九宫格中间将消失,看下方第二个GIF)

image.png

image.png

UI1图片九宫格.gif

UI1图片九宫格2.gif

(Tiled平铺模式,将精灵图按照原始大小填充满区域,受Image中的每单位像素和图片素材属性中的像素密度影响) UI3图片填充.gif

(Filed为填充模式,非常适合做冷却效果和进度条,包含Fill Method填充方法的修改-包含水平垂直90度180度360度,以及填充起点修改,还有填充量,是顺时针还是逆时针) UI4图片填充.gif

👉其他

📢作者:小空和小芝中的小空

📢转载说明-务必注明来源:芝麻粒儿 的个人主页 - 专栏 - 掘金 (juejin.cn)

📢这位道友请留步☁️,我观你气度不凡,谈吐间隐隐有王者霸气💚,日后定有一番大作为📝!!!旁边有点赞👍收藏🌟今日传你,点了吧,未来你成功☀️,我分文不取,若不成功⚡️,也好回来找我。