Formations

This page describes the internal behavior of the main component, and how the most common football formations can be implemented, as well as any desired formation with any number of players.

Understanding formations

Formations are defined by distributing players across position lines:

• gk - Goalkeeper (1 player)
• df - Defenders (back line)
• cdm - Central Defensive Midfielders
• cm - Central Midfielders
• cam - Central Attacking Midfielders
• fw - Forwards (front line)

Line positioning

All position lines are optional; they can be provided or not. The number of players in each line is entirely free, except for the goalkeeper line, which can only contain one player.

This means that if a line is not provided, it will not be considered when rendering the team. However, if it is provided as an empty array (or as null in the case of the goalkeeper), the line will be rendered without any players.

For example, it is possible to render a team without a goalkeeper:

const squad: Squad = {
  gk: null,
  df: [{ number: 2 }, { number: 4 }, { number: 5 }, { number: 3 }],
  cm: [{ number: 7 }, { number: 6 }, { number: 8 }, { number: 11 }],
  fw: [{ number: 9 }, { number: 10 }]
};

2

4

5

3

7

6

8

11

9

10

Or no defensive line:

const squad: Squad = {
  gk: { number: 1 },
  df: [],
  cm: [{ number: 7 }, { number: 6 }, { number: 8 }, { number: 11 }],
  fw: [{ number: 9 }, { number: 10 }]
};

1

7

6

8

11

9

10

This strategy can also be used to create more separation between lines:

const squad: Squad = {
  gk: { number: 1 },
  df: [{ number: 2 }, { number: 4 }, { number: 5 }, { number: 3 }],
  cdm: [],
  cm: [{ number: 7 }, { number: 6 }, { number: 8 }, { number: 11 }],
  cam: [],
  fw: [{ number: 9 }, { number: 10 }]
};

1

2

4

5

3

7

6

8

11

9

10

Player positioning

Players in each line are evenly distributed across it. Additionally, null can be used to occupy a player’s space without rendering anything, adding significant flexibility when configuring formations.

For example, a formation with advanced full-backs, an attacking midfielder positioned wide, and forwards spread out:

const squad: Squad = {
  gk: { number: 1 },
  df: [null, { number: 4 }, { number: 5 }, null],
  cdm: [{ number: 2 }, null, null, null, { number: 3 }],
  cm: [{ number: 6 }, { number: 8 }, { number: 10 }],
  cam: [null, null, { number: 11 }, null],
  fw: [{ number: 9 },  null, { number: 7 }]
};

1

4

5

2

3

6

8

10

11

9

7

To fine-tune the formations, an additional offset can be added using the player’s offset property.

const squad: Squad = {
  gk: { number: 1 },
  df: [{ number: 2, offset: { x: 8 } }, { number: 4 }, { number: 5 }, null],
  cdm: [null, null, null, null, { number: 3 }],
  cm: [{ number: 6, offset: { x: 8 } }, { number: 8, offset: { x: -8 } }, { number: 10 }],
  cam: [null, null, { number: 11 }, null],
  fw: [{ number: 9, offset: { x: 6, y: -15 } },  null, { number: 7 }]
};

1

2

4

5

3

6

8

10

11

9

7

Typical formations

4-4-2

Classic formation with 4 defenders, 4 midfielders, and 2 forwards.

const squad: Squad = {
  gk: { number: 1 },
  df: [{ number: 2, offset: { x: 5 } }, { number: 4 }, { number: 5 }, { number: 3, offset: { x: 5 } }],
  cdm: [],
  cm: [{ number: 7, offset: { x: 5 } }, { number: 6 }, { number: 8 }, { number: 11, offset: { x: 5 } }],
  cam: [],
  fw: [{ number: 9 }, { number: 10, offset: { x: -4 } }]
};

1

2

4

5

3

7

6

8

11

9

10

4-3-3

Typical formation with 4 defenders, 3 midfielders and 3 forwards.

const squad: Squad = {
  gk: { number: 1 },
  df: [{ number: 2 , offset: { x: 7.5 } }, { number: 4 }, { number: 5 }, { number: 3, offset: { x: 7.5 } }],
  cdm: [null, { number: 8 }, null],
  cm: [null, { number: 6 }, null, { number: 10 }, null],
  cam: [{ number: 7 }, null, { number: 11 }],
  fw: [{ number: 9 }]
};

1

2

4

5

3

8

6

10

7

11

9

4-2-3-1

Modern formation with double pivot and attacking midfielders.

const squad: Squad = {
  gk: { number: 1 },
  df: [{ number: 2 }, { number: 4 }, { number: 5 }, { number: 3 }],
  cdm: [{ number: 6 }, { number: 8 }],
  cam: [{ number: 7 }, { number: 10 }, { number: 11 }],
  fw: [{ number: 9 }]
};

1

2

4

5

3

6

8

7

10

11

9

5-3-2

Defensive formation with wing-backs.

const squad: Squad = {
  gk: { number: 1 },
  df: [{ number: 2 }, { number: 4, offset: { x: -5 } }, { number: 5, offset: { x: -5 } }, { number: 6, offset: { x: -5 } }, { number: 3 }],
  cm: [{ number: 8 }, { number: 10 }, { number: 7 }],
  fw: [{ number: 9 }, { number: 11 }]
};

1

2

4

5

6

3

8

10

7

9

11

4-1-4-1

Defensive formation with a single pivot.

const squad: Squad = {
  gk: { number: 1 },
  df: [{ number: 2 }, { number: 4 }, { number: 5 }, { number: 3 }],
  cdm: [{ number: 6 }],
  cm: [{ number: 7 }, { number: 8 }, { number: 10 }, { number: 11 }],
  fw: [{ number: 9 }]
};

1

2

4

5

3

6

7

8

10

11

9

3-5-2

Three in defense with a packed midfield.

const squad: Squad = {
  gk: { number: 1 },
  df: [{ number: 4 }, { number: 5 }, { number: 6 }],
  cm: [{ number: 2 }, { number: 8 }, { number: 10 }, { number: 7 }, { number: 3 }],
  fw: [{ number: 9 }, { number: 11 }]
};

1

4

5

6

2

8

10

7

3

9

11

Formations for other sports

The number of players per line is unlimited, so you can create formations with any number of players. For example, formations for 7-a-side football or futsal:

3-1-2

const squad: Squad = {
  gk: { number: 1 },
  df: [{ number: 2 }, { number: 4 }, { number: 3 }],
  cm: [{ number: 5 }],
  fw: [{ number: 6 }, { number: 7 }]
};

1

2

4

3

5

6

7

2-1-1

const squad: Squad = {
  gk: { number: 1 },
  df: [{ number: 2 }, { number: 3 }],
  cm: [{ number: 4 }],
  fw: [{ number: 5 }]
};

1

2

3

4

5

Other formations

You can see more examples of formations in Examples / Real teams