Sprites

Sprite 组件可以是屏幕上显示的简单图片或者逐帧动画.

Sprite 组件使用 图集 或者 瓷砖图源 进行图像显示.

Sprite 属性

除了 Id, Position 和 Rotation 还有如下属性:

Image

如果着色器有单个采样器, 该属性叫做 Image. 否则, 每个槽都以材质中的纹理采样器命名. 每个槽是指该 sprite 用于纹理采样器的图集或者瓷砖图源资源.

Default Animation

sprite的默认动画. 动画信息取自第一个图集或者瓷砖图源.

Material

sprite的渲染材质.

Blend Mode

组件渲染时使用的混合模式.

Size Mode

如果设置为 Automatic 则编辑器会自动为 sprite 设置尺寸. 如果设置为 Manual 则可以手动设置尺寸.

Slice 9

设置在更改 sprite 大小时, 保留其周围边缘纹理的像素大小.

九宫格纹理

GUIs 对于其元素的大小改变是积极的: 面板和对话框总是应该填满其容纳的区域. 但是在缩放节点时纹理可能会产生问题.

通常, 引擎把纹理整个填充到方块节点的边界, 但是九宫格纹理可以指定纹理里的那些内容需要缩放:

九宫格 方块节点包含4个像素数值分别代表左, 上, 右, 下有多少边缘不参与缩放:

从左边开始, 顺时针设置:

• 角落部分不会被缩放.
• 边缘部分延单轴缩放. 左右边缘竖直缩放. 上下边缘水平缩放.
• 中央部分正常延两个轴缩放.

上述关于 九宫格 纹理缩放的描述仅在节点 size 改变时生效:

Mipmaps 和 slice-9

因为渲染器里 mipmapping 的工作方式, 部分缩放纹理可能会造成小问题. 当你把纹理一部分 缩小 到比本身小的时候. 渲染器会自动选择一个低分辨率的 mipmap 来渲染这部分, 导致了这个小问题.

为避免这类问题, 使用小图导进来之后只放大别缩小就行了.

混合模式

Blend Mode 属性定义了可视组件如何与其后面的图像混合. 以下列举了支持的混合模式及其混合算法:

Alpha

普通混合: src.a * src.rgb + (1 - src.a) * dst.rgb

Add

使用相应组件的像素颜色值提亮背景: src.rgb + dst.rgb

Multiply

使用相应组件的像素颜色值调暗背景: src.rgb * dst.rgb

Screen

Multiply 的反向操作. 使用相应组件的像素颜色值提亮背景: src.rgb - dst.rgb * dst.rgb

运行时操作

运行时可以使用各种各样的函数和属性 (参见 API 文档)来控制Sprite. 函数:

• sprite.play_flipbook() - 在sprite组件上播放动画.
• sprite.set_hflip() 和 sprite.set_vflip() - 翻转Sprite动画.

还可以使用 go.get() 和 go.set() 来控制Sprite:

cursor

初始化动画播放头 (number).

image

sprite图 (hash). 可以通过 go.set() 方法使用图集或者瓷砖图集资源来修改此属性. 请参考 这个例子的 API 文档.

material

sprite材质 (hash). 可以通过 go.set() 方法使用材质资源来修改此属性. 请参考 这个例子的 API 文档.

playback_rate

动画播放速率 (number).

scale

Sprite缩放 (vector3).

size

Sprite大小 (vector3). 只有 sprite 的 size-mode 设置为 manual 时可以更改.

材质常量

默认 sprite 材质常量可以使用 go.set() 或 go.animate() 来修改 (参考 材质教程). 例如:

go.set("#sprite", "tint", vmath.vector4(1,0,0,1))
go.animate("#sprite", "tint", go.PLAYBACK_LOOP_PINGPONG, vmath.vector4(1,0,0,1), go.EASING_LINEAR, 2)

tint

3D网格颜色 (vector4). 四元数 x, y, z, 和 w 分别对应红, 绿, 蓝和不透明度.

材质属性

Sprite 可以覆盖当前分配材质中的顶点属性, 并将从组件传递到顶点着色器 (更多信息参见 材质教程).

材质中指定的属性将在检查器中显示为常规属性, 并且可以在单个 Sprite 组件上设置. 如果任何属性被覆盖, 它将显示为被覆盖的属性, 并存储在磁盘上的 sprite 文件中:

相关项目配置

在 game.project 文件里有些关于Sprite的 设置项目.

多纹理 sprites

当一个 sprite 使用多个纹理时有些问题需要注意.

动画

动画数据 (fps, 帧名) 目前取自第一个纹理. 我们把它叫做 “驱动动画”.

驱动动画的图片 id 用来查找其他纹理所用图片. 所以确保纹理间的帧 id 匹配是很重要的.

比如你的 diffuse.atlas 有一个 run 动画如下:

run:
    /main/images/hero_run_color_1.png
    /main/images/hero_run_color_2.png
    ...

那么帧 id 就是 run/hero_run_color_1 这难以在比如 normal.atlas 里找到:

run:
    /main/images/hero_run_normal_1.png
    /main/images/hero_run_normal_2.png
    ...

所以我们在 图集 里使用 Rename patterns 来重命名它们. 在相应图集里设置 _color= 和 _normal=, 然后你就能在两个图集里得到这样的帧名:

run/hero_run_1
run/hero_run_2
...

UVs

UVs 取自第一个纹理. 因为只有一套顶点, 我们不能保证 如果第二个纹理有更多 UV 坐标或者有不同形状都能匹配得当.

所以要记住, 确保图片有足够相似的形状, 否则您可能会遇到纹理渗色.

每个纹理中图像的尺寸可以不同.