Skip to main content Link Menu Expand (external link) Document Search 复制 已复制

为什么要使用表面

GM中有着绘图目标(drawing target)这一概念。绘制目标可以理解为画布,而 draw_系列函数可以理解为画笔,现实中,在一块画布上作画不会影响其他画布上的内容,同样的,在 GM 中,draw_系列函数会将图案文字等绘制在指定的绘制目标上,不会影响其他绘制目标上的内容。

默认的情况下,GM 只有一个绘制目标,那就是屏幕(虽然我觉得叫“屏幕”很容易搞混概念,但是既然官方给的“屏幕”那就用“屏幕”好了),因此,默认的情况下,我们使用 draw_系列函数都是直接绘制在屏幕上给玩家看的。但是,我们有时候并不想直接绘制到屏幕上,而是绘制到看不见的表面上,在需要时再将表面的内容绘制到屏幕。表面只体现在内存中,不体现在游戏窗口中,因此无法直接展现给玩家,必须要先将其内容转移到屏幕上才行。

这里再解释一下,为什么之前说,draw_系列函数一定要写在绘制事件中呢?屏幕是一个比较特殊的绘制目标,GM 会控制它在每一帧都刷新一次(表面则不会自动刷新)。注意,屏幕也是绘制目标,因此它既有内存的体现,同时又有在游戏窗口中的体现。我们所说的“绘制”,其实是先写入到内存之中的,并不是直接改变了窗口内容。而屏幕刷新的顺序是:

  1. 步结束事件
  2. 清空屏幕内存
  3. 绘制背景图片(到内存中)
  4. 调用深度大于 1000000 的实例的绘制事件(到内存中)
  5. 绘制贴图(到内存中)
  6. 调用深度小于 1000000 的实例的绘制事件(到内存中)
  7. 从内存中输出画面到窗口上
  8. 下一帧的步开始事件

简化一下,就是:

  1. 其他事件
  2. 清空内存
  3. 绘制事件
  4. 内存输出到窗口
  5. 其他事件
  6. ……

如果你在绘制事件以外的地方使用了 draw_函数,那么显然,它在被输出到窗口之前就会残忍地清空,自然不可能被玩家看到了。但是,屏幕会刷新,表面却不会啊!所以我们可以在任意事件中,将绘制目标设置为表面后,尽情使用 draw_系列函数。最后要记得将绘制目标设置回屏幕。(话虽然这么说,但是实际上一般还是在 end step 或者 draw 事件里,因为只有这两个事件在”物体移动到新位置”之后执行)

看了上面的介绍,你可能觉得表面似乎没啥厉害的地方啊。这么想就对了!因为厉害的地方还没讲到。

第一,之前我们把绘制目标当成画布,但是它和画布不同的地方在于,不同的绘制目标之间可以随便转移内容,比如把表面 1 的指定部分画在表面 2 的指定位置,或者把屏幕的指定部分画在表面的指定位置。

第二,表面不会因为房间变换而消失,你在创建表面时,GM 会返回一个表面的索引,只要传递索引(如 global),就能跨房间传递表面,再加上可以把屏幕绘制在表面上,因此,你可以在一个房间内将屏幕绘制到表面上,再在另一个房间内把表面画出来。

第三,表面的像素透明度可以为任意值。注意了,这里才是大头戏。我们知道,GM 窗口锁定透明度为 1(即完全不透明),因此,我们在使用混色时,完全不考虑透明度的问题,最终 Ao 总是强制设置为 1。但是表面是可以储存透明度的,这就意味着混色在表面中可以得到最好的体现。

表面基础

创建表面

  • surface_create(w, h) 创建一个宽为 w 像素,高为 h 像素的表面。该函数返回被创建的表面的索引(id),请务必保存好该索引。若返回 -1,则表面创建失败。注意:索引是从 0 开始的,因此,你在初始化用来储存索引的变量时,请初始化为 -1 而不是 0。

