sprite平铺类型制作背景花纹制作血条NGUI从入门到实战大学霸

 sprite平铺类型制作背景花纹制作血条NGUI从入门到实战大学霸

2.2.3  平铺类型——制作背景花纹 sprite平铺类型制作背景花纹制作血条NGUI从入门到实战大学霸

平铺（Tiled）类型的sprite，会以原图的大小不断平铺整个显示区域。这就像是在现实生活中，用瓷砖铺满整个地面一样。本章要制作的游戏示例，背景大小是1300×850，打算要使用Tiled sprites来铺满整个游戏背景，具体的操作步骤是：

（1）读者依然可以使用本章第一节介绍的方法，创建一个Sprite控件，然后再设置成Tiles sprites类型。不过还有更简单的方法可以采用，就是复制！没错，现在已经有了一个名为Window的Sprite控件了，只要以它为模版再复制一个就好了。方法是，首先选中Hierarchy视图里的Window对象，然后按下快捷键Ctrl+D即可，重命名新的对象为Background。

（2）接下来要在Inspector视图里，设置Background对象UISprite(Script)组件的下列属性，如图2-24所示。

q  Sprite：Honeycomb；

q  Sprite Type：Tiled；

q  Color Tint：R：115、G：240、B：255、A：255；

q  Depth：1；

图2-24  UISprite(Script)组件属性的设置 sprite平铺类型制作背景花纹制作血条NGUI从入门到实战大学霸

（3）为Background对象添加两个组件：

q  单击Component|NGUI|UI|Stretch命令，添加名为UIStretch的组件；设置此组件下的属性：Container为Window，Style为Both。

提示：此组件的用途是，当控件的显示区域要变大或者变小时，避免手动调节对象的大小。在本示例中，对此组件的设置，将使得Background对象与Window对象一同进行伸缩变换。

q  单击NGUI|Attach|Anchor命令，添加名为UIAnchor的组件；设置此组件下的属性：Container为Window。

提示：此组件的用途是，保证对象的相对位置不变。在本示例中，对此组件的设置，将使得Background对象与Window对象的相对位置固定，也就是说后者会随着前者一同移动；

添加到Background对象上的这两个组件如图2-25所示。

图2-25  对象上的UIStretch和UIAnchor组件 sprite平铺类型制作背景花纹制作血条NGUI从入门到实战大学霸

（4）在完成了以上的所有设置以后，Game视图中也早就将设置效果显示出来了，无需运行游戏就可以查看，如图2-26所示。

图2-26  拥有花纹的游戏背景

2.2.4  填充类型——制作血条 sprite平铺类型制作背景花纹制作血条NGUI从入门到实战大学霸

填充（Filled）类型的sprite，可以用在游戏的血条、进度条之类的效果上。Fill Amount参数用于控制图片的显示范围。

使用上一小节介绍的方法，再获得一个Sprite的拷贝，修改其UISprite(Script)组件的下列属性，如图2-27所示。

q  Sprite：Light；

q  Sprite Type：Filled；

图2-27  UISprite(Script)组件的各属性，以及预览视图 sprite平铺类型制作背景花纹制作血条NGUI从入门到实战大学霸

q  Fill Dir：此属性用于设置图片的显示方向，共有5种可选项；如图2-28所示。

图2-28  图片显示方向的5种效果

q  Fill Amount：一个滑动条表示了这个属性值的范围，为0时表示不显示图片，为1时表示图片全部显示，0~1之间的值表示不完全显示的图片；

q  Invert Fill：此属性用于设置是否反转图片的显示方向；