Formation graphic for football

Steps to create an example of a football formation graphic

Caveat: You need to have Template Editor permissions. It may be sensible when naming new hooks, new templates or new template sets to add "TRAINING" as part of the name, to differentiate your work from 'live' production work. Do consider any 'Delete' actions carefully - is it your work you are deleting?


The Graphic


The aim of this document is to create a template for this graphic:


Formation graphic for football


Predecessors


You will need to have completed all five parts of the Scoreline Graphic, or be familiar with adding images, adding Lookups and with binding controls.


You will need the Southampton v Leicester City Headshots' image set.


You will need the 'PlayerKey to Headshot of Player Image Text' Lookup.


You will need the 'Player Positions' Lookup.


Requirements


To show the following for both the home team and for the away team:

  • The team's name

  • The team's formation

  • The team's manager's name

  • For each player on the team:

    • The player's name

    • The player's shirt number

    • The player's photo


Preview the stops in the animation to view the lines of each team's formation. Note there will be different combinations of stops depending on whether each team is playing a 3 row formation or a 4 row formation, for example:

  • (Home 3) (Away 3)

  • (Home 3) (Away 4)

  • (Home 4) (Away 3)

  • (Home 4) (Away 4)


The Data


The information needed is split between several sections in the 'soccer event-report' schema data. The majority of the data needed will come from the 'player' sections for the player data, the 'associate' section for the manager information and the 'team-stats' section for the formation data.


player:


<player id="PO58376">
<player-metadata player-key="PO58376" position-regular="goalkeeper" uniform-number="1" line-formation-position="1" status="starter">
<name first="Alex" last="McCarthy" full="Alex McCarthy" abbreviation="McCarthy"/>
</player-metadata>
<player-stats team-coverage="single-team" date-coverage-type="event" date-coverage-value="EFBO987619" events-started="1" time-played-total="90">
<player-stats-soccer touches="31">
<stats-soccer-offensive passes-total="25" passes-complete="15" passes-incomplete="10" passes-complete-3rd-final="1" passes-complete-long="8"/>
<stats-soccer-defensive goals-against-total="2" clearances-successful="2" saves="3" save-percentage="0.600" catches-punches="1"/>
<stats-soccer-foul/>
</player-stats-soccer>
</player-stats>
</player>


associate:


<associate id="man163">
<associate-metadata position="Manager" position-source="optasports.com" associate-key="man163">
<name first="Mark" last="Hughes" full="Mark Hughes" abbreviation="Hughes"/>
</associate-metadata>
</associate>

team-stats:


<team-stats score="2" score-opposing="1" event-outcome="win" time-of-possession-percentage="48.3">
<sub-score period-value="1" score="0"/>
<sub-score period-value="2" score="2"/>
<team-stats-soccer line-formation="4231">
<stats-soccer-offensive xmlns:bbc="http://www.bbc.co.uk/sport/sports-data" shots-total="8" bbc:duels-won="48" bbc:aerials-won="20" passes-total="425" bbc:passes-long-total="59" bbc:crosses-total="15" bbc:crosses-accuracy="0.067" bbc:passing-accuracy-opp-half="0.723" bbc:passing-accuracy="0.828" bbc:shooting-accuracy="0.250" tackles-total="14" tackles-won="6" tackles-lost="8" tackles-won-percentage="0.429" bbc:attempts-ibox="5" bbc:attempts-obox="3" shots-on-goal-total="5" corner-kicks="3"/>
<stats-soccer-defensive goals-against-total="1" clearances="37" interceptions="8"/>
<stats-soccer-foul fouls-commited="11" cautions-total="1"/>
</team-stats-soccer>
</team-stats>


Preparation


Preparation - Schema


Using Ignition Post Win Client as a Template Editor


  1. Select the main tab DATA

  2. Select the sub-tab SCHEMAS & HOOKS

  3. Below SCHEMAS:

    1. Data Provider: XMLTeam

    2. Target: Production

    3. Schema: soccer event-report

    4. Sample Data: Southampton v Leicester City