销毁表面

  • surface_free(id) 销毁索引为 id 的表面。正如上所说,表面不会因为房间变换而消失或改变,因此,切记要自己销毁表面。

检测表面

  • surface_exists(id) 检测索引为 id 的表面是否存在。再次强调,请将储存索引的变量初始化为 -1,因为 surface_exists(0) 可能是 true。

设置绘制目标

  • surface_set_target(id) 将绘制目标设置到索引为 id 的表面上,此后所有 draw_系列函数均绘制到这个表面上。
  • surface_reset_target() 将绘制目标重新设置回屏幕上。

绘制表面

  • draw_surface(id, x, y) 将索引为id的表面的内容绘制在 (x, y) 的位置,表面的左上角与 (x, y) 重合。正如上所说,表面之间也可以随便转移内容,因此你可以把绘制目标设置在表面 2 上,然后 draw_surface(表面 1, x, y) 也是可以的。
  • draw_surface_part(id, left, top, width, height, x, y) 将索引为 id 的表面的部分内容,左上角为 (left, top),右下角为 (left + width, top + height) 之间的矩形部分绘制在 (x, y) 坐标处,左上角与 (x, y) 重合。

上述两个函数如果绘制在屏幕上,只能写在绘制事件,如果绘制在其他表面上,则可以写在任意事件。事实上,draw_sprite_xxx 的函数 draw_surface_xxx 几乎都有对应的函数,函数作用和参数也几乎是一样的,因此不再重复赘述。

  • surface_copy(destination, x, y, source) 除了先 surface_set_targetdraw_surface 外,你也可以用这个函数将索引为 source 的表面内容绘制在索引为 destination 的表面的 (x, y) 处,无需改变当前绘制目标。
  • surface_copy_part(destination, x, y, source, xs, ys, ws, hs) 同上,将索引为 source 的表面的部分内容,左上角为 (xs, ys),右下角为 (xs + ws, ys + hs) 的矩形部分绘制在索引为 destination 的 (x, y) 坐标处,左上角与 (x, y) 重合。

使用表面的一般流程

在 Create(创建)事件:

1
2
// 创建一个表面,大小根据实际需要决定。较为通用的情况是使用房间大小作为表面大小。
surf = surface_create(room_width, room_height);

在 End Step(步结束)事件中:

1
2
3
4
5
6
7
8
9
// 有时候 GM 可能会无缘无故地销毁一个表面,保险起见先判断一下。
if (!surface_exists(surf))
    surf = surface_create(room_width, room_height);
// 将绘制目标转移到表面上。
surface_set_target(surf);
// 之后开始绘制任意东西。
draw_xxxx();
// 将绘制目标复原到屏幕。
surface_reset_target();

在 Draw(绘制)事件中:

1
2
// 将表面绘制到屏幕上。
draw_surface(surf, 0, 0);

在 Destroy(销毁)事件中:

1
2
3
// 当被销毁时释放表面
if (surface_exists(surf))
    surface_free(surf);

表面高级

1
draw_clear_alpha(c_black, 0);

当绘制目标为某个表面时,清空其所有内容,回归到空白透明状态。表面不会自动刷新,因此在有需要的时候得自己手动刷新。

这个函数的原型是 draw_clear_alpha(color, alpha),用指定颜色和指定透明度填充整个绘制目标。由于屏幕强制透明度为1,因此更多使用 draw_clear(color)。但是表面是可以储存透明度的,因此可以用 draw_clear_alpha(c_black, 0); 将表面重新变回空白透明状态。

注意,虽然 RGBA 值为 (任意, 任意 ,任意, 0) 的时候在视觉上都是完全透明,但是只有 (0, 0, 0, 0) 是真正意义上的透明。在进行混色时,虽然 A 为 0,但是如果 RGB 不为 0,RGB 值依然会对混色的计算产生影响,有时会造成不可预料的结果。而只有 (0, 0, 0, 0) 的纯透明才对混色不会造成任何多余的影响。


