全站通知：

帮助:如何制作赛事对阵图

来自无畏契约WIKI_BWIKI_哔哩哔哩
跳到导航 跳到搜索

Chapter 0 引言
十二进制的夕景9079

这里是站长&组长小玖。

目前无畏契约BWIKI站内所使用的比赛对阵图均为我一人独立制作。由于我本人精力有限，三次元事务繁多，无法及时更新对阵图，站内的无畏契约赛事赛制又逐渐丰富多样，因此本帮助文档应运而生，旨在帮助站内其他编辑者自主制作新的赛事对阵图。

祝大家编辑愉快。Powered by 逃离B612的小玖 - Juunishinhou no Yuukei - 讨论 - 贡献 - 恭喜你，逃出了恒常不变的夏天。 2025年12月28日 (日) 14:32 (CST)

Chapter 1 基本原理

首先，我们需要弄懂最基础的问题。

所有的对阵图都是基于表格制作的。关于表格的相关问题，可以查询MGP:Help:表格。

对阵图一共分为3部分：阶段标识、比赛信息、连接线。

就像这样：

胜者组半决赛 // BO3
M108/32
VCTCNASE.png
Attacking Soul Esports
 2
VCTCNTE.png
Trace Esports
 3
M208/32
VCTCNTG.png
Thunder Gaming
 0
VCTPACZETA.png
ZETA DIVISION
 0
败者组半决赛 // BO3
M408/32
VCTCNASE.png
Attacking Soul Esports
 0
VCT.png
M2 LOSER
 0
胜者组决赛 // BO3
M308/32
VCTCNTE.png
Trace Esports
 0
VCT.png
M2 WINNER
 0
败者组决赛 // BO5
M508/32
VCT.png
M3 LOSER
 0
VCT.png
M4 WINNER
 0
总决赛 // BO5
M608/32
VCT.png
M3 WINNER
 0
VCT.png
M5 WINNER
 0

其中，胜者组半决赛、胜者组决赛、总决赛等使用粗体灰色背景的文本框，我们称其为阶段标识，它表示了比赛进行到了哪个阶段。

连接线显而易见，连接了不同轮次的比赛，在上一轮获胜的队伍将通过连接线的引导，通向下一轮。

除此以外的所有内容均为比赛信息。比赛信息有着更多的内容：

  • 队伍LOGO
  • 队伍名称
  • 队伍比分
  • 比赛场次（即MATCH序列号，例如M1、M2）
  • 日期及时间（例如08/25 16:00）

上面所展示的是一个已经很成熟的对阵图。

本站所有对阵图的制作灵感均来源于萌娘百科的对阵形势图模板，在此感谢在萌百电竞专题中制作相关模板的编辑者。

经过长时间的不断改进，本站的对阵图相对萌百已有了较大改良，以下将详细介绍。

萌娘百科采用的对阵图制作方式是，将所有信息均放在同一个表格内。

但这样会有一个弊端：

假设我们现在举办了一场比赛，采用4队单败淘汰赛制，那么对阵图应该是这样的，

半决赛     总决赛
           
  
     　
         
　       
         
      
    

我们可以很清晰地看到，在半决赛的两场比赛中，有着两行的间隙，但实际上只需要留出一行就够了，这就造成了不必要的空间占用。

在8队双败、16队单败等对阵图中，这种空间占用将是致命的，读者无法直接读取全部的信息，所以我们必须尽可能地压缩空间，在同一个大表格中写出所有信息并不可取。

那么该怎么改良呢？

最开始我设想的方式是将原先的一个25px高的单元格拆分为两个12.5px的单元格，同时写入一个大表格，但这样写起来过于麻烦。

后来我从萌百的瑞士轮模板中找到了灵感。萌百的瑞士轮表达是这样的： 

{|
|
0-0组表格
|
1-0 0-1组表格
|
1-1组表格
|}

我当时的设想是，将大表格拆分为若干个高度相同的小表格，以此实现压缩空间的目的，经过试验后发现可行。

现在本站内重制后的对阵图模板（模板:对阵图/x队双败）均采用此原理，即先从第一大列写起，随后排线，再写第二大列，以此类推。

原理介绍完毕，现在来开始着手制作吧。

Chapter 2 制作之前

在开始制作之前，我推荐你自己开一个excel表格，自己先数一数总共需要多少行多少大列。

这样在之后写模板中会有很大用处。

根据上述原理，我们在制作模板中将采用323的方式，3代表一个大列（LOGO、队名、比分，共3列），2代表排线需要的两列。每有一个“3”就代表有一轮比赛。

