简易地图系统

一、内容概要

1. 名词约定

小地图:通过键盘“M”键打开地图系统界面,其中呈现完整箱庭平面的地图称为小地图。

img

雷达图:位于主界面左上角的圆形地图,会实时更新玩家位置以及玩家操控角色的朝向、玩家视野方向等。雷达图的显示内容就是截取小地图中以角色为中心的一个圆形区域。

img

大地图:大地图是对一个或一组箱庭的概念化表达,本质是一个以平面方式呈现的列表,与玩家在场景中的位置没有准确的映射关系。

​ 当前版本不需要考虑大地图的制作。

​ 小地图和大地图都是依托地图系统来呈现的。

img

2. 地图系统初版工作目标

当前版本我们对地图系统的要求仅针对当前玩家当前身处箱庭的地图,无需切换查看其他箱庭地图等箱庭列表相关功能。

通过美术规范化的资源产出和策划配置能够直接完成对一个新箱庭的地图配置。

3. 基础功能简述

玩家位置、角色朝向、视野方向在地图上的实时呈现。

分层地图的自然切换。

小地图的放大缩小、拖动功能。

地图图标的显示与追踪。

二、基础概念

1. 箱庭分层

箱庭空间可能存在多层结构,所以需要使用多张地图的交替显示来呈现整个箱庭的活动空间。

对箱庭“层”的划分:我们会从关卡设计开始就确定箱庭的分层方案,这个方案是灵活且定制化的,与箱庭中各个活动区域的实际高度无关。

*一般来说基于两个原则我们会对箱庭空间进行分层:①垂直方向上具有重叠的活动区域且都具有游戏内容时;②关卡设计中给玩家营造了一个强烈的高度变化的感知。(例如坐电梯从1楼到10楼,玩家对自己楼层变化这件事的感知是统一的)

通过地区编辑器在场景中标记好不同层,每层会创建一个地区id,程序通过地区id的配置来识别每层地图对应的场景。

2. 场景和地图的方向对应

地图方向:上北下南左西右东,现版本不可旋转。

场景方向:暂定 -x对应北向;y对应东向。(x、y对应ue坐标系)

3. 场景和地图的准确映射关系

比例尺:小地图默认规格(无缩放和拖动)相对场景的比例尺会在地图的产出过程中确定,不同箱庭可能使用不同的比例尺。

​ 对于一个箱庭我们会产出一套统一规格的地图资源,并将地图资源的左上角和右下角作为参考锚点。

  地图资源在umg上固定位置摆放(例如相对地图可显示区域居中,后面会提到),所以程序相当于知道了锚点在umg上的准确坐标。

  策划会配置这两个锚点在场景中的对应坐标。

  程序通过这两个参考锚点来计算比例尺以及找到地图和场景准确的对应关系。

img

4.地图系统资源配置

雷达图和地图系统中使用的小地图资源会随箱庭的变化而替换,考虑将小地图抽出来封装为umg文件,策划通过配置不断产出新的箱庭小地图umg,并标准化命名。

在cfg_leel中配置箱庭调用的小地图umg。

​ 后续需要支持直接在箱庭编辑器中配置箱庭调用的小地图umg。

​ 如下图所示:

img

三、基础功能

1.玩家的位置、面向以及视野方向

1.1角色箭头

地图中使用角色箭头来标识玩家的位置以及操控角色的面向。玩家主控角色所在的位置和面向,与地图上角色箭头的位置和指向保持一致。

角色箭头的ui显示层级应当大于小地图,不随小地图多层切换而切换(小地图多层切换见后文)。

1.2视野方向

地图中使用一个透明扇形面积(以下称作扇形视野)来表示玩家的视野方向,扇形的中线与玩家在场景中实际看向的方向一致;视野的角度范围不会依据镜头的(远近、俯仰)改变。

img

扇形视野随着玩家视野改变对应的动态变化

扇形视野的ui显示层级应当小于角色箭头大于小地图。

1.3角色箭头和扇形视野在雷达图、小地图中的呈现规则

雷达图中:①角色箭头始终在雷达图正中心;②随角色移动动态显示雷达图的显示区域(来表达玩家位置变化),角色面向和视野方向随玩家操作动态改变。

地图系统界面:角色箭头显示在当前场景对应的小地图位置上;角色面向以及视野方向定格在打开地图系统的瞬间。

2. 多层地图切换

箱庭中的每层都会单独绘制一张地图,且每层地图具有多种显示方式。

在雷达图和小地图中遵循相同的切换规则,具体见下文。

2.1地图有三种显示状态:正常显示、虚化显示、不显示

虚化显示:地图会置灰、并调整为半透明。

img

2.2地图层级显示规则

当玩家打开地图时,要求玩家当前所在的地图正常显示,且凸显在最上方(指ui显示层级);直接相邻地图虚化显示,(虚化显示地图叠在下方,与地图对应的场景的实际空间高度无关);间接相邻地图不显示。