1
2
surface_save(id, fname);
surface_save_part(id, fname, x, y, w, h);

将索引为 id 的表面储存到文件 fname 中(.png 格式),后者为部分保存。如果你要保存屏幕内容(即截屏),可以使用 screen_save(fname) 或者 screen_save_part(fname, x, y, w, h)


1
screen_redraw();

重新调用一遍所有实例的绘制事件,同时也重绘背景和贴图。该函数不会影响正常流程中的绘制事件的执行。通常将绘制目标设置到表面后,调用这个函数把屏幕内容转移到表面上

注意,调用 screen_redraw() 会导致一帧之内执行两次绘制事件,我们之前说为什么不应该在绘制事件里做其他功能,尤其是变量的自增自减,这也是其中的原因之一。


1
2
3
with (all)
    if (sprite_index != -1)
        drawSelf();

在设置绘制目标为表面后,将所有实例的图像绘制到表面上,但是不包含背景和贴图。由于可能有的实例没有 sprite,所以要增加 sprite_index != -1 的判定,以免出现 Trying to draw non-existing sprite 的报错。

注意:drawSelf() 是在绘制中提到的自定义脚本,其内容是 draw_sprite_ext(sprite_index, image_index, x, y, image_xscale, image_yscale, image_angle, image_blend, image_alpha);,并非 GM8 自带的函数。

如果要剔除调用者本身,则可以使用:

1
2
3
with (all)
    if (id != other.id && sprite_index != -1)
        drawSelf();

同样的,你也可以 with (objxxx) drawSelf(); 将特定的 obj 的实例绘制到表面上。这在处理混色时很有作用。


1
draw_set_blend_mode(bm_subtract);

bm_subtract 可以说是专门为表面设计的,当绘制目标为表面时,这个混色效果会给表面“挖洞”,即表面与图案重叠的部分会被清空透明。


1
draw_set_blend_mode_ext(bm_zero, bm_src_alpha);

与挖洞相反,这个混色模式会让表面只保留与绘制图案重叠的部分,其他部分则清空为透明。需要注意的是,其清空透明的原理是使用了 source 的透明部分,因此要确保让 source 的大小能够完全覆盖 destination。

表面范例

视野光圈限制

注意:该实例深度应该最小,建议设置为负数,以免其他实例绘制在表面的上面。

Example

Create(创建)事件中:

1
surf = surface_create(room_width, room_height);

End Step(步结束)事件中:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
if (!surface_exists(surf))
    surf = surface_create(room_width, room_height);
surface_set_target(surf);
draw_clear(c_black);
draw_set_blend_mode(bm_subtract);
// 不必是白色,是什么颜色都行,此处只是个人习惯
draw_set_color(c_white);
draw_set_alpha(1);
// 下面两个 with 修改为你要在周围绘制光圈的 obj,绘制圆也可以换成绘制任何图案
with (player)
    draw_circle(x, y, 150, 0);
with (savePoint)
    draw_circle(x, y, 100, 0);
draw_set_blend_mode(bm_normal);
surface_reset_target();

Draw(绘制)事件中:

1
draw_surface(surf, 0, 0);

Destroy(销毁)事件中:

1
2
if (surface_exists(surf))
    surface_free(surf);

电磁波干扰

同样,绘制表面的实例深度应该最低。注意,isRedraw 的目的是阻止表面在 screen_redraw() 时重绘,如果 draw 事件有其他与表面无关的代码,应该放在 if (!isRedraw) 外。

Example

Create(创建)事件:

1
2
surf = surface_create(room_width, room_height);
isRedraw = false;

End Step(步结束)事件:

1
2
3
4
5
6
7
8
if (!surface_exists(surf))
    surf = surface_create(room_width, room_height);
surface_set_target(surf);
draw_clear_alpha(c_black, 0);
isRedraw = true;
screen_redraw();
isRedraw = false;
surface_reset_target();

Draw(绘制)事件:

1
2
3
4
5
6
7
8
var i;
if (!isRedraw)
{
    draw_set_blend_mode_ext(bm_one, bm_zero);
    for (i = 0;i < room_width;i += 2)
        draw_surface_part(surf, i * 2, 0, 2, room_height, i * 2, random_range(-5,5));
    draw_set_blend_mode(bm_normal);
}

Destroy(销毁)事件中:

1
2
if (surface_exists(surf))
    surface_free(surf);

横向干扰只需将 Draw 事件改为:

1
2
3
4
5
6
7
8
var i;
if (!isRedraw)
{
    draw_set_blend_mode_ext(bm_one, bm_zero);
    for (i = 0;i < room_height;i += 2)
        draw_surface_part(surf, 0, i * 2, room_width, 2, random_range(-5,5), i * 2);
    draw_set_blend_mode(bm_normal);
}

化零为整

同样,绘制表面的实例深度应该最低。

注意:drawSelf() 是在绘制中提到的自定义脚本,其内容是 draw_sprite_ext(sprite_index, image_index, x, y, image_xscale, image_yscale, image_angle, image_blend, image_alpha);,并非 GM8 自带的函数。

图像:

Example

关卡:

Example

效果:

Example

Create(创建)事件:

1
2
surf1 = surface_create(room_width, room_height);
surf2 = surface_create(room_width, room_height);

End Step(步结束)事件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
if (!surface_exists(surf1))
    surf1 = surface_create(room_width, room_height);
if (!surface_exists(surf2))
    surf2 = surface_create(room_width, room_height);
surface_set_target(surf1);
draw_clear_alpha(c_black, 0);
// 下面的 with 改成要被图像覆盖的 obj
with (block)
    drawSelf();
with (playerKiller)
    drawSelf();
surface_set_target(surf2);
draw_clear_alpha(c_black, 0);
// 下面的这个函数改成绘制你的图像,不限于绘制 background,可以绘制 sprite,绘制形状,甚至绘制其他表面
draw_background(backRay, 0, 0);
draw_set_blend_mode_ext(bm_zero, bm_src_alpha);
draw_surface(surf1, 0, 0);
draw_set_blend_mode(bm_normal);
surface_reset_target();

Draw(绘制)事件:

1
draw_surface(surf2, 0, 0);

Destroy(销毁)事件中:

1
2
3
4
if (surface_exists(surf1))
    surface_free(surf1);
if (surface_exists(surf2))
    surface_free(surf2);

放大镜

下面以跟随鼠标为例,其他形式类推。同样,绘制表面的实例深度应该最低。

Example

Create(创建)事件:

1
2
3
4
5
6
7
surf1 = surface_create(room_width, room_height);
surf2 = surface_create(room_width, room_height);
isRedraw = false;
// 放大倍数
scale = 2;
// 放大镜半径
radius = 100;

End Step(步结束)事件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
if (!surface_exists(surf1))
    surf1 = surface_create(room_width, room_height);
if (!surface_exists(surf2))
    surf1 = surface_create(room_width, room_height);

surface_set_target(surf1);
draw_clear_alpha(c_black, 0);
isRedraw = true;
screen_redraw();
isRedraw = false;

surface_set_target(surf2);
draw_clear_alpha(c_black, 0);
draw_set_circle_precision(64);
draw_set_color(c_black);
draw_set_alpha(1);
draw_circle(mouse_x, mouse_y, radius, 0);

draw_set_blend_mode_ext(bm_dest_alpha, bm_inv_src_alpha);
draw_surface(surf1, 0, 0);
draw_set_blend_mode(bm_normal);

draw_set_color(c_white);
surface_reset_target();

Draw(绘制)事件:

1
2
if (!isRedraw)
    draw_surface_ext(surf2, mouse_x * (1 - scale), mouse_y * (1 - scale), scale, scale, 0, c_white, 1);

Destroy(销毁)事件:

1
2
3
4
if (surface_exists(surf1))
    surface_free(surf1);