如果我们要做一个8队单败的对阵图，可以得出总共需要3轮比赛，那么我们可以按照32323（3轮比赛，其中用2列连接线连接）的方法进行制作。

另外，我们规定：

  • 在每个大列中，LOGO宽度为25px，队名宽度为135px，比分宽度为25px。总宽度为185px。
  • 连接线宽度为25px，总宽度为50px。
  • 阶段标识和比赛信息的单元格高度必须为25px。

以上为默认值，实际使用中只允许更改队名宽度，可以视情况更改宽度。

Chapter 2.1 阶段标识

阶段标识是对阵图中最简单的一部分。 

{| border=0 cellpadding=0 cellspacing=0 style="font-size: 90%; width:max-content !important"
| colspan="3" style="text-align:center;border:1px solid #aaa;background-color:#f2f2f2;height: 25px;" | <big>'''{{{RD1|附加赛 // BO5}}}'''</big>
|-
| width={{{LOGO WIDTH|25}}} style="border-width:1px 0 1px 1px; border-style:solid;border-color:#aaa;" bgcolor=#f9f9f9 | 
| width={{{TEAM WIDTH|135}}} style="border-width:1px 1px 1px 0; border-style:solid;border-color:#aaa; " bgcolor=#f9f9f9 |
| width={{{SCORE WIDTH|25}}} style="text-align:center;border:1px solid #aaa; height: 25px; " bgcolor=#f9f9f9 | 
|}
附加赛 // BO5

这样就做好了一个阶段标识框。

一般情况下，参数设置为RD1 RD2等，有多少轮就设置多少个参数，如果有败者组，可以设置败者组的阶段标识为LRD1，LRD2。

Chapter 2.2 比赛信息

对阵图里最恶心的一部分，参数贼拉多，写完了自己都看不懂。在琢磨这一部分时，请善用AI工具和查找替换工具。

附加赛 // BO3
M108/32
VCTCNASE.png
Attacking Soul Esports
 0
VCTPACDRX.png
DRX
 0

我们用2队单败的对阵图来举例。

除掉表头的阶段标识外，总共出现了8个信息：

  • 第2行：比赛场次序列号，比赛时间
  • 第3行：队伍1 LOGO、队名、比分
  • 第4行：队伍2 LOGO、队名、比分

LOGO、队名、比分为主要信息，比赛场次序列号，比赛时间为次要信息，我们先介绍次要信息的写法。 

{| border=0 cellpadding=0 cellspacing=0 style="font-size: 90%; width:max-content !important"
......
| colspan="3" style="height: 25px; vertical-align:bottom;" | {{{RD1 MATCH12|M1}}}<span style="float:right;">{{{RD1 DATE12|DATE}}}</span>
......
|}

这里涉及到两个新参数：RDx MATCHab和RDx DATEab。

x为比赛进行的轮数，应该与阶段标识相对应。ab为队伍。

如果是胜者组第一轮，队伍1对阵队伍2，那么参数应该设置为RD1 MATCH12 / RD1 DATE12。

接下来是主要信息。 

|RD1 LOGO1= |RD1 TEAM1= |RD1 SCORE1=
|RD1 LOGO2= |RD1 TEAM2= |RD1 SCORE2=

这六个参数相对易懂。RDx中的x仍然和阶段标识相对应。

接下来我们需要搞清楚主要信息的单元格的基础样式。 

{| border=0 cellpadding=0 cellspacing=0 style="font-size: 90%; width:max-content !important"
......
| width={{{LOGO WIDTH|25}}} style="border-width:1px 0 1px 1px; border-style:solid;border-color:#aaa;" bgcolor=#f9f9f9 | 
| width={{{TEAM WIDTH|135}}} style="border-width:1px 1px 1px 0; border-style:solid;border-color:#aaa; " bgcolor=#f9f9f9 |
| width={{{SCORE WIDTH|25}}} style="text-align:center;border:1px solid #aaa; height: 25px; " bgcolor=#f9f9f9 | 
|-
| style="border-width:1px 0 1px 1px; border-style:solid;border-color:#aaa;" bgcolor=#f9f9f9 | 
| style="border-width:1px 1px 1px 0; border-style:solid;border-color:#aaa; " bgcolor=#f9f9f9 |
| style="text-align:center;border:1px solid #aaa; height: 25px; " bgcolor=#f9f9f9 | 
......
|}

