一、问题描述
萌新纱雾欧六第一帖,请多多指教。最近有幸参观某款开发中的新mod,感谢制作组的辛勤付出。制作组正制作新的战役章节选择界面(以下简称“界面”),使用了新底图,并调整了各战役章节(以下简称“章节”)圆标的位置,如图1。但是,点击图2的美国章节的圆标,有时却不能成功地进入。纱雾教你如何修改按钮区域的位置与大小,以解决此类问题。
·
·
二、基础知识
欧六战役章节选择界面涉及到四个概念:底图、圆标、区块图、按钮区域。
底图:smap1.pkm~smap3.pkm、smap1s.pkm~smap3s.pkm,png格式亦可。
圆标:只是贴图。圆标的图片见image_scenario_hd.png及同名xml。CampaignSettings.json中的X、Y决定了各章节的圆标在界面中的位置。每个章节只有一个圆标。
区块图:可理解为按钮的贴图,其图片见image_smaparea.webp及同名ktx、xml。smaparea.bin决定了各章节的区块图在界面中的位置。每个章节有两种区块图:“未被选中”、“已被选中”,后者与前者的大小一致,但多出黄色描边和阴影效果。
按钮区域:进入章节的唯一通道。首次点击,选中;二次点击,进入;点击非按钮区域无效。smaparea.mask决定了各章节的按钮区域在界面中的位置和大小。每个章节只有一个按钮区域。若未经改动,各章节的按钮区域的位置和大小与其区块图的位置和大小基本吻合。
·
以图1为例,点击最左侧、蓝色的美国章节的圆标,却不能成功地进入的原因在于:工作人员调整了圆标位置、却未能调整按钮区域,导致圆标不再100%包含于按钮区域。我们需要修改按钮区域的位置和大小,使其能够再度包含圆标。
·
·
三、解决
沟通后明确制作组的需求:无需区块图,只要点击圆标能够进入战役即可。思路很简单:集中精力处理smaparea.mask,使各章节的按钮区域能够重新包含其圆标,然后透明化所有区块图即可。
·
(一)smaparea.mask分析
十六进制编辑器打开smaparea.mask。前八个字节代表底图的宽和高,分别为2548和1000,如图3。(高低位倒置,F4 09 00 00代表00 00 09 F4,即十进制的2548;E8 03 00 00同理)
·
其余部分以两字节为一组,每组依次对应底图内大小为8x8的区域,从底图的左上角开始,从左往右、从上往下。每组的值代表该区域是否附带按钮,如图3和图4,例如FF FF代表该区域不附带按钮,0000代表点击该区域将进入教程,06 00代表点击该区域将进入6号章节。
·
有过地图制作经验,尤其处理过map.bin的读者对此应该会比较熟悉。
·
(二)smaparea.mask修改直接修改smaparea.mask工作量大,伤害眼睛,我们需要借助工具的力量。
·
这个工程问题此前无人涉足,没有现成的工具。我做了个smap可视化编辑器,用它读取smaparea.mask并可视化展示,然后根据圆标的位置和大小,确定新按钮区域的范围并修改、存储,如图5、图6、图7。
·
(三)成果展示
透明化区块图的步骤不再赘述,修改后的效果如图9,点击圆标即可进入对应的战役章节,问题解决。
萌新纱雾欧六第一帖,请多多指教。最近有幸参观某款开发中的新mod,感谢制作组的辛勤付出。制作组正制作新的战役章节选择界面(以下简称“界面”),使用了新底图,并调整了各战役章节(以下简称“章节”)圆标的位置,如图1。但是,点击图2的美国章节的圆标,有时却不能成功地进入。纱雾教你如何修改按钮区域的位置与大小,以解决此类问题。
·
·
二、基础知识
欧六战役章节选择界面涉及到四个概念:底图、圆标、区块图、按钮区域。
底图:smap1.pkm~smap3.pkm、smap1s.pkm~smap3s.pkm,png格式亦可。
圆标:只是贴图。圆标的图片见image_scenario_hd.png及同名xml。CampaignSettings.json中的X、Y决定了各章节的圆标在界面中的位置。每个章节只有一个圆标。
区块图:可理解为按钮的贴图,其图片见image_smaparea.webp及同名ktx、xml。smaparea.bin决定了各章节的区块图在界面中的位置。每个章节有两种区块图:“未被选中”、“已被选中”,后者与前者的大小一致,但多出黄色描边和阴影效果。
按钮区域:进入章节的唯一通道。首次点击,选中;二次点击,进入;点击非按钮区域无效。smaparea.mask决定了各章节的按钮区域在界面中的位置和大小。每个章节只有一个按钮区域。若未经改动,各章节的按钮区域的位置和大小与其区块图的位置和大小基本吻合。
·
以图1为例,点击最左侧、蓝色的美国章节的圆标,却不能成功地进入的原因在于:工作人员调整了圆标位置、却未能调整按钮区域,导致圆标不再100%包含于按钮区域。我们需要修改按钮区域的位置和大小,使其能够再度包含圆标。
·
·
三、解决
沟通后明确制作组的需求:无需区块图,只要点击圆标能够进入战役即可。思路很简单:集中精力处理smaparea.mask,使各章节的按钮区域能够重新包含其圆标,然后透明化所有区块图即可。
·
(一)smaparea.mask分析
十六进制编辑器打开smaparea.mask。前八个字节代表底图的宽和高,分别为2548和1000,如图3。(高低位倒置,F4 09 00 00代表00 00 09 F4,即十进制的2548;E8 03 00 00同理)
·
其余部分以两字节为一组,每组依次对应底图内大小为8x8的区域,从底图的左上角开始,从左往右、从上往下。每组的值代表该区域是否附带按钮,如图3和图4,例如FF FF代表该区域不附带按钮,0000代表点击该区域将进入教程,06 00代表点击该区域将进入6号章节。
·
有过地图制作经验,尤其处理过map.bin的读者对此应该会比较熟悉。
·
(二)smaparea.mask修改直接修改smaparea.mask工作量大,伤害眼睛,我们需要借助工具的力量。
·
这个工程问题此前无人涉足,没有现成的工具。我做了个smap可视化编辑器,用它读取smaparea.mask并可视化展示,然后根据圆标的位置和大小,确定新按钮区域的范围并修改、存储,如图5、图6、图7。
·
(三)成果展示
透明化区块图的步骤不再赘述,修改后的效果如图9,点击圆标即可进入对应的战役章节,问题解决。