if (surface_exists(surf2))
    surface_free(surf2);

表面上的反色

我在上一章讲了反色的混色因素。可能会有人尝试将其放在表面上,想要反色表面,但是却发现失败了。失败是显然的,因为按照 (bm_inv_dest_color, bm_zero) 的混色因素,最终得到的 Ao = 1 - Ad,也就是说你原本是不透明的部分,反色后会变成透明,而原本透明的部分,反色后会变成不透明。我们完全是依赖 GM8 窗口强制设置 Ao 为 1 的效果,才成功实现的反色。

那么在表面上的反色是不可能的吗?非也。多绕一点弯路还是可以实现的。首先,我们仍然按照正常的混色方式先反色,因为 GM8 只提供了这一种能让颜色全部翻转的方式,得到 (1 - R, 1 - G, 1 - B, 1 - A)。之后,我们设置 (bm_one, bm_zero),把反色后的表面以透明度 0 绘制到另一个表面上,这样我们就得到了 (1 - R, 1 - G, 1 - B, 0)。现在,我们需要把原本的透明度放进去。我们可以使用 (bm_one, bm_zero),让 draw_xxx_ext 系列函数的 col 参数设置为 c_black,绘制到一个新的表面上,得到一个 (0, 0, 0, A) 的表面。最后,我们通过 (bm_dest_alpha, bm_inv_src_alpha) 即可成功混合二者,得到 (1 - R, 1 - G, 1 - B, A) 的反色表面。

效果:

Example

Create(创建)事件:

1
2
surf1 = surface_create(room_width, room_height);
surf2 = surface_create(room_width, room_height);

End Step(步结束)事件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
if (!surface_exists(surf1))
    surf1 = surface_create(room_width, room_height);
if (!surface_exists(surf2))
    surf1 = surface_create(room_width, room_height);

surface_set_target(surf1);
draw_clear_alpha(0, 0);
// 此处绘制任何你想要反色的精灵,背景图片,表面。
draw_sprite(sprMagicField, 0, 100, 100);
draw_set_blend_mode_ext(bm_inv_dest_color, bm_zero);
draw_set_color(c_white);
draw_set_alpha(1);
draw_rectangle(0, 0, room_width, room_height, false);
draw_set_blend_mode(bm_normal);

surface_set_target(surf2);
draw_clear_alpha(0, 0);
draw_set_blend_mode_ext(bm_one, bm_zero);
draw_surface_ext(surf1, 0, 0, 1, 1, 0, c_white, 0);

surface_set_target(surf1);
draw_clear_alpha(0, 0);
// 此处再次绘制你想要反色的图像以获取其透明度,但是你必须使用 draw_xxx_ext 并且设置 col 参数为 c_black。
draw_sprite_ext(sprMagicField, 0, 100, 100, 1, 1, 0, c_black, 1);
draw_set_blend_mode_ext(bm_dest_alpha, bm_inv_src_alpha);
draw_surface(surf2, 0, 0);
draw_set_blend_mode(bm_normal);
surface_reset_target();

Draw(绘制)事件:

1
draw_surface(surf1, 0, 0);

Destroy(销毁)事件:

1
2
3
4
if (surface_exists(surf1))
    surface_free(surf1);
if (surface_exists(surf2))
    surface_free(surf2);

bm_normal 对表面的腐蚀

回顾一下,bm_normal 是 GM8 在正常状态下的默认混色模式,其本质是 (bm_src_alpha, bm_inv_src_alpha) 的混色因素,也就是:

1
2
3
4
Ro = Rs * As + Rd * (1 - As)
Go = Gs * As + Gd * (1 - As)
Bo = Bs * As + Bd * (1 - As)
Ao = As * As + Ad * (1 - As)

注意最后一行计算 Ao 时的公式。

如果绘制双方的透明度都是 255,即都是完全不透明的,在公式中 As = Ad = 255 / 255 = 1,因此 Ao = 1 * 1 + 1 * 0 = 1,得到的混合透明度也是 255。

