图例
{{Mission_arrow|┃}}
|
{{Mission_arrow|┛┃}}
|
{{Mission_arrow|┃┗}}
|
{{Mission_arrow|┛┃┗}}
|
{{Mission_arrow|┓┃}}
|
{{Mission_arrow|┃┏}}
| |
{{Mission_arrow|┓┃┏}}
|
{{Mission_arrow|┛┃┏}}
|
{{Mission_arrow|┓┃┗}}
| ||||
{{Mission_arrow|┅}}
|
{{Mission_arrow|┛}}
|
{{Mission_arrow|┗}}
|
{{Mission_arrow|┛┗}}
|
{{Mission_arrow|┛┏}}
|
{{Mission_arrow|┓┗}}
|
{{Mission_arrow|┓┏}}
|
{{Mission_arrow|━━}}
|
{{Mission_arrow|┛━}}
|
{{Mission_arrow|━┗}}
|
{{Mission_arrow|┛━┏}}
|
{{Mission_arrow|┓━┗}}
|
{{Mission_arrow|┓━}}
|
{{Mission_arrow|━┏}}
|
{{Mission_arrow|┃┃}}
|
{{Mission_arrow|┛┃┃}}
|
{{Mission_arrow|┃┃┗}}
|
{{Mission_arrow|┛┃┃┗}}
|
{{Mission_arrow|┇}}
|
{{mission icon|mission_scholar_officials|天命|大明}}
|
设计
152px长竖线和短箭头配合使用,可以构造出跨图标的长线。
基本的设计原则是,外部的div调节行距整体,内部的div控制线的位置。以左上角作为坐标基准,尽量少调节变量。图片一般不会超出行距范围,行距(看不见的外框)会把下面的图标推到正确的位置。
游戏(1.26.1)任务树截图的测量结果:
- 任务图标Mission_icon_frame是103*123像素,在任务树中自左侧起排列五个,每个额外间隔1像素即图标列宽104像素;
- 每行间距29像素,但是下缘(以dds/png图像尺寸为准,包含透明部分,下同)有2像素被短竖线覆盖,上方有多达13像素被箭头覆盖;
- 以相同像素为基准测量的图标上下距离是152像素,也就是arrow_verticall_skip_tier的高度;
- 短竖线的高度是20像素,箭头的高度是24像素,合计44像素减去上述的2+13像素就是29像素,也就是图标之间的行间距;
- 竖线距离图标左缘46像素,上端覆盖图标2像素;
- 箭头上端不掩盖竖线,即箭头距离图标下缘18像素;
- 左箭头距离图标左缘15像素,中箭头距离38像素,右箭头距离61像素;
- 多个箭头连接一个图标时会互相覆盖4像素,但是这些重叠部分基本都是透明的,没有实际影响。
- 转出转入的弯曲都是16像素高,但是对齐不同:
- 左右转出精确对齐,但是它们都要比短竖线低1像素,即上端覆盖图标1像素,看上去有个缝隙;
- 左右转入有2像素误差,这也是整体误差的一大来源,arrow_right_in低2像素,它和arrow_right_out的总高度是21像素,下缘低于短竖线2像素且被箭头掩盖;
- arrow_left_in和arrow_left_out的总高度是19像素,下缘能对齐短竖线和箭头;
- arrow_right_in距离图标左缘-5像素,arrow_right_out距离60像素;arrow_left_in距离69像素,arrow_left_out距离4像素;
- 横线距离图标下缘4像素,总是和转出弯曲对齐。
- 长横线arrow_horizontal_skip_slot宽124像素明显超过一个图标的宽度,但是它总被弯曲覆盖,所以左边距-10像素令其居中。
相对于图标的坐标清单,注意div是累计的:
mission_icons_frame_complete 0,0 arrow_end 15,18/38,18/61,18 外边距-13,让出下一个图标的位置 arrow_horizontal_skip_slot -10,4 arrow_horizontal_tile 未见使用 arrow_left_in 69,2 arrow_left_out 4,-1 arrow_right_in -5,4 注意这里外边距额外-2 arrow_right_out 60,-1 arrow_verticall_skip_tier 46,-2/46,18 arrow_verticall_tile 46,-2
{{Mission arrow|┃}}
| 短竖线带箭头 | ┃ = | 向左转出 | ┛ = | 向右转出 | ┗ = | 左下转出 | ┛┃ = | 右下转出 | ┃┗ = | 三向转出 | ┛┃┗ = | 左右转出 | ┛┗ = | 左向右转入 | ┓ = | 右向左转入 | ┏ = | 左上转入 | ┓┃ = | 右上转入 | ┃┏ = | 三向转入 | ┓┃┏ = | 左右转入 | ┓┏ = | 左出右入 | ┛┏ = | 右出左入 | ┓┗ = | 左入压横线 | ┓━ = | 右入压横线 | ━┏ = | 152px长竖线无箭头,下面需要接一个┃类小箭头 | ┃┃ = | 152px长竖线左转出 | ┛┃┃ = | 152px长竖线右转出 | ┃┃┗ = | 152px长竖线 | ┛┃┃┗ = 左右转出 | 短横线 | ━ = | 124px长横线 | ━━ | 空图标占位,下面这个 是全角大空格,不过不如┇直观。 | | ┇ = | 空行占位 | ┅ = | ╋ = | ┳ = | ┻ = | ┣ = | ┫ = |
Mission arrow