需要说明的是，{{{LOGO WIDTH|25}}} {{{TEAM WIDTH|135}}} {{{SCORE WIDTH|25}}}这三个参数在每个大列中出现一次即可，不必重复。

但是只有基础样式还不够，我们赋予了这一部分更多的功能，

（其实说到这里就可以讲如何排线了，不过还是要讲一些已经实装的进阶功能）

在旧版的对阵图中，我们展示LOGO的方式都是使用{{{RD1 LOGO1|}}}参数，然后在模板中填写|RD1 LOGO1=[[file:VCTCNEDG.png|25px|link=]]。

现在我们对此加以了改进，直接在模板中将参数包裹文件链接，例如[[file:{{{RD1 LOGO1|}}}.png|22px|link=|center]]，这样在填写参数时只需要填写VCTCNEDG即可。

我们在无畏契约赛事中经常能够见到一些队名过长的队伍，名称太长时会导致对阵图排版错乱，以前的解决办法只有一味地增加单元格宽度。

好在本站实装了滚动文本js，得以解决这一问题。

现在我们用{{滚动文本|{{{RD1 TEAM1|TEAM 1}}}|type=1|pause=0|space=15|width={{{TEAM WIDTH|135}}}px|css=display:inline-block;}}这种方式将队伍名称的参数包裹起来就可以了。

在旧版的对阵图中，我们展示比分的方式一直是直接使用'''2'''这种语法包裹队名和比分，以此来表示某队伍获胜。

但在实际使用中这种语法过于麻烦，因此我们实现了比分自动对比机制。

此部分感谢编辑组成员散令的协助。 

{|
......
| width={{{LOGO WIDTH|25}}}  style="border-width:1px 0 1px 1px; border-style:solid;border-color:#aaa;" bgcolor=#f9f9f9 | [[file:{{{RD1 LOGO1|VCT}}}.png|22px|link=|center]]
| width={{{TEAM WIDTH|135}}} style="border-width:1px 1px 1px 0; border-style:solid;border-color:#aaa; {{#ifexpr: {{{RD1 SCORE1|0}}} > {{{RD1 SCORE2|0}}} | font-weight:bold; }}" bgcolor=#f9f9f9 | {{滚动文本|{{{RD1 TEAM1|TEAM 1}}}|type=1|pause=0|space=15|width={{{TEAM WIDTH|135}}}px|css=display:inline-block;}}
| width={{{SCORE WIDTH|25}}} style="text-align:center;border:1px solid #aaa; height: 25px; {{#ifexpr: {{{RD1 SCORE1|0}}} > {{{RD1 SCORE2|0}}} | font-weight:bold; }}" bgcolor=#f9f9f9 | {{{RD1 SCORE1|0}}}
|-<!--LINE 4-->
| style="border-width:1px 0 1px 1px; border-style:solid;border-color:#aaa;" bgcolor=#f9f9f9 | [[file:{{{RD1 LOGO2|VCT}}}.png|22px|link=|center]]
| style="border-width:1px 1px 1px 0; border-style:solid;border-color:#aaa;{{#ifexpr: {{{RD1 SCORE1|0}}} < {{{RD1 SCORE2|0}}} | font-weight:bold; }}" bgcolor=#f9f9f9 | {{滚动文本|{{{RD1 TEAM2|TEAM 2}}}|type=1|pause=0|space=15|width={{{TEAM WIDTH|135}}}px|css=display:inline-block;}}
| style="text-align:center;border:1px solid #aaa;height: 25px;{{#ifexpr: {{{RD1 SCORE1|0}}} < {{{RD1 SCORE2|0}}} | font-weight:bold; }}" bgcolor=#f9f9f9 | {{{RD1 SCORE2|0}}}
......
|}

这一部分共涉及4个单元格，两队的队名和比分。

它的原理就是比对SCORE1和SCORE2谁更大，如果SCORE1更大，那么队伍1的名称和比分都加粗，反之亦然。

Chapter 2.3 连接线

依然是很简单的一部分内容。

只要掌握了表格的边框部分知识就能看懂了。依然推荐查询MGP:Help:表格。 

| style="border-width:0 0 1px 0; border-style:solid;border-color:#black;" |

“如果border-width后面跟着四个值，四个数字分别代表上、右、下、左边框的宽度（顺时针↑→↓←）。”

如果设置为“1px 1px 0 0”时，就会得到┐这样一个连接线。

Chapter 3 制作方法（超级拼装！）

取自“https://wiki.biligame.com/valorant/index.php?title=帮助:如何制作赛事对阵图&oldid=10510”