但是如果 source 是半透明的情况下,假设 As = 0.5,Ad = 1,此时 Ao = 0.5 * 0.5 + 1 * (1 - 0.5) = 0.75,输出也是半透明。在 GM 的窗口中,由于强制设置绘制的透明度为 1,因此在 bm_normal 下,我们绘制半透明的图像,和背景混合之后的透明度仍然为 1。但是在表面中,透明度保持其计算结果,我们称这种情况是 bm_normal 对表面的腐蚀。这种腐蚀会产生什么后果呢?他会让 screen_redraw() 函数重绘到表面上时带有一定的透明度。

要想理解其危害,首先我们要假设如果不存在这种腐蚀bm_normal 画在表面上也是完全不透明的,那么我们在上文中制作放大镜时就完全可以使用 (bm_dest_alpha, bm_zero) 的混色因素了,这个混色因素很好理解,取圆圈的透明度 255 加上屏幕的颜色,得到圆圈形状的屏幕部分,再让圆圈乘 0 以此去掉圆圈,这样不管圆圈是什么颜色,都是无所谓的。而事实上,我们在制作放大镜时,却必须要使用纯黑色的圆圈,以及 (bm_dest_alpha, bm_inv_src_alpha) 这个一眼看上去有点莫名其妙的混色因素。这就是 bm_normal 腐蚀表面带来的后果,如果你使用 (bm_dest_alpha, bm_zero) 来制作放大镜,那么半透明的图像通过 screen_redraw 绘制到表面上,使得表面带有透明度,再通过 (bm_dest_alpha, bm_zero) 时,透明度不变,这样就使得放大镜中绘制了半透明图像的地方也是半透明的,出现了“透视”,可以看到放大镜后面的东西。

那么黑色圆 + (bm_dest_alpha, bm_inv_src_alpha) 是怎么抵消掉 bm_normal 的腐蚀呢?首先我们来看看这个混色因素的公式:

1
2
3
4
Ro = Rs * Ad + Rd * (1 - As)
Go = Gs * Ad + Gd * (1 - As)
Bo = Bs * Ad + Bd * (1 - As)
Ao = As * Ad + Ad * (1 - As)

我们知道,黑色圆的非透明部分是 (0, 0, 0, 255),伸缩到 0~1 则是 (0, 0, 0, 1),带入可得到:

1
2
3
4
Ro = Rs * 1 + 0 * (1 - As) = Rs
Go = Gs * 1 + 0 * (1 - As) = Gs
Bo = Bs * 1 + 0 * (1 - As) = Bs
Ao = As * 1 + 1 * (1 - As) = 1

可以看到,无论原本的透明度是多少,Ao 的计算结果一定是 1,也就是一定完全非透明。而 output 的 RGB 和 source 的 RGB 是一模一样的。

而对于黑色圆的透明部分(即超出放大镜边界的表面部分)则是 (0, 0, 0, 0),带入可得

1
2
3
4
Ro = Rs * 0 + 0 * (1 - As) = 0
Go = Gs * 0 + 0 * (1 - As) = 0
Bo = Bs * 0 + 0 * (1 - As) = 0
Ao = As * 0 + 0 * (1 - As) = 0

就是纯透明了,会正常显示屏幕的内容。

同样的,在示例“电磁波干扰”中,我们在 draw 事件中使用 (bm_one, bm_zero) 也是这个原因。只不过相比于放大镜而言,电磁波干扰要简单很多,因为放大镜只放大部分区域,其他区域仍要显示屏幕的正常内容,而电磁波干扰只需要绘制完成的表面就行了,完全不需要再考虑屏幕中原本的内容,因此使用 (bm_one, bm_zero) 直接将屏幕原本的内容完全抹消掉即可,透明度就可以直接依靠 GM8 的窗口强制置 1 来解决。

关于如何使用 shader 来避免表面腐蚀,可以参考 V 神的文章:详解 GameMaker 表面混色奇怪的原因