5. Customizing the overlay
I mean the provided overlay is cool and all, but you maybe want to give your own touch to the visuals. Thats fine! Though I have to admit, it's a bit more complicated process than it sounds.
So first of all, the overlay assets can be found on the Resources/Overlay folder. The overlay provided has:
- A basic background.
- A color image representing the player slot.
- Score ticks (both for Bo3 and Bo5).
- A border (with many variants for Bo3, Bo5, and BoX).
But your overlay will probably work somewhat different. Don't worry if you dont have everything! Almost all images will default to a 100% transparent image if not found. Use the pngs provided and customize them however you want, or make your own from scratch!
Some images are used as a border-image, meaning that the code is using parts of that image and stretching it out to be used as boders of a box. Some images have more resolution than actually needed so you can create bigger, fancier borders without having to reposition the image.
Though, it's most likely that you will have to dive into the code to tweak something.
You may need to do some tweaking when doing an overlay that doesn't work exactly the way the original does. I tried my best commenting the code as much as possible so it could be easy for everyone to make the tweaks they need.
The overlay plays an animation whenever the score changes, and you most likely don't want that if you changed the overlay too much. For that specific case, open Resources/Scripts/Scoreboard/Team/Team Score.mjs with your preferred text editor, and in the code you'll find the update function. You can just replace the selected text below with false and call it a day!
Another thing to keep in mind is the character mask, which can be found on the Overlay folder. This is a .png file that will hide everything that's not on the black part of the image. The overlay will actually use the full character render, so this mask is necessary. If you have a different overlay around the character, you will need to also make a new mask so the character doesn't go out of bounds.
Your overlay may be bigger or smaller than the default one, and it may be positioned differently. To position the overlay, you can go to Resources/CSS/RoA Scoreboard.css and up on top of the file you will see a :root section. Change the numbers for --scoreboardX and --scoreboardY to move both scoreboards around!
If you need to move the player/tag texts, you can go to Resources/CSS/RoA Scoreboard.css and search for .wrappersSingles. The wrappers will move both tag and player. To move the texts vertically, change the top value (negative numbers also work). To move the texts horizontally, search for #p1Wrapper below and change the left and right values for all players. Since they are symmetrical, the value should be the same for both the left and the right.
Also, you may need to change the character positions, but don't worry, you don't have to change the positions for each individually! Again, we need to change some code. Open Resources/Scripts/Scoreboard/Player/Player Character.mjs and go to the update function. Here is where we decide the positions for the characters (those get sent from the GUI). Add something like this before changing the transform of #charEl:
pos[0] += 5; //horizontal
pos[1] += 7; //vertical
This will move all images based on their original positions, so all of them are updated equally. The 5 and 7 numbers are just examples, so change them to fit your needs. The numbers can be negative and decimal.
For the pos array, position 0 means the horizontal X axis, position 1 means the vertical, Y axis, and position 2 means scale. I don't recommend you to change scale for repositioning because different images will react differently to that one.