6. Workshop characters
Yes, workshop is also here! Kinda. Some characters are already done, but workshop is so huge I can't do them all. But don't worry, I can guide you through the process!
First of all, to make the Stream Tool use the workshop character list, you just need to go open the interface settings and check the Use workshop characters box. The interface will read all folders inside Resources/Characters/_Workshop/ and add each folder name to the character list. You can add or remove the folders you want to make your own workshop character roster.
You want to add a new workshop character? Don't worry, I'll guide you through. Before starting though, someone may have done the character you want to add already. Atm, these are the public workshop ST drive folders:
WARNING: Workshop characters made for versions earlier than v9 will not work, as they need a new _Info.json file and a new folder structure. The link below contains many workshop characters, but those may not work! Continue reading if you want to know how to fix them, or to make your own.
- Snolid's drive (outdated)
Do you want your workshop character drive folder to be included here? Send me a message through Mastodon or the ST Discord server!
First of all, we need the character assets. They can be found on your steam folder Steam/steamapps/workshop/content/383980/. Character folders are not named, so you will have to manually find the character you need (unless you already know the character steam code). For this example, we will use Guadua's 1866016173 as it's the "official" example.
Inside the character's folder, you will find a portrait.png file and an icon.png file, and that's what we need. As you can see on the image below (left), the portrait will probably have a lot of air from all sides. I usually crop them so we get as low resolution as possible (right), but hey that's personal preference.
Also, you may have noticed, but all renders already included are upscaled to 400% of its original size. This is so they can show more crisp on the overlay, since the original resolution being so low will make them appear blurry (this has no effect on the vs screen). It's recommended to upscale the character image, but you can also use the original resolution if you want.
If you are going to create an upscaled image, please use point scalling/nearest neighbour! Or else the image won't scale right.
Ok, now that we got the assets, next thing to do is to create a folder in Resources/Characters/_Workshop/ with the name of the character. Then, create 2 more folders: Skins and Icons The character images should be placed inside their respective folders. Rename your default portrait/icon to Default.png.
Next, we need a _Info.json file, where we will create the skin list as well as the image positions for the overlays.
There's a site that will get you started by automatically parsing a colors.gml file into an _Info.json file for you! Please, check it out, it will make your life easier especially for skins.
You can find colors.gml on the script folder of your workshop character.
You can go look at any other already created character to get an idea. For example, this is how Guadua's info file looks:
{
"skinList": [
{
"name": "Default"
},
{
"name": "Blue",
"hex": "416f99-a9c4de-abb6b9-00"
},
{
"name": "Red",
"hex": "922c2c-d8afaf-5e524f-00"
},
{
"name": "Yellow",
"hex": "7c7313-cdcc98-6f856c-00"
},
{
"name": "Grey",
"hex": "5d5d5d-cdcdcd-6b3939-00"
},
{
"name": "Purple",
"hex": "523366-bb98cd-306270-00"
},
{
"name": "Ghost",
"hex": "92cdc7-c1d2d0-799794-00",
"alpha": [0.7,0.7,0.7],
"ea": true
}
],
"colorData" : {
"Default" : {
"ogColor" : [
51, 102, 52, 1,
178, 205, 152, 1,
136, 104, 93, 1
],
"colorRange" : [
20, 11, 19, 1,
3, 23, 18, 1,
2, 9, 35, 1
]
}
},
"scoreboard": {
"neutral": {
"x": -70,
"y": 60,
"scale": 3.5
}
},
"vsScreen": {
"neutral": {
"x": -705,
"y": 65,
"scale": 1.1
}
},
"gui": {
"neutral": {
"x": -25,
"y": 25,
"scale": 3.5
}
}
}Seems complicated, but don't worry! Everything will be explained below:
First thing would be to replace the skinList with your own set of skins for your character. The order of the list will match what will be shown in the GUI. The first skin must be named Default.
As you can see, we can use color codes much like those from the base cast to generate skin images for our character, even if we just have the Default skin image. You can write them with or without dashes however you like, that being said, it needs to be RoA compatible, so make sure to add any 2 numbers at the end.
Here I just dashed after each 6 digits since its easier to read them as hex codes, and added 00 at the end to make it compatible.
Skins can also have extra values:
-
ea: truefor retro shading -
alpha: []for transparency (each part of the array represents a color part). -
force: trueto force the shader to recolor the image. Will also make that skin appear as a custom skin (if not Default).
By default, if the GUI finds an image in the Skins/Icons that matches the skin name, it will use that image, without recoloring it. This is why force: true exists. If you use this, make sure to add a hex code to the skin.
These are the original colors and color ranges of the character. These can be found on the colors.gml script of your workshop character, but you should have those parsed out already if you used the site linked earlier!
You can additionally have different color data sections for specific skins, and they would follow the same structure as the Default one. You can check characters like Absa and Forsburn for examples.
From now on, you can now see the character on the interface. And in the overlay! Right? Well, the image won't show right, because we still have to position it. The json will have different sections to position the images: scoreboard, vsScreen and gui. Now we will focus on the scoreboard, but the other sections follow the same instructions.
In the "scoreboard" section, you will probably see at least a neutral section, along with x, y and scale positions. Yes, it's tedious, but you will have to position the image through code.
So yeah, keep changing those numbers until it looks good!
The neutral positions will be used for every skin unless theres a section with the name of the skin, usually with a different art (for example, for characters will special skins like Ranno's Tuxedo or Maypul's Ragnir, or LoA/HD images).
The gui section will be used for the skin selector on the GUI, and player presets that have this character.
There's a functionality built in for "alt art", made for characters that have a different art for the winning and css screens. Basically, this is for a second collection of images besides the regular skins that share the same position. For this to work, you need create a folder called AltArt inside your character's folder, then name the PNG files just like the normal skins, and lastly, adding an alt section inside scoreboard that works like the rest. You can use Torga's files as an example.
To display alt art on the scoreboard, all you have to do is to check the thing:
If the alt art toggle is enabled, but your character doesn't have alt art files set up, the scoreboard will just show the normal renders.
By default, a workshop character will just use the Aethereal Gates background, but if you want your workshop character to have its own background, you will need to drop the background vid your character's folder, and name it BG.webm. The vid has to be a .webm file.
But let's say your character uses someone else's background, like for example Sandbert using Absa's background. To set that, you need to go back to the character's _Info.json file and where your VS Screen character positions are, you can type a new line with "background": "character".
IMPORTANT: If the background you want to use is on the base cast folder, you will need to add ../ before the character name. If you want to use a workshop character background, just use the character name as is.
If you don't know how to create a .webm video, you can use Kdenlive, or any other tool. The backgrounds included are rendered with vp9, so please render with it if you can!
The GUI now uses icons for the character list. You can find this icon in your Steam Workshop's character's folder. Copy this icon into the Icons folder of your ST character folder (if it doesn't exist, create one) and rename it Default.png. It will now show up on the character selector:
But that's not all! You can have exclusive icons for specific skins if you want. Just drop them here and rename the files exactly like their respective skin names, and it will show up if that skin gets chosen.
Your character icon will automatically be recolored based on the portrait shader. If it doesn't recolor right, you may have to manually edit the character icon to use the same colors as the ones used on the portrait