虚化地图的ui显示层级依据层数配置从小到达排列。

​ 例如:1层的ui层级小于2层。

直接相邻:两张地图之间具有直接连通关系,玩家能从当前地图直接前往相邻地图。

img

img

2.3玩家可以通过层级切换ui切换箱庭地图的显示层

img

每层具有选中/未选中状态,可能会有鼠标悬浮状态,依据美术设计确定。

​ 选中某一层时,将该层地图切换为显示层。

同时有且仅有1层能被选中。

排序:换层ui按照层数从小到大排列。

2.4通过配置定义地图的层以及相邻关系

可以直接在umg上进行配置。

当选中某个层地图时:

​ ①定义当前属于哪一层:例如1层。

u 该参数既用于层数显示,也用于排序。

​ ②定义相邻地图:例如1层、2层、5层···。

​ ③配置当前层对应的地区id,例如1001(地区id由地区编辑器产出)。

如下图参考所示:

img

*有可能1层和3层直接连通,但是2层和3层不能连通。

3.地图图标

3.1图标分类

地图图标分为三类,①功能点,包括npc功能点(铁匠、商店老板),或传送功能点(出入口);②地图传送点;③事件图标(任务图标)。

当前版本需要实现的功能点图标:仅有地图出入口图标作为实现样例(图标大概样式img)。

​ 出入口:指箱庭之间的双向连接点,如下图所示:

img

当前版本需要实现的事件图标:主、支线任务状态图标。

3.2各类图标的功能特性

三种图标具有不同的功能特性,①功能点类图标和所在层地图绑定,当地图不在当前层时隐藏;②传送点类图标不在当前层时仍然显示,且还需要在地图上标记处于多少层;③事件类图标同样不在当前层时隐藏,且随着事件的触发和结束会出现和消失。

3.3图标追踪

追踪操作:点击小地图中的图标,图标标记为选中状态,且会在系统界面显示图标交互列表,点击后确认追踪,如下图所示:

img

​ 当选中图标20像素范围内还有其他图标时,同时显示20像素范围内所有图标的交互选项。

img

追踪状态下,图标会在小地图上循环播放追踪动效。

​ 追踪动效参考:

​ 雷达图中,当玩家位于与该图标相同地图,且图标位于超出雷达图显示范围的位置时,图标将显示在雷达图边缘正确的方向上。如下图所示:

​ 主界面上,生成目标点位置的图标追踪,并且实时更新玩家相对该目标点的距离。

u 注:与任务系统中主界面任务图标追踪完全一致。

img

imgimg

当玩家与目标点触发交互时自动取消追踪状态。

传送点不可追踪只能传送。

功能点只能处于相同地图时能追踪,离开地图时自动取消追踪状态。

事件图标可跨地图追踪,但是不处于相同地图时,不会在雷达图上显示。

3.4图标配置

箱庭编辑器中配置功能点(出入口、铁匠、商店老板)后,能够在地图上对应位置自动生成图标。

​ 功能点:当前仅需生成出入口图标并用于测试。

​ 图标资源配置:功能npc会在npc实例表中配置是否属于功能npc并且配置调用的图标icon;出入口会在传送点实例表中配置对应的图标(需要显示图标的配置,不需要的不配)。

四、界面功能

1.地图系统界面

1.1地图系统界面美术资源组成

img

(1) 地图名

需要显示当前箱庭的名字。

(2) 关闭按钮

(3) 分层切换ui

(4) 放大缩小ui

滑块可能会有悬浮和选中状态,视美术设计定。

(5) 纯色不透明背景层

系统界面的底层背景,整体色彩是纯色且不透明的,视美术设计而定。

(6) 地图可显示区域边缘模糊蒙版

地图资源在蒙版和背景层之间。

(7) 小地图

小地图的组成资源分两种类型,①地图底图;②每层地图。

地图底图:对整个场景的概念化描述,始终处于小地图的最底层。

img

每层地图:对玩家每层活动区域的描述,叠在底图上方,显示层级(和显示状态)会依据换层规则切换。

img

对于同一个箱庭,底图和每层地图的图片资源规格完全相同。

1.2地图系统界面参数简介

以下图中参数仅用于举例说明,具体由美术确认。

img

地图可显示区域:地图系统界面会划定一个能够显示地图的范围,由美术确定规格并提供蒙版。

小地图资源规格:小地图资源使用相同规格,配置时叠放在系统界面固定位置(相对可显示区域居中)。

边缘最大距离:拖动地图时,地图能够停留的位置的有效区域距离可显示区域不能超过R像素。

1.2打开/关闭地图系统

鼠标点击雷达图或者按键盘M键,打开地图界面。

点击地图界面右上角的×或者按键盘M键,关闭地图界面回到主界面。

1.3打开系统界面后屏蔽玩家的场景行为

