多层组合装饰（界面装饰-地图界面）


以一个地图界面的装饰为例，如下图（对话框管理层），除了地图背景始终跟随玩家镜头移动（位移比1），还有几个地图魔法圈控制线和球旋转。由于图块是透明的，所以能看到下层装饰背景和魔法圈。

地图界面设计

配置方法

1）插件参数配置

地图的装饰插件，打开参数配置即可配置。

配置时，需要绑定所属地图。

地图id在编辑器的下方可以看到。

背景1、2、3之间相互独立，只在图片层级相同时，才会影响装饰的先后顺序，

但你可以直接修改 2）图片层级来控制先后顺序。

插件参数可以直接复制，如果你的配置挤在一起要分开，

可以复制，然后粘贴到其他的地方。

2）标签说明

由于你需要配置大量背景内容到相应的插件中，你不能一次性看见全部内容，这里用标签来进行区分。标签不作用在插件中，只是在配置的时候方便查看。

如果标签名长了，你可以拖拽下面两个竖线，把值拉开查看。

地图层级

1）层级介绍

地图界面分为五层，下层、中层、上层、图片层、最顶层。

如果要让远景看起来真的像 ”远景”，那么应该设置位移比接近1.00的图层，越接近1.00越远。具体可以看后面章节：位移比设计。

对话框在图片上面，如果你想让图片放上面，可以用下面的插件修改层级：

◆Drill_PictureLayerAndZIndex 图片 - 层级与堆叠级

（图片层级也称”堆叠级”，可以去看”0.基本定义 > 界面.docx”的层级与堆叠级章节）


游戏中还存在一个特殊的层级：天窗层。此层级比最顶层还高，在该层级中能够使用动态屏幕快照。详细可以去了解下文档：“`1.系统 > 大家族-屏幕快照.docx`”

2）图块与行走图

以多层地图背景为例。

如果你设置了背景在中层，你会发现背景可能会切割图块画的树木。

这是因为图块实际上有两层：图块层、星号图块层。

星号图块层能够挡住事件，也在中层的上面。

所以看起来好像背景切割了树木、山顶。

位移比设计

位移比： 是指地图活动镜头移动时，地图各个装饰贴图跟随镜头一起移动的距离比。通过位移比可以实现不同图层之间的距离感。


根据近大远小的关系，物体离你越远，物体越小，并且你移动画面时，也一直紧跟着你的镜头。位移比越接近1，物体越远。


可以参考火车，火车上的窗户就是镜头，你坐在火车上通过窗户看太阳、房屋、树木。火车移动时，树木位移比0.0，所以树木瞬间从镜头面前一闪而过（因为火车速度很快，而树木不会跟随火车移动）；房屋位移比0.5左右，没有完全跟着镜头；太阳位移比几乎为1.00，因为你在哪里太阳都不为所动，可以理解为太阳始终跟着镜头移动。

可以参考火车，火车上的窗户就是镜头，你坐在火车上通过窗户看太阳、房屋、树木。火车移动时，树木位移比0.0，所以树木瞬间从镜头面前一闪而过（因为火车速度很快，而树木不会跟随火车移动）；房屋位移比0.5左右，没有完全跟着镜头；太阳位移比几乎为1.00，因为你在哪里太阳都不为所动，可以理解为太阳始终跟着镜头移动。

1）位移比0.0时

蓝色的圈为其中一个背景，镜头向右移动时，背景不会跟随镜头移动。

2）位移比1.0时

蓝色的圈为其中一个背景，镜头向右移动时，背景跟随镜头同步移动。

3）位移比小于1.0,但是接近1.0时

比如0.70、0.80、0.90等位移比，镜头向右移动时，

蓝圈会跟随镜头向右移动，但是位移速度慢于镜头。

4）位移比大于1.0,但是接近1.0时

比如1.10、1.20、1.30等位移比，镜头向右移动时，

