不代表最终效果
概念设计
地域分级
区域目前分成三级。
地图两级，分别为海洋大地图和岛内地图。
地图两级，分别为海洋大地图和岛内地图。
地图形状设计
和原神一样，
第二张图，全覆盖
第二张图，全覆盖
迷雾覆盖
和原神一样
地图点亮表现
和原神一样
详细设计
底图地图拆分
底图直接渲染，在Unity 中用脚本将大地图分成格子，每个格子一个mesh，铺到屏幕上进行渲染。
每个格子占1024×1024，要求手绘地图时控制地图大小为1024的整数倍。
缩放时，同屏的格子纵向的最大数目应限制在3以下。
遮罩控制
一共需要两个遮罩，地图区域遮罩AreaMask，地图区域解锁遮罩AreaUnlock。
AreaMask
绘制方式
手动绘制区域Mask遮罩图，模糊，512×512，如下：
遮罩图大小不一，手动放在地图上。
图中红线部分为0.5，即多个区域的拼接边缘。
使用原理
红色箭头处由 0.5 → 0.0
AreaUnlock
绘制方式
图中红线部分为1.0，蓝色区域部分为unlock遮罩。
使用原理
用于地图解锁阶段。解锁时分为两个阶段：解锁区域内缩，解锁区域外扩。
内缩时unlock遮罩叠加到已解锁部分地图，边缘阈值由 1.0 → 0.0
外扩时AreaMask控制边缘，边缘阈值由 1.0 → 0.5
地图、遮罩渲染流程
利用Stencil
1.绘制底图，地图格至Color，Stencil，0x00 → 0x80（128）
2.用遮罩图绘制至Stencil，在此区域内是可见的，replace 0x80 → 0x81（129）
3.利用Stencil值统一绘制迷雾区域至，Color，Stencil != 0x81（129）
4.绘制迷雾边缘、区域标识，Color，Stencil != 0x81（129）
5.绘制禁止进入区域，Color
地图点亮渲染流程
如图，在需要解锁的区域上方叠加一层Unlock，将Stencil 0x81清除。
解锁的区域要额外创建物体，材质球加载或动态生成，需要程序在脚本中建立如下关系：
maskMat?.SetFloat("_VisibilityLerp", lockLerp);
maskOutlineMat?.SetFloat("_VisibilityLerp", lockLerp);
unlockMat?.SetFloat("_VisibilityLerp", Mathf.Clamp01(lockLerp + 0.5f));
outlineUnlockMat?.SetFloat("_VisibilityLerp", Mathf.Clamp01(lockLerp + 0.5f));
UI层级关系
如图：
- 渲染Mask，写入Stencil。
- 遮挡雾
- 地图边缘Outline
- 额外：点亮时导入unlock物体
最终效果
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
🎨 欢迎来到 cg-x！这里是设计师的灵感宝库。我们提供CG艺术资源、软件下载和经验分享，助你快速提升创作能力。快来与小伙伴们一起探索设计的无限可能吧！✨
浙公网安备33010602013736号