刀塔传奇背包系统逆推案
一、系统设计目的Ø 将玩家已拥有物品的相关数据以用户界面(即背包)的形式直观地显示给玩家,方便玩家查看和使用物品。 Ø 将物品按具体类型分类,使玩家可以更快捷的找到某一物品。 Ø 提供背包内各种物品使用、出售、合成、详情查看、获取获得途径等功能 Ø 提供图鉴功能
二、界面逻辑(一)图标位置:Ø 位于游戏主界面右侧导航栏
中的上数第二个位置,导航栏由主界面右上角的倒三角导航按钮点击
提供。
(二)背包打开:Ø “背包”按钮在有效区域内被点击时显示高亮,松开时恢复 Ø 只有在“背包”按钮范围内做出完整的点击动作时才进入背包界面,按钮范围为包含图标在内的方形区域。
(三)界面相关互斥性Ø 背包界面与导航栏中的“英雄”界面和“碎片合成”界面共享同一背景图(全屏大小)并将自身界面及资源栏叠加于其上 Ø 背包为全屏界面,点击“背包”时整体(包括背景图、资源栏和背包界面)界面将覆盖于当前界面之上(不包含导航栏中的英雄界面和碎片合成界面),并不关闭原界面,且当关闭背包界面时将返回打开之前的界面。 Ø 在导航栏中的“英雄”、“背包”、“碎片合成”界面之间相互切换时,不采用覆盖的方法,背景图不做额外处理,只关闭原有界面并打开请求界面。
(四)背包关闭:Ø 整体背包界面左上角位置有一个左向三角按钮,拥有点击效果,点击效果为暗化,按钮区域为包含图标在内的方形,在按钮范围内做出完整的点击动作时,关闭整体背包界面,
三、背包界面Ø 背包主界面和分类标签栏共同占据横向屏幕约60%的长度,分类标签栏右侧空白处约为导航栏按钮宽度的50%。主界面上边界与导航按钮下边界齐平,下边界下侧空白处为横向屏幕高度的1.67%。
图3.1 (一)分类标签及其处理方式Ø 标签图左侧线条变化处与主界面右边界相交。 Ø 该背包系统含有:“全部”、“装备”、“卷轴”、“灵魂石”、“消耗品”五个标签,从上到下依次排列。 Ø 所有标签的基础样式相同,玩家进入背包时系统默认选中“全部”标签。 Ø 被选中的标签图层位于物品区域之上,并且做高亮处理。未被选中的标签图层位于“主界面”图层之下,“背景图片”图层之上,点击不同类型的标签,背包系统根据该标签属性进行筛选并显示。 Ø 每次开启游戏时,客户端会收到服务器发送的从数据库提取对应于该玩家ID 的各种信息,并以缓存的形式存储于内存中,其中包括了“仓库”信息。涵盖游戏中所有的道具,每个道具对应的ID拥有“数量”和“顺序”两个属性。 Ø “顺序”属性的作用类似于链表的指针,当得到链表之外的道具时,将其添加在链表末尾;当玩家得到链表内的道具时,对“数量”属性做处理;用完的道具从链表中删除,如果再次得到该道具则添加在链表末尾。 Ø 显示规则:在背包中显示时按照指针顺序处理,处于链表末尾的物品显示在背包开头。 Ø 进入背包界面或点击不同标签时提取相关信息并作处理。 标签类别 |
处理方式及结果
|
全部
|
点击后会重置“物品区域”,并将该玩家不同物品ID下所有“数量”属性不为0的项全部显示在背包中。
|
装备
|
点击后会重置“物品区域”,并将该玩家不同物品ID下所有“数量”属性不为0且ID属于“装备”类型的项全部显示在背包中。
|
卷轴
|
点击后会重置“物品区域”,并将该玩家不同物品ID下所有“数量”属性不为0且ID属于“卷轴”类型的项全部显示在背包中。
|
灵魂石
|
点击后会重置“物品区域”,并将该玩家不同物品ID下所有“数量”属性不为0且ID属于“灵魂石”类型的项全部显示在背包中。
|
消耗品
|
点击后会重置“物品区域”,并将该玩家不同物品ID下所有“数量”属性不为0且ID属于“消耗品”类型的项全部显示在背包中。
| (二)当前位置滑块Ø 放置在主界面左侧,上下边界与“灰化边界”相邻 Ø 能正确显示在整个背包区域中的当前位置 Ø 当玩家有拖拽动作时,滑块立刻出现,出现方式为渐现。 Ø 当玩家没有拖拽屏幕动作时,一秒后整个滑块区域消失,消失方式为渐隐 (三)灰化边界Ø 两片区域,与物品区域上下界相邻,高度约为3.07%,长度占主界面的90% Ø 平时隐藏,激活时出现于“物品”图层之上,“选中标签”图层之下, Ø 激活条件如下:1、在物品行数大于等于五行的情况下,物品区域当前位置为顶端时,下边界激活上边界隐藏;物品区域当前位置为底端时,上边将诶激活下边界隐藏,其余情况上下边界同时激活。2、在物品行数小于五行时,上下边界同时隐藏。 Ø 颜色为:XXXXXX(棕灰色,略深于物品区域底色) Ø 效果:当物品区域的物品经过“灰化边界”区域时,位于该区域的部分将被遮盖,呈现颜色灰化效果 Ø 示例如下:
(四)物品区域Ø 物品区域不分页,无上限,可堆叠,单一物品上限为999,不可重复,超过部分则另作处理,图片右下角显示表示数量的数字,如果为1则不显示。 Ø 每行最多显示四件物品的图片,间隔相同,左对齐向下排列,最多可以同时完美显示四行物品,底部还要能显示第五行物品的上部分,约占物品高度的38%(计算灰化边界中的部分) Ø 物品分为四种类型:消耗品、灵魂石、卷轴、装备。 Ø 物品分为五种稀有度:白色、绿色、蓝色、紫色、橙色 Ø 物品与稀有度一一对应,灵魂石统一对应蓝色。 Ø 稀有度通过边框颜色表示。 Ø 物品、卷轴、消耗品图片采用四方形边框。灵魂石图片采用六边形边框显示,并在左上角添加灵魂石小图标。 Ø 物品图片统一采用黑色作为底色。 Ø 点击不同类型的物品时,背包界面左侧会弹出物品相关界面,样式如下:上下边界与背包主界面的上下边界对齐,边框样式与主界面边框样式相同,左侧空白占屏幕长度约4.6%。 Ø 可以为物品添加动态效果,比如抖动 图3.4.1 Ø 不同类别的物品会对按钮产生影响。 类别 |
按钮设置
|
消耗品中的经验道具
|
1:出售 2:使用
|
装备、灵魂石、卷轴,消耗品中的其余道具
|
1:出售 2:详情
|
Ø 点击按钮会产生相关的二级界面. Ø 点击“出售”按钮: 图3.4.2 Ø 出售总价框中的数字应随着出售数量变化而变化 Ø 道具数量框中,数字位数可以为1-3位,“件”的位置随位数而作出调整。 Ø 数量调节框,出售数量初始为1,最大不超过上限 Ø 点击关闭按钮或者出售界面外的区域时,关闭该二级界面。 Ø 当出售贵重物品或出售数量超过80%时,应弹出提示框防止玩家的误操作。 Ø 点击“使用”按钮将弹出“选择英雄”界面:
图3.4.3 Ø 客户端系统允许玩家一直使用经验道具而无需在每次使用都与服务器进行交互,交互动作执行于以下情况之后:玩家选择另一英雄为经验道具使用对象、关闭“选择英雄”界面。此时对玩家上一次的使用情况与服务器做交互处理。 Ø 某英雄因为等级限制而无法继续获得经验时,暗化整个英雄框,改变“当前英雄状态栏”信息以提醒玩家该英雄经验值已满,当玩家继续对其使用经验道具时,弹框提示玩家:“英雄经验已满” Ø 英雄“当前等级”随升级动作而做出改变。 Ø “当前英雄状态栏”:当玩家对该英雄使用经验道具时,实现针对该英雄的计数功能(“选择英雄”界面不关闭则计数一直持续),能同时对多名英雄计数。计数显示为“X使用数”,示例如下: Ø “使用提示”栏中的道具名能因为使用道具的不同而改变。 Ø 经验条能随着玩家使用经验道具而动态地显示该英雄当前经验值比例。 当经验值已满时,经验条颜色变为黄色。示例如下: Ø 当英雄因使用经验道具而升级时,英雄图片将出现升级效果,示例如下: Ø 若使用经验道具后会导致经验值溢出,从而造成浪费时,应提醒玩家是否继续使用。 Ø 点击详情按钮:
图3.4.4 “装备”具有“可合成装备”、“可装备英雄”、“获得途径”三个标题栏并在详情框显示不同内容。 “卷轴”具有:“可合成装备”、“获得途径”两个标题栏并在详情框显示不同内容 “消耗品”和“灵魂石”具有:“获得途径”标题栏并在详情框显示具体内容。 获得途径下详情框内的内容可点击且结果如下:如果为副本则跳转到地图页面,如果为装备则跳转到该装备的合成界面,如果为英雄则不做处理
(五)图鉴按钮1) 界面样式如下:
图3.5.1 Ø 该图鉴界面左侧含有:“全部”、“力量”、“敏捷”、“智力”、“生命”、“物攻”六个标签,右侧含有:“法伤”、“护甲”、“暴击”、“回血”、“回蓝”、“治疗”六个标签。标签从上到下依次排列。 Ø 所有标签的基础样式相同,玩家进入图鉴界面时系统默认选中“全部”标签。 Ø 被选中的标签做高亮处理并将靠外一侧向外平移屏幕总长度的1.1%。点击不同类型的标签,系统根据该标签属性进行筛选并显示,并将标签名框内容改变为当前标签名。 Ø 道具框包含道具图片以及道具名称,整个道具框为可点击区域,整个可点击区域的底色调暗。(为整个道具框增加底色,与界面色彩叠加) Ø 当前页面位置处于第一页/最后一页时,“翻页按钮”的向前/向后当点击时无效果。 Ø “页数”与“翻页按钮”相关,随着“翻页按钮”被点击并生效,从而增加或减少。 Ø “页数”与“分类标签”相关,不同的“分类标签”拥有其对应的“页数”。 Ø “道具区域”为三行四列,自左至右横向排布。 Ø “关闭”按钮位于图鉴界面左上角,点击后关闭图鉴页面。 Ø 点击道具框后弹出“装备详细”界面. Ø 玩家不会为了查看补刀斧或者树枝之类的出处而查看图鉴,所以建议添加品质选择按钮,对装备进行筛选。 2) 装备详细界面(可合成装备):
图3.5.2 Ø 建议为每件装备添加有趣的描述,尤其是刀塔传奇的特色装备,这可以作为刀塔传奇的象征,我们甚至可以在贴吧或其他玩家论坛引领这一方向,比如说:“十字军巨盾”我们可以这样描述:“1998!只要1998!噢我说的是钻石价”,这件装备在贴吧中可能就会出现“钻石盾”这样的外号,这对于宣传游戏有很大的帮助。 Ø “装备数量”框中,数字位数可以为1-3位,“件”的位置随位数而作出调整。 Ø “装备属性”框中,在描述末尾留一空行,整个框统一样式(包括空行)。 Ø “装备描述”框位于“装备属性框”下侧,随其高度变化而改变位置。 Ø “装备需求”框位于按钮1上侧,居中显示。 Ø “装备属性”框不能超过五行。 Ø 如果该装备为可合成装备,则按钮1显示为“合成公式”,点击“合成公式”按钮将从装备详细界面右侧弹出“合成公式界面”,两界面对称排布。样式如下:
图3.5.3 Ø “当前选定”装备图片外拥有“当前选定框”,且合成装备界面/掉落关卡界面的内容与其对应 Ø 合成界面只显示“当前选定”装备的合成树或者获得途径界面的掉落关卡。 Ø “合成分支树”图片需要做出单分支、两分支、三分支、四分支的分支树样式,根据当前实际需求调整样式并放置于“合成装备图片”与“合成材料图片”之间。 Ø “合成材料”图片可点击,点击效果为:合成材料框中,于“当前选定”框右侧添加“右向箭头”和被点击的装备图片,并将该装备图片设为“当前选定”,合成界面改为对应于“当前选定”装备的内容。如果该装备无法通过合成获得,则显示“获得途径”界面。具体样式如下(示例中的“当前选定”装备无法通过合成获得):
图3.5.4 Ø “合成材料数量”框中,左侧数字显示玩家当前拥有数量,右侧数字显示合成需求数量,以“/”隔开,均以棕色显示。如果左侧数字小于右侧数字,则左侧数字显示为红色。整体右对齐。 Ø “装备合成材料框”中均以图片来表示被点击的结点,图片的出现效果为渐现。最多同时完美显示四个item,出现第五个时,第一个item向左平移但不完全隐藏,效果类似于背包区域对第五行的处理,显示移出图片右侧约占整张图片宽度25%的部分。框内区域拥有左右滑动及滑动缓冲的视觉效果,示例如下:
图3.5.5 Ø “装备合成材料框”的整个区域若拥有大于等于5个item则向右对齐,否则向左对齐。图片具有点击效果:点击后跳转至该装备的对应界面。 Ø 玩家通过点击“合成”按钮可以直接进行合成装备的操作:点击合成按钮时从右数第一个材料开始查找数据库并进行判断(此处有设计不当之处): 1、如果当前被合成装备的合成材料足够,则于数据库中对该玩家的合成材料(扣除相应数量)与被合成装备(增加相应数量)相关数据做处理。并在界面中显示出合成动画效果(见“效果图要求”)。 2、如果“当前选定”装备的合成材料不足但总合成材料足够(系统可以遍历至最底层),以对话框形式显示“需要先合成这件装备”。示例如下:
图3.5.6 3、如果“当前选定”装备的合成材料与总合成材料均不足,则以弹框形式提醒玩家:“没有合适的材料,去收集一些再来吧”,示例如下: 图3.5.7 不当之处在于,系统默认从右数第一个材料进行遍历查看,但并不考虑其他材料的情况。如果该材料可以合成则会显示如图3.5.5,,玩家通过系统指引完成了第一件材料的合成后,才会对第二件材料进行判定,此时发现材料二无法通过合成获得才会显示如3.5.6。导致玩家经过这么多操作后并没有得到自己需要的东西,会略微影响用户体验。示例如下: 图3.5.8 3) 获得途径界面(可合成装备):
图3.5.9 Ø 装备合成材料框中的图片可以点击,效果为:将该图片设为“当前选定”(无论该图片是否为“当前选定”),合成界面内容改为对应于该装备图片的内容(如果无法合成则显示掉落关卡界面)。“当前选定”框右侧全部清空。示例如下: 图3.5.10 4) 装备详细界面(非合成装备) Ø 如果该装备为非合成装备,则按钮1显示为“获得途径”,其余界面样式与“装备详细”界面相同。
图3.5.11 5) 获得途径界面(非合成装备): Ø 点击按钮1将从右侧弹出“获得途径“界面,两界面对称排布。 图3.5.12 Ø 整个来源框内所有区域都可点击且具有可视点击效果。 Ø 点击“返回”按钮将收回“获得途径”界面,点击“确定”按钮将同时关闭这两个界面。 6) 地图界面(略) Ø 点击来源框将显示战役模块下的“地图界面”(当前页面不关闭) 图3.5.13 Ø 在原有地图界面的基础上,为目标关卡添加指向箭头和缩放圆标注。 Ø 点击左上角的关闭按钮将关闭“地图界面”。 四、背包功能总体流程图Ø
|