蓝圈会朝反方向（向左）移动，位移速度慢于镜头。

（与0.90、0.80、0.70距离一样，只是方向反了）

5）对话框管理层的参考点问题

对话框管理层中，有4个魔法圈，分别表示星球和卫星。

如何设置位移比是个问题，要模拟一下情景关系。

经过情景会发现，

圆圈一开始所在的位置，都是固定的图块偏移位置。

圆圈从三维角度上，距离玩家非常远。（所以位移比要接近1）

接近圆圈，圆圈就会接近自己，远离圆圈，圆圈就会远离自己。

也就是说，镜头移动的方向与圆圈的移动方向是 相反的。

所以，位移比取值在小于1.0且接近1.0 的范围。


眼睛：会了，脑子：这很简单，手：你俩胡说！作者我在这里模拟情景的时候被绕晕了很久，你一定要自己动手试试才能明白哦。

扩展效果

动态遮罩

地图界面能够配置动态遮罩。

动态遮罩结构较为复杂，具体可以去看看： “1.系统 > 大家族-动态遮罩.docx”。

动态遮罩中，含有动态遮罩板和透视镜的设置，透视镜能够在动态遮罩板中自由移动。

预加载

地图装饰插件可以设置预加载。

预加载一般用于游戏中多次、反复使用的贴图，

比如平铺GIF的动画转场用的贴图。

但是注意，并不是所有装饰贴图都要配置预加载。

预加载会使得贴图创建后一直占着内存，直到游戏关闭才释放内存。

具体去看看： “1.系统 > 关于预加载.docx”。

数据更新与旧存档

地图装饰插件中，提供了存储功能的开关。

开启/关闭都能正常使用插件，只不过有部分区别。


开启则当前所有背景层配置会一起存入存档中，但这会造成旧存档数据不同步的问题。关闭则只使用插件中配置的参数数据，但插件指令对透明度、移动速度的修改都只能临时有效，读取存档后失效。

下图这些数据通过插件指令修改后；

若开启存储功能，则修改永久有效；若关闭存储功能，则只临时有效。

具体介绍与定义先去了解一下“21.管理器 > 数据更新与旧存档.docx”。


注意，这里提及的是插件配置与旧存档的关系。如果你直接更新了插件，旧存档赶紧删了。更新插件相当于数据底层变动，而数据底层变动对旧存档影响是无法预估无法控制的。

特殊插件

插件 - 数字雨

数字雨是只属于地图界面的特殊功能插件。

◆Drill_LayerParticleRain 地图 - 多层地图数字雨

1）雨滴结构

数字雨的结构有三层：数字雨、雨滴、字符粒子。

一长串字符粒子形成单个雨滴。

