多层组合装饰（界面装饰）
相关插件
装饰插件有很多，分为下面两大类：
界面装饰插件 （当前文档讲解）
界面装饰插件，根据不同界面，又分为下面的文档：
17.主菜单 > 多层组合装饰（界面装饰-菜单界面）.docx
17.主菜单 > 多层组合装饰（界面装饰-地图界面）.docx
17.主菜单 > 多层组合装饰（界面装饰-天窗层）.docx
17.主菜单 > 多层组合装饰（界面装饰-战斗界面）.docx
名词索引
以下你可以按住ctrl键点击下面的词，可以直接定位到想了解的名词：
| 界面装饰 | 装饰效果简介 装饰设计思路 装饰配置难度 |
| 界面的属性 | 游戏分辨率菜单/标题层级 地图层级 战斗层级 天窗层图片层级/堆叠级 |
| 装饰的属性 | 背景 粒子 魔法圈 GIF 平铺GIF 视频 |
界面装饰插件
界面装饰插件：指专门用于装饰 游戏界面 的插件。
| | | | | |
| ---------- | ---------------------------------- | --------------------------------- | ------------------------------------- | ----------------------------------- | ---------------------------------------------------- |
| | 菜单 | 地图 | 战斗 | 菜单+地图+战斗 |
| 装饰对象 | 标题界面 | 菜单界面 | 地图界面 | 战斗界面 | 游戏窗体 |
| 背景 | Drill_TitleBackground多层标题背景 | Drill_MenuBackground多层菜单背景 | Drill_LayerGround多层地图背景 | Drill_BattleBackground多层战斗背景 | Drill_HtmlDynamicSnapshotBackground天窗层的多层背景 |
| 粒子 | Drill_TitleParticles多层标题粒子 | Drill_MenuParticles多层菜单粒子 | Drill_LayerParticle多层地图粒子 | Drill_BattleParticle多层战斗粒子 | 暂无 |
| 魔法圈 | Drill_TitleCircle多层标题魔法圈 | Drill_MenuCircle多层菜单魔法圈 | Drill_LayerCircle多层地图魔法圈 | Drill_BattleCircle多层战斗魔法圈 | Drill_HtmlDynamicSnapshotCircle天窗层的多层魔法圈 |
| GIF | Drill_TitleGIF多层标题GIF | Drill_MenuGIF多层菜单GIF | Drill_LayerGif多层地图GIF | Drill_BattleGIF多层战斗GIF | Drill_HtmlDynamicSnapshotGif天窗层的多层GIF |
| 平铺GIF | Drill_TitleTiledGif多层标题平铺GIF | Drill_MenuTiledGif多层菜单平铺GIF | Drill_LayerTiledGif多层地图平铺GIF | Drill_BattleTiledGif多层战斗平铺GIF | Drill_HtmlDynamicSnapshotTiledGif天窗层的多层平铺GIF |
| 视频 | Drill_TitleVideo多层标题视频 | Drill_MenuVideo多层菜单视频 | 无(用处最低，还会卡顿) | Drill_BattleVideo多层战斗视频 | 无 |
| 特殊 | 无 | Drill_MenuBackButton返回按钮 | Drill_LayerParticleRain多层地图数字雨 | 无 | Drill_HtmlDynamicSnapshotSprite天窗层的动态快照 |
| 环绕球 | 无（无法装饰界面） | 无（无法装饰界面） | 无（无法装饰界面） | 无（无法装饰界面） | 无（无法装饰界面） |
个体装饰插件
个体装饰插件：指专门用于装饰 具体个体 的插件。
| | |
| --------------------------- | ------------------------------------- | ---------------------------------------- | ----------------------- | ------------------------- |
| | 单个贴图对象（非界面） |
| 装饰对象 | 动画 | 行走图 | 图片 | 敌人 |
| 粒子 | Drill_AnimationParticles多层动画粒子 | Drill_EventFrameParticle多层行走图粒子 | 暂无 | MOG_AuraEffectmog粒子效果 |
| 魔法圈 | Drill_AnimationCircle多层动画魔法圈 | Drill_EventFrameCircle多层行走图魔法圈 | 暂无 | 暂无 |
| gif | Drill_AnimationGIF多层动画GIF | Drill_EventFrameGIF多层行走图GIF | 暂无 | 暂无 |
| 环绕球 | Drill_AnimationSurround多层动画环绕球 | Drill_EventFrameSurround多层行走图环绕球 | 暂无 | 暂无 |
| 特殊 | 无 | 暂无 | 暂无 | 暂无 |
| 背景平铺GIF视频 | 无 （无法装饰单个对象） | 无 （无法装饰单个对象 | 无 （无法装饰单个对象） | 无 （无法装饰单个对象） |
（如果你会用live2d、spine等美术软件制作多张的gif帧动画，那么多层gif插件将会极大地增强你的游戏画面效果。）
思维导图
多层组合装饰的思维导图如下：（调整一下word右下角的缩放率，可以看清小字）
界面装饰
装饰效果简介
1）菜单界面
菜单界面的装饰如下图。
红色为菜单魔法圈，紫色为菜单粒子，黄色为菜单背景（扫描线背景和箭头背景）。
背后的网格也是菜单背景。
2）标题界面
标题界面的装饰如下图。
包含标题粒子、标题背景、标题魔法圈，以及圆圈形状的标题GIF。
网址按钮是另一个单独的插件，标题GIF只是装饰按钮用。
3）地图界面
地图界面的装饰如下图（对话框管理层）。
地图背景始终跟随玩家镜头移动(位移比1.0)，然后几个地图魔法圈控制线和球旋转。
由于图块是半透明的，所以能看到下层装饰贴图。
4）战斗界面
战斗界面的装饰如下图（敌群:空间(变化)示例）。
两个旋转战斗魔法圈，左下方的变化菱形为战斗GIF，其他都是平移的战斗背景。
战斗背景是常用功能，通过控制不同的位移比还能形成空间感效果。
5）天窗层的装饰
天窗层的装饰如下图。
包含：斜切的动态快照、GIF实现的表情包、魔法圈实现的弹痕。
装饰能跨 地图+战斗+菜单 界面。
装饰设计思路
1）菜单界面设计
菜单界面主要体现的是 面板、菜单 的性质。
主菜单是一个数据显示平台，数据越多，越显得游戏精密。
但默认的主菜单没那么多数据，所以需要使用 各种装饰 显得主菜单内容很多。
如果你想重新设计主菜单，建议先把主菜单的功能部件决定好，比如画一个静止的菜单面板框架作为参考方案。确认框架后，再配置插件，最后才补充装饰。
》最初的菜单
简单的背景和角色数据，用于体现 蓝色、科技 的核心主题。
》装饰后的菜单
为了进一步体现主题，添加了很多装饰，如下图。
（这些贴图没有任何实际意义，只是都在菜单界面中移动，看起来图像精密复杂而已）
| 可变的菜单菜单背景提供了 显示与隐藏 插件指令功能。你可以自己绘制两套或多套不一样风格的菜单，然后根据游戏中的情况，控制修改背景、粒子、魔法圈的显示情况，实现菜单变换。比如不同教派有不同的菜单背景。比如剧情进入高潮，菜单背景开始燃烧。比如恐怖游戏进入黑暗区域时，菜单开始渗透寒气。比如下雨的时候，菜单开始哗啦哗啦滴水。比如随着玩家孤独剧情的深入，拥戴玩家的npc越来越少，菜单的部件也越来越少。 |
简洁的菜单也很美观，面板并不是为了复杂而复杂。
（也不排除有群友觉得面板空洞，没有什么内容，主要看个人审美）
| 图中放了一个小爱丽丝的立绘，这个立绘由 多层菜单gif 插件实现，你可以通过变量获取当前领队的角色id，然后根据id刷新菜单GIF的显示/隐藏，来实现主菜单的角色立绘切换。 |
更多设计细节，去看看文档：”多层组合装饰（界面装饰-菜单界面）.docx”。
2）标题界面设计
标题界面主要体现的是 游戏故事主题/大纲 的性质，标题是玩家对游戏的第一印象。
一个精致的主题面板很重要，如果是多结局，可以使用多种主题。
标题界面大多都是静态的图片为主，偶尔加一些天气、或者动态效果，不一定要非常绚丽的动态效果。
| 由于 示例 不需要体现什么故事主题，所以示例的主题都是东拼西凑来的，请不要模仿作者我所给的标题界面。 |
举个例子，就用自带的菜单：
虽然画面简陋，但是你肯定一眼就能猜到，可能是小爱丽丝发生了海难？这可能是个生存游戏？或许小爱丽丝会最后造一个船回家？途中或许会遇到某些可怕的野兽？
游戏的主题、游戏方式、故事情节一目了然。
| 如果玩家进入到标题界面后，第一眼就能知道游戏要讲述一个什么样的故事，那么这个标题的主要作用就达成了。（想玩的玩家自然会开始游戏，不喜欢的玩家会自行离开。）（如果标题和游戏完全搭不上边，玩家会有一种被欺骗的感觉，差评就是这样产生的。） |
在体现主题的基础上，你可以用平移的菜单背景、人物刻画的背景、别具一格的醒目标题、循环的精致小视频等。
比如单独对角色进行刻画的：（恐怖解谜游戏《化妆镜》）
再比如对游戏故事背景进行渲染的：
如果你一开始并不想暴露游戏主题，你可以做多种不同风格的标题，然后随着剧情的深入，标题逐渐变化。（可以参考传送门2的标题）
（只不过传送门好像直接用的地图本身的引擎场景来作为标题界面，而这里我们的游戏做不到这一点）
更多设计细节，去看看文档：”多层组合装饰（界面装饰-菜单界面）.docx”。
3）地图界面设计
地图界面主要体现的是 游戏世界观 的性质，玩家的主要注意力就在地图本身。
地图是游戏世界观的核心。
有什么故事、有怎样玩法、画面效果如何，只要看看游戏里的大地图，就理解大概。
因此，游戏中的画风是否一致，是地图界面最重要的指标。
由于示例中的世界是系统空间世界，这个世界的图块都是 透明 的，于是地图的背景就变得重要了，而传统的rpg战斗图块都不透明，所以具体需要根据你的游戏实际来决定。
另外，地图界面从设定上还能专门设计为横版游戏视角。
更多设计细节，去看看文档：”多层组合装饰（界面装饰-地图界面）.docx”。
4）战斗界面设计
战斗界面主要体现的是 空间感 的性质，玩家的主要注意力在敌人身上。
默认给的战斗背景，就是许多非常好的例子，只需要添加一点点动态效果的背景，就能有很好的带入感。
比如：
雪地 + 飘动的雪花背景
城镇 + 逐渐变强的阳光背景
如果要自己画漂亮的战斗界面，参考默认背景图片即可。
你也可以用ai生成战斗场景，示例中已经不再用默认的背景图片了。
当然，如果你追求的是更精致的画质，增强的技能打击感，
你可以尝试模仿绘制动作游戏的战斗背景。
（只不过，游戏只能是2d贴图图层，无法靠画图做成游戏的真实3d效果）
或者大招时临时创建并播放新的炫酷背景或GIF作为技能特效：
| 如果你发现画面非常精致的战斗背景，一定要把它们收集起来，这些都是你后期画出漂亮战斗背景的完美参考素材哦。 |
5）天窗层设计
天窗层专注于各种特效，先有想法，再有设计。
就比如示例中的 万花镜室 。
先有多层嵌套的设计想法，然后再开始加装饰功能。
（详细介绍可以去看看文档：“6.地图 > 地图设计-万花镜室.docx”）
装饰配置难度
相关插件类型配置要注意的地方如下：
| 装饰对象 | 配置、功能的区别 | 配置难度 | |
| 菜单 | 菜单界面 | 插件参数配置 | ★ |
| 标题界面 | 插件参数配置 + 全局存储 | ★★ | |
| 地图 | 地图界面 | 插件参数配置 + 位移比配置 | ★ |
| 战斗 | 战斗界面 | 插件参数配置/插件指令配置 + 延迟指令配置 | ★★★ |
| 菜单+地图+战斗 | 天窗层 | 插件参数配置/插件指令配置 | ★★ |
具体配置细节，可以去看看对应的文档：
17.主菜单 > 多层组合装饰（界面装饰-菜单界面）.docx
17.主菜单 > 多层组合装饰（界面装饰-地图界面）.docx
17.主菜单 > 多层组合装饰（界面装饰-天窗层）.docx
17.主菜单 > 多层组合装饰（界面装饰-战斗界面）.docx
界面的属性
游戏分辨率
游戏默认的窗口大小是816*624像素，你可以对进行缩放或者全屏。
但是，简单缩放并不增加分辨率，如果把窗口拉伸，拉伸至全屏，图像会变模糊，因为图片的内容还是原来的816*624。
举个例子，打开yep核心引擎插件，
设置屏幕宽度为916，然后设置战斗背景重置（改变分辨率）。
可以看到下面的窗口被拓宽了100像素的距离。
（注意，还要确保 战斗-战斗活动镜头 的 镜头架 的宽高要比窗口的大）
由图可知，如果你修改了游戏的分辨率，那么原来规划的816*624的所有窗口布局，包括画面镜头ui的位置，全部要进行调整。（只有部分ui会根据比例自适应）包括将整体布局的图片更换成916*624大小，以及修改贴图、窗口等所有的x位置配置。
层级
1）菜单/标题层级
菜单界面/标题界面分为两层：** 菜单前面层、菜单后面层**。
更多细节介绍，去看看文档：”多层组合装饰（界面装饰-菜单界面）.docx”。
2）地图层级
地图界面分为五层：** 下层、中层、上层、图片层、最顶层**。
更多细节介绍，去看看文档：”多层组合装饰（界面装饰-地图界面）.docx”。
3）战斗层级
战斗界面分为四层：** 下层、上层、图片层、最顶层**。
更多细节介绍，去看看文档：”多层组合装饰（界面装饰-战斗界面）.docx”。
4）天窗层
天窗层只有一层，且都在 菜单界面、地图界面、战斗界面 的最上面。
装饰插件相互通过 图片层级 来决定先后顺序。
更多细节介绍，去看看文档：”多层组合装饰（界面装饰-天窗层）.docx”。
图片层级/堆叠级
图片层级： 指贴图在相同 层级 的基础上，多层贴图之间的先后顺序，
数字大的在上面，数字小的在下面，会被挡住。
数值如果相同，那么将根据配置的先后顺序来确定。（图片层级 也称 堆叠级）
以菜单界面的装饰为例，如下图。
图中加入了4个魔法圈，3层背景，以及3种粒子。
其先后顺序为：
背景的 图片层级 默认0，
魔法圈的 图片层级 默认4，
粒子的 图片层级 默认8。
因为魔法圈之间不存在之间必要的遮挡关系，所以层级默认4。
图中黄圈的背景，图片层级为1或2，最底下的网格背景。
（不要把 不透明背景图 的图片层级设置在4以上，因为会挡住魔法圈和粒子）
装饰的属性
背景
1）平铺效果
所有的背景插件，都为固定的平铺背景效果，而不是单独的一张图片。
（如果你想用单独的背景，可以用不旋转的魔法圈代替）
2）多层背景
以地图界面的装饰为例，
背景可以设置多层并添加到同一张地图中。
| 你完全可以把背景看成是ps中的图层，先在ps中设计好多个图层的作用。比如阴影层、照明光线层等，完成后再进行图层添加，不用急着合并所有图层。 |
比如，做多层远景的时候比如体积管理层时，也可以这样：
3）自变化效果
所有的背景插件，都带有自变化效果的设置。
包含：浮动效果、闪烁效果、缩放效果（不含摇晃效果）
4）修改单属性
所有的背景插件，都具备 修改单属性、延迟指令、周期指令 功能。
这些功能可以通过 插件指令 手动修改，具体去看你的所选插件的说明，都有介绍。
粒子
粒子效果有非常多的属性配置，这里只简单介绍一下。详细内容可以去看看：“1.系统 > 大家族-粒子效果.docx” |
1）粒子出现模式
粒子的出现位置范围可以自定义，包含：
随机出现（游戏屏幕中随机位置）、顶部出现（游戏屏幕上边沿位置）、
底部出现、左侧出现、右侧出现、固定点范围出现。
其中，“固定点范围出现”是指在屏幕中，设置一个位置，并扩展出一个圆，圆内随机出现粒子。
2）粒子方向与速度
粒子弹道配置中，极坐标模式 + 随机 的设置很常用。
因为每个随机出现的粒子，都需要指定其漂浮的方向以及速度。
所有粒子漂浮过程中，速度和方向都不变。（不考虑复杂的粒子移动）
注意，初始位置与角度的关系， 90向下，270向上。
如果设置为底部出现，就需要设置方向为270度，向上漂。
如果方向反了，你在游戏中会看不到任何粒子。
如果方向设置为 扇形随机 ，则配置的效果如下图。
3）粒子透明度与缩放
粒子的透明度和缩放过程可以自定义。
缩放设置后，将不再变化。
透明度会根据粒子的生命周期，逐渐变化。
4）修改单属性
所有的粒子插件，都具备 修改单属性、延迟指令、周期指令 功能。
这些功能可以通过 插件指令 手动修改，具体去看你的所选插件的说明，都有介绍。
魔法圈
1）3d效果
贴图的旋转效果如下，可以顺时针逆时针旋转。
正常情况下，旋转无法做到类似3d的扁形旋转效果。
这里，魔法圈提供了参数设置，可以设置缩放比例x1.0 y0.5，实现扁形的旋转效果。
并且，还提供了参数设置斜切比例x0.0 y1.0。（可以为负数，向反方向斜切）
不过，上述终究是一张2d贴图的变换，只能做出看起来像3d的效果。
无法实现像3d那样有遮挡，有厚度的旋转。
2）自变化效果
所有的魔法圈插件，都带有自变化效果的设置。
包含：浮动效果、闪烁效果、摇晃效果、缩放效果。
3）修改单属性
所有的粒子插件，都具备 修改单属性、延迟指令、周期指令 功能。
这些功能可以通过 插件指令 手动修改，具体去看你的所选插件的说明，都有介绍。
GIF
1）3d效果
GIF插件与魔法圈一样，能设置3d效果，设置方式也一样，见：3d效果。
举个例子，菜单GIF可以设置为：
同时设置两处斜切，可以将GIF像两个方向的平行四边形延伸。
（斜切可为负数，表示反方向延伸。）
2）GIF播放
你可以使用插件指令控制GIF的播放，如下图。
3）自变化效果
所有的GIF插件，都带有自变化效果的设置。
包含：浮动效果、闪烁效果、摇晃效果、缩放效果。
4）修改单属性
所有的GIF插件，都具备 修改单属性、延迟指令、周期指令 功能。
这些功能可以通过 插件指令 手动修改，具体去看你的所选插件的说明，都有介绍。
平铺GIF
1）平铺效果
多层平铺GIF = 多层背景 + GIF播放
举个例子，在Map_layer_gif文件夹中，配置一个平铺用的GIF。
（图中示意的是正方形变大的GIF）
然后进入游戏测试，可以看到平铺的GIF在不停地变换。
平铺GIF常用于动画转场，一般放到 最顶层 然后隐藏，需要时再显示。动画转场设计可以去看看：“17.主菜单 > 关于动画转场核心.docx” |
2）GIF播放
你可以使用插件指令控制GIF的播放，如下图。
3）自变化效果
所有的平铺GIF插件，都带有自变化效果的设置。
包含：浮动效果、闪烁效果、缩放效果（不含摇晃效果）
4）修改单属性
所有的平铺GIF插件，都具备 修改单属性、延迟指令、周期指令 功能。
这些功能可以通过 插件指令 手动修改，具体去看你的所选插件的说明，都有介绍。
视频
1）素材说明
推荐一个免费可商用的网址：https://pixabay.com/（要翻墙）
除了视频，Pixabay 也提供数量众多的矢量图、插画、照片等无版权素材，均可免注册直接下载。
示例中使用的视频，是可以免费商用的。
你也可以去找其他的视频资源，作为你的标题画面。
下载的格式是mp4格式，你需要用工具转成webm格式。
mp4无损转webm推荐用下面的在线网站：
https://cloudconvert.com/mp4-to-webm
| 不推荐用 格式工厂，这个软件生成的视频有很大的分辨率损失。 |
从零开始设计（DIY）
界面装饰的从零开始设计（指向）
界面装饰的具体设计，分散到了下面的子文档中：
17.主菜单 > 多层组合装饰（界面装饰-菜单界面）.docx
17.主菜单 > 多层组合装饰（界面装饰-地图界面）.docx
17.主菜单 > 多层组合装饰（界面装饰-天窗层）.docx
17.主菜单 > 多层组合装饰（界面装饰-战斗界面）.docx