UGUI之Image

作者: 紫龙大侠 | 来源:发表于2018-05-15 10:05 被阅读9次

    2.5 制作一个图片(Image)

        在游戏开发或软件开发中Image(图片)是必不可少的资源。图片不仅可以作为游戏的背景静止不动,同时也可以运动变成华丽的技能和特效等。

    2.5.1 图片精灵(sprite)制作

        导入一张图片到Asset目录下。选中图片去Inspector面板查看属性。在属性中的Texture

    Type选项中选择Sprite(2D and UI)选项。点击右下角的Apply选项就可以把图片的类型改成Sprite类型。例如这里导入一张名为headportrait的图片,属性如图:

    当选择为Sprite类型后,属性就变成了Sprite具有的属性。如图:

    在sprite mode 属性中有两种,一种是Single 另一种是Multiple。

    Single是指将这张图片作为一个整体。

    Multiple是指可以对一张图片进行裁剪,分割为多个图片。

    2.5.2 Image属性

    新建一个Image。在Inspector面板会看到Image这个组件的属性。如图:

    Source Image默认是空白的,source

    Image要求用Sprite类型的图片来填充。

    Color:通过该属性可以修改图片的颜色和alpha值。

    Material可以更改图片材质。

    Raycast Target 是用来决定这张图片会不会成为发出的射线的目标物体。如果勾选的话就可以接受相机发出的射线,如果不勾选的相机的射线不会碰撞到该图片。

    Preserve Aspect 图像的原始比例的高度和宽度是否保持相同比例。

    当Image选择一个Sprite后会出现一个新属性Image

    Type ,这个属性是图片的显示类型属性,不同的图片显示类型会导致sprite有不同的填充方式。例如:将上面的Headportrait这个sprite图片放到Source Image里Image Type属性就会出现。如下图:

    Image Type 有四种类型 Simple 、Sliced 、Tiled和 Filled。

    Simple :直接将sprite显示到图片框中,可以任意拉伸。

    Sliced :sprite 被视为由9个切片组成。

    Tiled:当Sprite的尺寸较小时,会不断重复填充整个Image图片框。如图:

    Filled: 填充模式,该模式把图片以各种方式填充到Source Image 图片框里且有很多属性。如下图:

    Fill Method : 填充方法,包括Horizontal、 Vertical、 Radial90、 Radial 180 和Radial360。

    Fill Origin:决定了填充的起点位置,换言之决定从某个地方开始填充。

    Fill Amount:决定了填充的进度,默认数值为Float类型,最大值是1,最小值是0。图片可显示部分的多少由该数值来决定。

    Clockwise :决定是否顺时针进行填充,如果勾选就是顺时针否则就是逆时针。

    例如:将模式设置为从底部逆时针360度旋转,然后调节Fill

    Amount的数值,操作如图:

    运行效果如图:

    Set Native Size: 该功能可以使得Source

    Image的大小与Sprite原始大小一致。

    相关文章

      网友评论

        本文标题:UGUI之Image

        本文链接:https://www.haomeiwen.com/subject/xphedftx.html