Preparation - Hooks


  1. Using the the node 'sports-content.sports-event.team', create a parent hook

  2. Rename 'Home Team Formation'

  3. Add a constraint:

    1. Using: alignment

    2. = home (Text)

  4. Create the following sub-hooks:

    1. team.team-metadata.name.full

    2. team.team-metadata.alignment

    3. team.team-metadata.team-key (Transform Steps - Skip 'N' Chars, with X=4)

    4. team.associate.associate-metadata.name.full (Rename: Associate Full)

    5. team.associate.associate-metadata.position (Rename: Associate Position)

    6. team.team-stats.team-stats-soccer.line-formation

  5. Create a second sub-hook to 'line-formation'(team.team-stats.team-stats-soccer.line-formation) with the following Transform Steps:

    1. Trim 'N' Chars, where N=3

    2. If 'X' Then 'Y', where X=1 and Y=(4 Home)

    3. If 'X' Then 'Y', where X=2 and Y=(4 Home)

    4. If 'X' Then 'Y', where X=3 and Y=(4 Home)

    5. If 'X' Then 'Y' Else 'Z', where X=4, Y=(4 Home) & Z=(3 Home)

  6. Add a composite hook:

    1. Rename: Formation

    2. Add the following component hooks:

    3. Line Formation

    4. Line Formation