C:sersdministratorppDataoamingencentsers355126171QinTempichOle8LVQJ@D(%WXGG6MBNMXXRWF8NKD6($K.png

$C:sersdministratorppDataoamingencentsers355126171QinTempichOleP4XQO_61JW4(T3GUB24N{4.png$

多个雨滴形成数字雨。

![C:\Users\Administrator\AppData\Roaming\Tencent\Users\1355126171\QQ\WinTemp\RichOle\6MEG(KK45L@`85RILB((N]A.png](./images/多层组合装饰（界面装饰-地图界面）/多层组合装饰（界面装饰-地图界面）-033.png) C:sersdministratorppDataoamingencentsers355126171QinTempichOle5)~V[)1(LOI6NA]{@LUN81.png

不同类型的雨滴，分别在不同的数字雨中配置。

![C:\Users\Administrator\AppData\Roaming\Tencent\Users\1355126171\QQ\WinTemp\RichOle\X0OC{]0K8}T29%RSXYLB)M7.png](./images/多层组合装饰（界面装饰-地图界面）/多层组合装饰（界面装饰-地图界面）-035.png) ![C:\Users\Administrator\AppData\Roaming\Tencent\Users\1355126171\QQ\WinTemp\RichOle\FBF3OB1K[G8(6HNCULM6OU.png

2）参数数字划分

数字雨不基于参数数字核心，但是字符的划分方式与参数数字是一样的。

（参数数字核心的划分，可以去看看 “1.系统 > 关于参数数字.docx”）

如下图，基本符号对应 0123456789+=*/ 扩展符号对应：abcdefghijklmn

C:sersdministratorppDataoamingencentsers355126171QinTempichOle}QJJ}~TWJJMPPWLDB35BIF9.png

3）雨滴方向

与粒子设置类似，如果你设置为从左侧出现，那么最好要设置雨滴向右移动。如果填反了，将看不见任何雨滴。左侧出现，向右移动如下图：

![C:\Users\Administrator\AppData\Roaming\Tencent\Users\1355126171\QQ\WinTemp\RichOle\RXET)]UVF(6TOGA62}(GTUH.png](./images/多层组合装饰（界面装饰-地图界面）/多层组合装饰（界面装饰-地图界面）-039.png)

![C:\Users\Administrator\AppData\Roaming\Tencent\Users\1355126171\QQ\WinTemp\RichOle\FBF3OB1K[G8(6HNCULM6OU.png

上侧出现，向下移动如下图：

![C:\Users\Administrator\AppData\Roaming\Tencent\Users\1355126171\QQ\WinTemp\RichOle\T8YID(D`5G[VI_U%@AEU0R.png

C:sersdministratorppDataoamingencentsers355126171QinTempichOle@GO9T6BCZUU2OMELP`DK5@5.png

从零开始设计（DIY）

设计一张地图的远景

1. 设置一个目标

2018年9月19日，作者我写了两个最早的插件，（示例v1.13）

其中一个就是多层地图背景插件（那个时候还不叫这个名字）。

那个时候的地图有设计三重方形变换的背景效果。

但因为后来的地图修改与建设，这个设计被弃用了。

所以这里以一个新工程为例子，设计三重方形变换的背景效果。

2. 结构规划/流程梳理

用到了下面的插件：

◆Drill_LayerGround 地图 - 多层地图背景

这里提及一下默认的远景设置。

默认远景仅仅靠一张单图来移动，这个单图没有镜头的位移比效果。

也就是说，如果你想要实现位移比的近大远小的效果，配置远景实现不了。

3. 工程建立

首先新建一个工程，

然后修改第一个地图宽度，这样就会多出空白图块。

空白图块能看到下层的地图背景。

4. 配置背景

配置背景前，可以先了解下配置技巧：配置方法。

添加多层背景插件，然后建立一个新背景。

配置透明的方块资源，使背景透明。

（你也可以配置不透明的背景，然后修改透明度）

需要设置背景所属的地图。

背景X速度/Y速度，与横向循环/纵向循环是一样的，而且XY速度可以填小数。

地图层级默认为下层，

注意，不透明的平铺远景不要放其他层级，会产生遮挡。

位移比设为0.00，表示背景不受镜头影响

5. 多个背景叠加

配置一个背景后，复制背景。

由于资源图片是透明的，所以可以叠加多层。

设置三个背景，x速度和y速度分别为：0.5，1.0，1.5。

6. 测试背景

在游戏中测试，可以看到方块被叠加了三层。

7. 细节调整

1）插件指令修改

地图背景插件可以修改部分移动属性。背景id，对应配置的id。

需要注意的是，地图背景的属性可以跨地图修改，并且修改属性后永久有效。

2）位移比设计

上述教程中，位移比都是0.00，即背景完全不受镜头移动影响。

位移比的介绍可以看看章节：地图界面 - 位移比。

添加一定的位移比，可以增加远景的距离感。

8. 示例中可参考对象

体积管理层中，只用到了多层地图背景的插件配置：

经过五层背景+位移比效果控制，在角色移动时，能明显感受到近大远小的距离感。