关于侧边阶梯区域
相关插件
插件本体:
◆Drill_LayerStairArea 图块 - 侧边阶梯区域
侧边阶梯分为▂▅▇从左往右上楼 和 ▇▅▂从右往左上楼,
并且分别占用了R区域14和15,
R图块占用可以去看看“26.图块 > 关于插件与图块R占用说明.xlsx”。
名词索引
以下你可以按住ctrl键点击下面的词,可以直接定位到想了解的名词:
侧边阶梯区域 | 侧边阶梯 阶梯▇▅▂ 阶梯▂▅▇阶梯的阶数 并列的阶梯 相连的阶梯 |
图块细节 | 区域判定 阻塞关系 |
阶梯画法 | R图块规则 图块填涂方法 图块素材画法 |
侧边阶梯区域
定义
侧边阶梯: 指左右侧面的阶梯的结构,分为▂▅▇从左往右上楼 和 ▇▅▂从右往左上楼。
侧边阶梯包含 普通图块(阶梯的样子)和 R图块(阶梯的功能)。
玩家、事件都能在阶梯上进行自由移动。
阶梯▂▅▇: 即从左往右上楼的阶梯。
阶梯▇▅▂: 即从右往左上楼的阶梯。
阶梯与图块: 阶梯能够给玩家"高度感"的错觉,而实际上整个游戏仍然为平面图块。
游戏操作与玩法
1)阶梯的阶数
阶梯的阶数: 指阶梯的横向长度,与R图块绘制有关,会影响物体移动的高度斜率。
玩家、事件移动时,都能受到阶数而影响所在高度,如图中的红线部分。
一阶阶梯即横向长度为1的阶梯,如下图。
二阶阶梯即横向长度为2的阶梯,如下图。
三阶阶梯即横向长度为3的阶梯,如下图。
S方框(start)表示进入阶梯区域的图块,
E方框(end)表示离开阶梯区域的图块。
蓝色箭头为小爱丽丝的实际移动位置。
红色线路表示小爱丽丝的移动过程的高度变化。
阶梯的结果是使得Y轴的坐标向上多走1图块。由蓝色箭头可知,在到达阶梯区域终点前,小爱丽丝Y轴实际坐标都不变,终点时才-1。 |
阶梯R图块规则见:1)规则 - 阶梯的阶数 。
2)并列的阶梯
并列的阶梯: 指并列绘制的相同阶数的阶梯,玩家、事件在并列阶梯间可以上下移动。
并列的阶梯可以纵向画任意宽度。
阶梯R图块规则见:2)规则 - 并列的阶梯 。
3)相连的阶梯
相连的阶梯: 指相同阶数的阶梯相连,以实现的多阶层变换的移动。
玩家、事件能在相连的阶梯之间无缝移动。
阶梯R图块规则见:3)规则 - 相连的阶梯 。
注意,设计图块触发判定时,要注意蓝色箭头,以及事件所处的Y轴位置变化。
游戏硬性机制
1)阶梯上禁止跳跃
阶梯区域与禁止跳跃区域 是等价的,既不能跳入,也不能在禁跳区域上跳跃。
(从真实角度来说:阶梯上乱跳会摔断腿。)
(从脚本角度来说:脚本底层处理跳跃极为麻烦,跳跃时高度有难以解决的错位问题,无奈只好禁跳。)
2)不能上下方向进入阶梯区域
阶梯区域和普通地面被分割成两部分,上下方向 进入/离开 的路口都是不可通行的。
(红色表示墙壁)
3)飞行的物体不受影响
飞行的物体,不会因处于阶梯区域而改变高度。
与其它能力组合
1)阶梯上推箱子
从原理上说,阶梯和滑坡的区别并不大(见 区域判定 )
所以,箱子事件可以被推上阶梯。
但是注意,箱子处于对角位置时,如果用下面的纯事件指令,推动会出现偏差。
使用下面的改进写法,就可以避免。
2)阶梯上放炸弹
阶梯上可以放置炸弹,但注意炸弹爆炸后,爆炸位置和判定捕获位置会有偏差。
3)阶梯上举花盆
可以边举着花盆边上阶梯,并且在阶梯上还可以扔花盆。
(扔花盆也会产生高度偏差,不过没有玩家跳跃的偏差严重)
4)阶梯与光滑图块
你可以使用R图块,设置同时具有 光滑地面+阶梯 的图块。从而做出可滑行的斜坡。
图中是直接滑上去的,由于暂时没有准备滑坡素材,所以阶梯看起来有些突兀。
图块细节
区域判定
网格区域移动的机制是固定的。举个例子,小爱丽丝从图块A移动到图块B。 |
因此,类比一下二阶阶梯的位置判定,如下图;
S点开始移动时,小爱丽丝已经处于1点的位置。
1点开始移动时,小爱丽丝已经处于2点的位置。
2点开始移动时,小爱丽丝已经处于E点的位置。
阻塞关系
1)阶梯死角
以阶梯▂▅▇为例,右侧往左侧进入时,相当于从阶梯底下钻上来,这是不被允许的,因此这个方向在程序中判定为不可通行。
在并列的阶梯中,死角只有最下方有。
2)阶梯最高顶角
由于阶梯死角不可通行,因此阶梯的最高顶角的必须要可通行,不然路全阻塞了就走不动了。
而阶梯顶角占用的位置不是阶梯区域,所以还要阻止上方进入,以及右方进入。
3)对角移动穿透
正常地面中,如果对角移动,上方向和右方向阻塞,那么事件无法通过。
而在阶梯区域中,此穿透是被允许的。
所以你不用担心和你并排走的小爱丽丝会因阻塞而停下脚步。
4)阶梯与阻塞完整关系
结合上述的关系,绘制R图块后,完整阻塞情况如下图:
这些阻塞为绘制R图块在插件中自动形成,你不需要考虑给图块额外加阻塞。 |
其它细节
1)阶梯上的强制跳跃
阶梯上禁跳,但强制跳跃可以无视所有地形因素,直接跳跃到目的地。
也就是说,阶梯区域无法阻止强制跳跃。
但不建议用强制跳跃在阶梯上玩家或事件去跳。
2)触发与事件
根据前面的 区域判定 介绍,虽然事件在阶梯上产生了一个“高度”,但其实际的位置仍然在脚下的图块。
下图的蓝色箭头就是真实所在图块位置,注意编辑器中摆放的事件位置。
因此,使用触发捕获时,要注意实际影响的 位置。
3)鼠标操作的反复移动bug(已解决)
旧版本中,在阶梯上使用鼠标移动,经常会出现 上下或左右 不停的死循环移动,这是正常现象。
新版本已经解决了此问题。
阶梯画法
R图块规则
1)规则 - 阶梯的阶数
你可以绘制一阶、二阶、三阶的阶梯。
甚至四阶、五阶,最高可以绘制八阶。
但是,由于阶数越多,阶梯看起来越平坦,这种情况下的”阶梯”的已经意义不大了。
2)规则 - 并列的阶梯
并列的阶梯可以纵向画很多相同阶的阶梯。
但注意,必须相同阶的才可以并列,不同阶的画在一起会出现高度错位问题。
由于并行的阶梯的纵向宽度不一样,阶梯图块填涂也需要使用一些特殊组合方法,可以看看后面章节 二阶阶梯 方法:图块填涂方法 。 |
3)规则 - 相连的阶梯
相连的阶梯绘制方法如下图,可以使得两个楼梯之间连起来。
同样,相连的阶梯可以多个并列绘制。
不同阶的阶梯可以相互连接,(旧版本不能连接,但现在的版本可以)
只是看起来很奇怪,所以不建议这样做。
4)必须画为 整块长方形
根据前面的三个规则可知,不要绘制不规则的阶梯区域,凹凸不平、中间有空洞、十字架形状等,都不要画。
即使是 并列+相连 的阶梯,也要按照其 阶数规律 来画,而不是随意画。
5)▂▅▇ 和 ▇▅▂ 不建议连在一起
不同的侧边阶梯如果强制设置,可以连一起。(旧版本不能连接,但现在的版本可以)
但是移动判定和实际操作会比较反常识,所以不建议这样连。
6)不要把道路封死
注意,红色为阶梯区域自动封死的路线,而黄色需要你手动用透明墙封死。
但注意阶梯接口处,不要错封了。
详细介绍见章节:2)图块的可通行性 。
7)添加禁跳区域
由于阶梯移动、寻路都必须可通行,不能封死,
所以阶梯上方的图块都需要为可通行状态,玩家向图块移动后才会自动进入到阶梯区域。
但是,玩家可以通过特殊方法进入阶梯的上方图块中,比如跳跃,跳进去之后不会卡住,只是在图块判定上有点不合理,所以最好加上禁跳区域。
图块填涂方法
注意,此处只详细讲解 二阶阶梯 的图块画法,(阶数介绍可见:1)阶梯的阶数)如果你考虑其他阶的图块,此处没有相关教程,只能自己摸索去画。 |
1)图块的规划
为了规范化,作者我将 阶梯与斜坡,放在了 E的位置。
并且左边是 阶梯▂▅▇,右边是 阶梯▇▅▂ 。
其中一侧的阶梯,占12个图块。
其中9个图块为常用图块,剩下的3个为备用图块。
备用图块中放一些阶梯图块的特殊情况。
斜坡的 间隔方格子,会存在相反颜色的情况。
如右图,单一图块的填涂,方格子是长条形的,所以需要两个图块交叉填涂。
2)图块的可通行性
前面章节 阻塞关系 讲解了R图块自动封路的情况,如下图。
普通图块就不需要考虑这些封路情况了,
只要确保所有阶梯都是可通行的即可。
在最顶角位置,最好 在四方向中 加三个阻塞。
你也可以不加,因为插件允许玩家从上方图块走到阶梯上来,但加一下最好。
3)24像素宽的阶梯
先准备好平台。
使用图中的三个图块,可以绘制如下图。
无墙的阶梯需要另外组合,如下图。
在模拟世界图块中,也同理。
由于24像素的图块太窄,一般很少用到。
4)48像素宽的阶梯
先准备好平台。
使用图中的四个图块,可以绘制如下图。
无墙的阶梯是 常用阶梯,因为这类阶梯的组合都正好1个图块,48像素宽。
同理,在模拟世界图块中绘制如下图。
图中的斜坡有些太薄了,你可以使用墙壁与阶梯进行组合使用,
可以见后面章节 7)与墙壁组合的阶梯。
5)72像素宽的阶梯
先准备好平台。
使用图中的五个图块,上面两个注意是交叉填涂,可以绘制如下图。
不过,此方法在在模拟世界图块中,就有问题了,因为是方片交错。
改为下面五个图块即可绘制。
6)96像素宽的阶梯
先准备好平台。
此方法与 48像素图块一样,只不过多了个中间过渡的阶梯图块。
使用图中的五个图块,可以绘制如下图。
在模拟世界图块中,涂的效果如下图。
其中图形发生了紊乱,但仔细一看,只有一个图块反了。
把图块改成备用中的那个反向图块,就可以了。
7)与墙壁组合的阶梯
前面章节提到了不同宽度的阶梯。
其中有无墙的阶梯图块。
这样设计是为了方便与墙壁组合。
如下图,先在空白位置画一个完整的墙壁。
然后按住shift,先画墙壁,再在墙壁上面画阶梯,就形成了组合的效果。
模拟世界的图块也一样。
8)错误的画法
注意,无论上述那种宽度的阶梯,所有图块的阶梯必须确保 紧贴图块底部 。
如下图,阶梯的底部 与 图块的底部贴合,并且与 R图块15 的底部贴合。
有时候你可能会错误画出下面的这种情况,
(只有24像素和72像素不能被48整除的图块才有这情况)
下图这样的阶梯走不动,四处阻塞。
因为R图块和 普通图块的可通行关系 没有正确贴合。
画完图块和R图块后,都要手动去测试一下阶梯是否完整,这样才知道对不对。 |
图块素材画法
1)图块素材的规划
要画图块素材,主要图块有9个,剩下的3个为备份图块。
下面给这九个图块编号,
1和4, 5和8, 7和9,
是完全一样的楼梯,区别只在于有墙与没墙。
你可能会觉得排布有些不合理,
但由于452和78+23 太常用了,
所以作者这里我以常用的方式排布楼梯图块,而不是样式并排,所以显得有些不规则。
如果你不会画楼梯,拿示例中 楼梯图块和斜坡图块 改色也可以。详细可以看看 从零开始设计 的章节:7. 图块素材变色 。 |
2)24像素/48像素比例设计
打开ps,这里作者我开了48像素的网格,与24像素的子网格。
如下图的斜坡素材,
边缘必须满足24像素与48像素的左右交界。
而阶梯可以稍微宽一点,比如 向上高8像素或向下低8像素。
由于1号和4号的台阶不能高出1个图块,
所以四个台阶必须妥协压低或者抬高。
3)弱化瑕疵 - 阶梯与图块的边缘
图块绘制时,会存在一些无法避免的瑕疵。
比如绘制阶梯中,细看你会发现2号阶梯位置有1像素的缺失。
这是为了照顾4号阶梯只有一个独立图块时的情况,所以提前封住亮边了。
由于出现了1像素的偏差,
因此在画楼梯时,不要用左图的黑白明显的对比色,
要用画阶梯的相似颜色(如青色+蓝色),这样瑕疵就不明显了。
4)弱化瑕疵 - 斜坡的阴影
图块绘制时,会存在一些无法避免的瑕疵。
比如绘制斜坡时,5号斜坡位置的阴影,缺了一个角。
缺这个角是为了兼容画右图的多斜坡时,
红色方块区域的左上角不会出现明显的黑色阴影块。
5)弱化瑕疵 - 相反的备用色块
图块绘制时,会存在一些无法避免的瑕疵。
如下图,如果只用一种斜坡块,画出来的是长方形。
为了画出正方形,必须提供相反的色块,放在备用区用于绘制。
如果你画的是自己设计的阶梯或斜坡素材,且在游戏测试时发现瑕疵非常明显,可以通过 使用相近颜色、加备用图块 的方法,去弱化瑕疵。 |
从零开始设计(DIY)
配置一个阶梯的图块与R图块
1. 设置一个目标
侧边阶梯区域插件在2021年6月6日,看群友推荐的《东方夜雀食堂》找到的灵感。
这个游戏很多图块都像现在编辑器里的,唯独那个楼梯不像,而且npc是真的可以上楼,而不是摆设。ヽ(#`Д´)ノ是时候作者我来写插件改变这一切了。
2. 结构规划/流程梳理
根据前面章节 4)48像素宽的阶梯 和 7)与墙壁组合的阶梯 的介绍,
阶梯图块可以自定义各种形式的填涂,要制作类似的并不难。
由于示例中是系统空间的图块,对于常规游戏编辑器的素材,画风差异很大。
所以这里作者我以 常规图块 为例子,画一个常规的侧边阶梯。
3. 添加图块
将示例中的E类图块,添加到常规图块中。
你也可以将楼梯和斜坡部分通过ps剪切下来,拼接到其他的图块素材中。
配置图块后,要记得加上四方向的阻塞。
如下图的六个红色箭头不可通行即可。
阻塞详细介绍可以见前面章节:阻塞关系
4. 绘制图块
下面,先画树、草地和城墙。
如下图,阶梯占四个图块,所以需要先将墙壁调整一下。
铺上楼梯即可。
5. 绘制R图块
由于阶梯的宽度为1图块,所以绘制R图块如下图(15),
上部分还需要涂上禁跳区域(8)。
详细介绍可以见前面章节:R图块规则 。
6. 测试阶梯与阻塞情况
进入游戏,检查一下楼梯的可通行情况。
这里发现楼梯可以这样走,这样走不合理,需要手动加一个透明墙。
7. 图块素材变色
完成上述内容后,下面只剩下突兀的楼梯图块了。
打开ps,点击“图像 》 调整 》 黑白”。
黑白设置中,有个色调功能。
可以在变黑白之后,再染色新的颜色。
由于城墙和草木图块是以黄色绿色为主,因此这里给黑白的楼梯加上黄色。
变色之后,可以看到突兀感降低了许多。
当然,如果你能自己画最好,画楼梯可以去看看:图块素材画法 。
常见问题(FAQ)
图块素材画出来不完美
问题名称 | 图块素材画出来不完美 |
问题图示 | 有群友在画阶梯素材的时候,发现了突兀的细节:![]() |
问题描述 | 图块边缘少了一条描边线。 |
原理解析1 | 没错,这个瑕疵就是因为48x48图块单独绘制而造成的。其实你仔细观察 示例的素材,你也会发现不对劲的细节。![]() ![]() |
原理解析2 | 这1像素的小凸起是故意画的。因为要兼容一个单独楼梯的情况,所以只能提前闭合亮边缘。![]() ![]() |
解决方案 | 无法解决小凸起问题,只能使用相近颜色来减弱突兀感。不要用左图的黑白明显的对比色,要用画阶梯的相似颜色(如青色+蓝色),就不容易看出来了。(这1像素的瑕疵,只要不明显,大部分玩家都注意不到的)![]() ![]() |