Formation graphic for football


  • Further sub-hook of the parent 'Home Team Formation'

    1. team.player

    2. Rename: Starting Player

    3. Add a constraint:

    4. Using: player.player-metadata.status

    5. = starter (Text)

  • Add sub-sub-hooks to:

    1. player.player-metadata.name.last

    2. player.player-metadata.uniform-number

    3. player.player-metadata.player-key (Add the Lookup: 'PlayerKey to headshot of Player Image text', using 'Image')

    4. player.player-metadata.position-regular (Add the Lookup: 'Player Positions', using 'value')

    5. player.player-metadata.status

  • Clone the 'Home Team Formation' parent hook

    1. Rename: Away Team Formation Hook

    2. Change the constraint

    3. Using: alignment

    4. = away (Text)

  • Within the second 'Line Formation' sub-hook, change the 'Transform Steps' entries to read 'Away' rather than 'Home


  • Viz Scene


    Now to use your hooks in a template with an appropriate viz scene.


    Selecting a Viz Scene


    1. Select the main tab TEMPLATES

    2. Above 'Search Templates'

      1. Select the 'TRAINING Match' template set

      2. Above 'Search Templates'

      3. Click 'Add new Template to TRAINING Match'

    3. Within the sub-tab TEMPLATE

      1. Rename: Formation Graphic

      2. Click 'Select'

    4. Below the BROWSE SCENES sub-pane

      1. Ensure Render Domain = Viz

      2. Ensure Graphics Hub = Post

      3. Expand the folder: BBC-SPORTS_PL2014

      4. Highlight the scene: PL14_L3_FORMATION_V12

      5. Click 'Refresh Thumbnail and Scene Controls'

      6. Click 'Click button to make this the current main scene'

    5. Below SCENE SETTINGS

      1. Click 'Get Defaults' to load the frame count and stop count from the scene

      2. Change the Preview Frame to: 46

      3. Change the Duration (frames) to: 800


    Formation graphic for football


    Adding template controls


    1. In the sub-tab CONTROLS, add a 'Data Selector' control

      1. Set the schema to 'soccer event-report'

      2. Rename 'Match'

    2. Add a 'Data Item' control

      1. BIND to Schedule Condition Hooks.Event Name Abbr

      2. Click 'title' (located at the right-hand end of the control) - it will become green

    3. Add a 'Data Item' control

      1. Label: Home Formation

      2. Hook = Home Team Formation.Formation

    4. Add a 'Data Item' control

      1. Label: Away Formation

      2. Hook = Away Team Formation.Formation

    5. Add a 'User Options' control

      1. BIND to the 'Preview Point' behaviour control (found above SCENE CONTROL OBJECTS)

    6. Within the new 'User Options' control, adding new lines as required, set the following stop points:

      1. Home Goalkeeper - Value: 46

      2. (Home 3) Defence - Value: 86

      3. (Home 3) Midfield - Value: 126

      4. (Home 3) Forward - Value: 166

      5. (Home 4) Defence - Value: 76

      6. (Home 4) Midfield - Value: 106

      7. (Home 4) Forward - Value: 136

      8. (Home 4) Strikers - Value: 166

      9. Away Goalkeeper - Value: 226

      10. (Home 3) (Away 3) Defence - Value: 266

      11. (Home 3) (Away 3) Midfield - Value: 306

      12. (Home 3) (Away 3) Forward - Value: 346

      13. (Home 3) (Away 4) Defence - Value: 256

      14. (Home 3) (Away 4) Midfield - Value: 286

      15. (Home 3) (Away 4) Forward - Value: 316

      16. (Home 3) (Away 4) Strikers - Value: 346

      17. (Home 4) (Away 3) Defence - Value: 266

      18. (Home 4) (Away 3) Midfield - Value: 306

      19. (Home 4) (Away 3) Forward - Value: 346

      20. (Home 4) (Away 4) Defence - Value: 256

      21. (Home 4) (Away 4) Midfield - Value: 286

      22. (Home 4) (Away 4) Forward - Value: 316

      23. (Home 4) (Away 4) Strikers - Value: 346


    Formation graphic for football


  • In the sub-tab CONTROLS, add a 'Data Item' control

    1. BIND to the scene control object:

    2. Text 010 Home_Team_Name

    3. Hook = Home Team Formation.Full

  • Add a 'Data Item' control

    1. BIND to the scene control object:

    2. Text 011 Manager_Name_Home

    3. Hook = Home Team Formation.Associate Full

  • Add a 'Data Item' control

    1. BIND to the scene control object:

    2. RichText 012 Designation_Home

    3. Hook = Home Team Formation.Associate Position

  • Add a 'Data Item' control

    1. BIND to the scene control object:

    2. Image 014 Home_Badge

    3. Hook = Home Team Formation.Team Key

    4. Image Set = 'Scorelines'

  • Add a 'Data Item' control

    1. BIND to the scene control object:

    2. Text 020 Away_Team_Name

    3. Hook = Away Team Formation.Full

  • Add a 'Data Item' control

    1. BIND to the scene control object:

    2. Text 010 Manager_Name_Away

    3. Hook = Away Team Formation.Associate Full

  • Add a 'Data Item' control

    1. BIND to the scene control object:

    2. RichText 022 Designation_Away

    3. Hook = Away Team Formation.Associate Position

  • Add a 'Data Item' control

    1. BIND to the scene control object:

    2. Image 024 Away_Badge

    3. Hook = Away Team Formation.Team Key

    4. Image Set = 'Scorelines'


    Formation graphic for football


  • In the sub-tab CONTROLS, add a 'Data Table' control

    1. BIND to the scene control object: Table 1 HOME_PLAYER

    2. List Hook = Home team Formation.Staring Players

    3. Using the PLAYER_NAME tab from the table:

    4. Hook = Home Team Formation.Staring Players.Last

    5. Using the PLAYER_NUMBER tab from the table:

    6. Hook = Home Team Formation.Staring Players.Uniform Number

    7. Using the PLAYER_PIC tab from the table:

    8. Hook = Home Team Formation.Staring Players.Image

    9. Image Set = Southampton v Leicester City Headshots

  • Add a 'Data Table' control

    1. BIND to the scene control object: Table 3 AWAY_PLAYER

    2. List Hook = Away Team Formation.Staring Players

    3. Using the PLAYER_NAME tab from the table:

    4. Hook = Away Team Formation.Staring Players.Last

    5. Using the PLAYER_NUMBER tab from the table:

    6. Hook = Away Team Formation.Staring Players.Uniform Number

    7. Using the PLAYER_PIC tab from the table:

    8. Hook = Away Team Formation.Staring Players.Image

    9. Image Set = Southampton v Leicester City Headshots


    The below images show the settings for the three sub-tabs within the table (using the AWAY PLAYER as the example):


    Formation graphic for football
    Formation graphic for football
    Formation graphic for football


    Using the Graphic


    Using the Web Client to view your new template. Remember to Login as a Template Editor, as the template is not yet published.


    1. In the 'Templates' pane

      1. Select the 'TRAINING Match' set

      2. Select the 'Southampton v Leicester City' sample data

      3. Select the 'Formation Graphic'


      The 'Edit' pane will populate to the defaults, the 'Preview' pane will display a render as per 'Stop 1', with Southampton (the home team) depicted, with their formation set to '4-4-2', with 'Manager:Mark Hughes' and a depiction of the goalkeeper: 'McCarthy (with a shirt number of '1')'


    2. In the 'Edit' pane

      1. Examine the dropdown for 'User Options', which will have the eight stop points during the scene, select 'Stop 5'

      2. Leave 'Home_Formation' as: 4-4-2

      3. Change 'Away_Formation' as: 4-5-1


    The 'Edit' pane's 'Preview' pane will display a render as per 'Stop 5', with Leicester City (the away team) depicted, with their formation set to '4-5-1', with 'Manager:Claude Puel' and a depiction of the goalkeeper: 'Schmeichel (with a shirt number of '1')'


    The stop points will enable the scene to be viewed at the following points:

    • Home Goalkeeper

    • (Home 3) Defence

    • (Home 4) Midfield

    • (Home 3) Forward

    • (Home 4) Defence

    • (Home 4) Midfield

    • (Home 4) Forward

    • (Home 4) Strikers

    • Away Goalkeeper

    • (Home 3) (Away 3) Defence

    • (Home 3) (Away 3) Midfield

    • (Home 3) (Away 3) Forward

    • (Home 3) (Away 4) Defence

    • (Home 3) (Away 4) Midfield

    • (Home 3) (Away 4) Forward

    • (Home 3) (Away 4) Strikers

    • (Home 4) (Away 3) Defence

    • (Home 4) (Away 3) Midfield

    • (Home 4) (Away 3) Forward

    • (Home 4) (Away 4) Defence

    • (Home 4) (Away 4) Midfield

    • (Home 4) (Away 4) Forward

    • (Home 4) (Away 4) Strikers


    PLEASE NOTE - The below images do not have the headshots as per the graphic you have created.

        Depending on how you have stored all the images for the premier league players, will drive how you use the PLAYER_PIC table control.

        You may not have an image set - it would prove to be too unwieldy.

        You will need to point the table control at a folder location, which will more than likely have the images stored with a meaningful file name such as the player's 'player-key' (i.e. PO58376).

        It is unlikely to be their Full Name (i.e. Alex McCarthy) as there is a strong possibility there may be a player of the same name in the premier league. For example, in the 2018/19 season there was a Danny Ward playing for both Cardiff City and Leicester City.


    The below images depict the typical stops during a match when both teams are playing a 3 row formation:


    Formation graphic for football
    Formation graphic for football
    Formation graphic for football
    Formation graphic for football
    Formation graphic for football
    Formation graphic for football
    Formation graphic for football
    Formation graphic for football

    '


    You could now try the tutorial to produce a Single Substitution graphic, available at the link below:

    Single Substitution graphic

    Or the tutorial to produce a Yellow Red Card graphic, available at the link below:

    Yellow and Red Card graphics

    '