Layout Javascript editing - joaorb64/TournamentStreamHelper GitHub Wiki
CharacterDisplay(element, settings, event)
Sets for the DOM element to display character(s) using settings and tracking the update event event.
| Property | Description | Example |
|---|---|---|
| source | Path to the team or player you want this element to track | score.team.1 will track all players on team 1 from the scoreboard. |
| asset_key | Codename for the asset pack to use. If not set, it gets the largest pack available. | full will get assets from a pack named full under the current game's directory. |
| custom_zoom | Sets custom zoom. If not set, uses 1 for cropped assets and 1.2 for uncropped assets |
1.4 will have a 40% size increase compared to 1. Note that smaller values such as 0.8 won't work for cropped assets, since it would show the image's cut borders. |
| custom_center | Sets a custom centering point for characters' eyesights in the format [x, y], with values ranging from 0-1 |
[0.5, 0.5] sets the centering to the center of the container. |
| scale_based_on_parent | Wether images should scale based on the parent element when there are multiple characters. | true will make it so even if you have more than 1 character in the container, it will still zoom based on the outer element instead of making each character smaller. |
| scale_fill_x | Wether or not to scale to fill in the x axis | true will make the zoom fit in this axis. |
| scale_fill_y | Wether or not to scale to fill in the y axis | true will make the zoom fit in this axis. |
| anim_in | Custom animation definition for the character elements. Defaults to a simple fade with a small delay between each character. Uses gsap animation properties. See gsap for more information. |
{"x": 0, "autoAlpha": 1} will make it so the final position has no horizontal displacement and full opacity |
| anim_out | Custom animation definition for the character elements. Defaults to a simple fade with a small delay between each character. Uses gsap animation properties. See gsap for more information. |
{"x": -10, "autoAlpha": 0} will make the elements start transparent and displaced 10px to the left |
| load_settings_path | Used for loading custom settings.json keys. Use this in case you want to have an extra asset configuration other than the default assets property |
icon will make it look for configurations under the icon key |
| slice_player | Used when you don't want to get all players from a team, in the format [slice_start, slice_end] |
[0, 1] will get only the first player. |
| slice_character | Used when you don't want to get all characters from each player, in the format [slice_start, slice_end] |
[0, 1] will get only the first character for all players. |
| use_dividers | Wether or not to use dividers between character elements | true will make it so all characters share the same container, using a "smart" positioning algorithm. |
Debugging tips
- Always make sure the
settings.jsonfile is valid before trying to debug. You can do so in most IDEs, or using an online tool such as https://jsonformatter.curiousconcept.com/ or DuckDuckGo's embedded validator