通用时停状态:打开系统界面时,所有场景活动行为中止且时停。(见通用时停需求)

1.4小地图的放大和缩小

通过缩放ui可以拖动滑条将小地图进行放大和缩小。

登录后首次打开地图系统默认缩放状态为0%,滑条位于滑轨正中间,缩放范围[-50%,50%],对应地图默认大小的[50%,150%],视ui设计决定是否要显示缩放参数。

地图放大或缩小时,地图有效区域会同步放大或缩小。

地图上的图标(包括角色箭头)不会随着地图放大和缩小。

需要客户端记录缩放参数,关闭后重新打开地图系统能够维持上一次操作结束时的缩放状态,但是地图居中,即无需记录拖动的位置。

1.5小地图可显示区域

地图系统界面上会有一个矩形可显示区域用于限制小地图的显示范围。

当小地图边缘接触矩形边缘时,会有一个渐变模糊效果(该效果会由美术提供蒙版)。

由美术设计决定矩形区域的边长m*n(单位:像素)。

img

1.6小地图的拖动

点击(长按)小地图可显示区域,可以将小地图朝各个方向拖动(包括斜向)。(注:图标会跟着被拖动)

玩家可以将地图拖动到很远(定义最远为极限范围),但是会回弹到它的可停留范围。

地图拖动的极限范围:沿着某一固定方向,地图的拖动距离具有极限值,极限约等于矩形可显示区域对应边长的3/4,即水平方向可拖动距离为3/4m,垂直方向可拖动距离为3/4n。

拖动手感:地图移动距离相对鼠标的拖动距离是一个先快后慢(且初始斜率=1)的缓动曲线。

img

​ 滑动惯性:拖动小地图时如果在一个存在速度的时间点松手会有一个减速过程的滑动惯性。

地图的拖动回弹

美术流程中会对小地图定义一个有效区域a*b(单位:像素)以及一个常量R,地图有效区域的边缘距离显示范围对应边的距离设为h。

(注意:运行时a、b随放大缩小操作会变化)

水平方向:ha=(m-a)/2

垂直方向:hb=(n-b)/2

地图处于初始位置时,当h>R像素时,沿该方向无论拖动多远都会回弹到初始位置。

地图处于初始位置时,当h<R像素时,沿该方向拖动地图到h>R时,地图最终会回弹到h=R的位置。

拖动小地图时,如果角色箭头拖动到了地图可显示区域以外,则将角色箭头显示在可显示区域边缘并标明方向。

​ 如下图所示:注意小地图左下角的蓝色角色箭头。

img

​ 如果此时点击角色箭头,需要尝试角色箭头居中,基于拖动范围的限制如果无法居中则尽量居中。

2.主界面雷达图

2.1雷达图的美术资源组成

img

(1) 圆形外框

(2) 纯色透明背景

注:雷达图中使用的背景是纯色透明背景,与地图系统中的背景层是不同资源。

(3) 小地图

雷达图是截取的小地图中以角色为中心的圆形范围,所以也会使用到小地图资源,且使用的分层切换规则和地图系统中完全一致。

2.2雷达图的显示半径

(默认条件下)雷达图的显示半径对应场景中的30m,同时需要该参数可配置。(配的是显示半径对应的场景距离,希望帮忙换算一下)。

​ 该参数在不同箱庭中可能不一样,需要

*雷达图在主界面上的位置和大小由美术设计确定,所以它的缩放程度依据美术确认的大小以及显示半径确定。

*雷达图可能在不同类型的场景中缩放程度不一样,例如相比城区,我们可能希望野外能看到更大的视野范围。当下版本不考虑该功能。

2.3雷达图图标消失规则

未处于追踪状态下的图标:当随着玩家移动图标触及雷达图边缘时,图标直接整个消失而非逐渐被边缘遮蔽。

​ 如下图所示:

处于追踪状态下的图标:当玩家位于与该图标相同地图,且图标位于超出雷达图显示范围的位置时,图标将显示在雷达图边缘正确的方向上。

​ 如下图所示:注意右上角一直闪动在雷达图边缘的任务图标。

3.其他规则

未配置地图时,显示没有地图资源的雷达图。

img

未配置地图时,尝试打开地图系统时提示“无法查看地图”。

五、附录

1.配置参数

用于定位地图和场景的参考点,配置参考点的场景坐标。

定义当前层地图是多少层,以及不同层地图之间的连通关系。

定义当前层地图对应的地区id。

配置功能点图标以及定义图标从属的哪层地图。

2.调试参数

(通用参数,用于调试效果)

雷达图的纯色透明背景需要暴露两个参数:①色彩、②透明度。

雷达图的显示半径对用场景中的m米(m为配置参数)。

地图的虚化显示状态需要暴露一个参数:①色彩、②透明度。

小地图拖动功能中,地图有效边缘距离可显示边缘最大距离的常量R(px)。