跳转至

精灵渲染器

精灵渲染器 (Renderer) 是 AVGPlus 中比较核心的内容之一,也是对图形元素进行个性化的唯一方式。

精灵(Sprite)的基本概念

在 AVGPlus 中,所有我们可以看见的图像,都可以称之为 精灵(Sprite),包括立绘、场景等等。

每一个图像,都具备坐标、尺寸、旋转角度、透明度等特性。

使用渲染器

我们在显示一个立绘、显示场景的时候,几乎是必须要用到渲染器的。因为你必须要给它指定一个显示的坐标,让它显得更合理。这里抛砖引玉,拿立绘举个例子:

范例代码

1
2
3
4
5
6
7
8
9
// 显示一个立绘
character.show("char1", "girl-smile.png", {
  renderer: {
    x: 500,
    y: 600,
    width: 500,
    height: 600
  }
})

点击代码框右下角的三角形可以看到实时运行效果,一名「被拉宽了的少女」立绘出现在了画面中。回到上面的脚本代码中,我们可以看到在 character.show() 的第三个参数里传递了一个 JSON 对象,并在这个对象里定义了一个叫做 renderer 的对象。这就是渲染器的基本形态。

要描述图像的表现行为,仅需在 renderer 中定义一些字段的值。这里我们很简单地定义了 x, y, width, height, 它们分别代码 x 坐标,y 坐标,宽度和长度。

所以,当我们要定义一个立绘或者场景的时候,往往需要指定一个 renderer 来描述它的图形特性。

当然,我们随意这么定义的四个参数,在正式使用时肯定是不行的。

有没有更好的描述坐标和尺寸的方法呢?

计量单位

在上面的范例中,我们通过 x, y, width, height 来改变了立绘的位置和图片大小。

但问题来了。

大多数时候,我们都没办法去指定一个具体的数值。就拿坐标来说,如果指定的是一个固定的数值,那么它在不同大小的游戏分辨率下表现可能会不一致。它始终会出现在你指定的位置,不管你的分辨率有多大,这对于希望在不同分辨率把立绘居中的情况来说可能就失去了意义。

因此,针对这种情况,我们可以用 计量单位

计量单位 是 AVGPlus 一种特殊的坐标和尺寸描述方法,它是字符串格式,但支持不同的计量单位,包括像素、百分比、常量等。

为了更加直观地理解它的作用,我们先看个例子:

1
2
3
4
5
6
7
// 同样是显示一个立绘
character.show("char1", "girl-smile.png", {
  renderer: {
    position: "(center, 75%)",
    size: "50%"
  }
})

运行上面的例子,我们发现立绘变得很正常了—— 出现在了恰当的位置,而且尺寸也变得合理。在脚本代码中,我们给渲染器指定了两个属性 positionsize,他们分别代表了位置和尺寸。

我们发现这一次的取值不再单纯是个数字了,而是以一个字符串的形式出现。

取值规则:

  • 不管是坐标还是尺寸,他们都是成对出现的。比如坐标是 x 和 y, 尺寸是 width 和 height. 因此,我们在描述计量单位的时候,一般是使用小括号,然后在里面填写两部分,并用 英文逗号 隔开。
  • 如果不使用成对出现的格式,那么就不再需要小括号,表示两个部分都采用同一取值。比如上面例子的 size: "50%",就表示长和宽都是 50%.

单位

单位 说明 例子
px 像素值,和直接指定数字的效果一致 (500px, 600px)
% 百分比,如果是描述位置,则以屏幕的分辨率为基准;如果是描述尺寸,则以图像的原始尺寸为基准; (50%, 60%)

位置常量

描述坐标时,还可以偷懒地使用位置常量:

常量名 说明 适用于 例子
center 居中 x / y position: "(center, center)"
left 水平靠左 x position: "(left, 60%)"
right 水平靠右 x position: "(right, 60%)"
top 垂直偏上 y position: "(30%, top)"
bottom 垂直偏下 y position: "(50%, bottom)"

一些例子

描述尺寸时 描述坐标时
“(center,center) 无效 x 轴居中,y 轴居中
“(42%,50%) 宽为原图的 42%, 高为 50% x 为游戏窗口大小的 42% 位置,y 为 50% 位置
“(10%,50px)” 宽为原图的 10%, 高固定为 50 像素 x 为游戏窗口大小的 12% 位置,y 为10像素(起始点为游戏窗口的最上方)
“50%” 宽高均为原图的 50% x, y 均为游戏窗口大小的50%位置

渲染器属性参考表

下面是渲染器中可用的所有属性。大部分属性是立绘、场景、图片组件通用的,部分属性是特定的,请参考 作用对象类型

字段名 作用对象类型 数据类型 说明
x 立绘/场景/图片组件 number 定义 x 坐标,单位:像素
y 立绘/场景/图片组件 number 定义 y 坐标,单位:像素
width 立绘/场景/图片组件 number 图形宽度,单位:像素
height 立绘/场景/图片组件 number 图形高度,单位:像素
stretch 场景 boolean 是否把图形拉伸至窗口大小
position 立绘/场景/图片组件 string 使用计量单位描述图形的坐标,如:(40%, center)
size 立绘/场景/图片组件 string 使用计量单位描述图形的尺寸,如:50%
scale 立绘/场景/图片组件 number 图形的 x 轴和 y 轴缩放倍数,默认为 1
scaleX 立绘/场景/图片组件 number 图形的 x 轴缩放倍数。默认为 1-1 为水平翻转
scaleY 立绘/场景/图片组件 number 图形的 y 轴缩放倍数,默认为 1-1 为垂直翻转
skew 立绘/场景/图片组件 number 图形的 x 轴和 y 轴倾斜度,默认为 0
skewX 立绘/场景/图片组件 number 图形的 x 轴倾斜度,默认为 0
skewY 立绘/场景/图片组件 number 图形的 y 轴倾斜度,默认为 0
alpha 立绘/场景/图片组件 number 透明度。支持小数,取值范围0-1. 0为完全透明,1为完全可见。默认为 1
angle 立绘/场景/图片组件 number 图形的旋转角度
renderInCamera 立绘/场景/图片组件 boolean 是否在摄像机中渲染,如为 true 则图形会受的摄像机运动影响
renderCameraDepth 立绘/场景/图片组件 boolean 是否计算摄像机深度,摄像机远近运动时,图形会根据距离(cameraDistance) 计算大小
cameraDistance 立绘/场景/图片组件 number 图形和摄像机之间的距离
filters 立绘/场景/图片组件 Filter[] 定义滤镜,详见:图形滤镜