T8 Coloring Guide v1.0 - CDDTreborn/Tekken-8-Resources GitHub Wiki
To try and help readability, I've sectioned off the guide so users can expand or collapse the areas to read at their discretion.
BLUF: Tekken 8 uses an ID system to establish up to 16 specific areas of control per material instance to apply color or other specific details through a set of material functions in Unreal Engine. This ID system is the foundation of the coloring system within the game and has allowed the devs to significantly increase the quality and control of the materials used.
If that didn't explain everything you need to know then keep reading.
What is a mask?
A mask is as simple as it sounds. It covers or masks something. In texturing we use black and white masks to show what areas are being covered; Black is not covered at all, white is fully covered, and anything in between has varying degrees of opacity. In textures, we can use this to isolate specific areas of the texture so we can put whatever we want there without affecting the rest of the texture. In Tekken 8 we get to use up to 16 masks total per texture compared to the 4 we could use in Tekken 7 which can significantly decrease the amount of materials needed to get the same or better results. It does this, by utilizing channel packing and giving the devs up to 4 masks per color channel.
What is a channel?
Every texture is made up of 4 channels: Red, Green, Blue, and Alpha. These channels are just pixels with values between 0.0 (black) and 1.0 (white). When these channels are combined we get colored images with or without transparency. If a texture does not have transparency then the alpha channel defaults to full white (1.0) even if you can't select it.
How do masks and channels work together?
This is where things get a little tricky but once you understand the concept it should get easier again. In Tekken 8, we get to use up to 4 different masks per channel. The game differentiates the masks in the channel by their particular values. A person using this technique for themselves can in theory pack even more masks into a channel by establishing more values but that's not us...we're modders; which means we have to stay within the game's structure and design for now. Here's how it works mathematically.
If a user wanted to use a single mask in a channel they would set the mask to have a value of 1.00. Easy. If the user wants to use four masks in the channel they would need to establish 4 different values per each mask. Since we are modders we need to use the values the devs set for us to use the devs system for coloring. I've gone thru many textures in the game and after all of my research if figured out what the values are depending on how many masks will be used in a channel. The chart below shows what values are depending on how many masks per CHANNEL..not in total.
No. of Masks | 1 | 2 | 3 | 4 |
---|---|---|---|---|
1 | 1.00 | |||
2 | 0.212 | 1.00 | ||
3 | 0.89 | 0.397 | 1.00 | |
4 | 0.05 | 0.212 | 0.521 | 1.00 |
What are IDs?
IDs are the way the game devs refer to utilize the masks. As stated before, we have up to 16 potential masks and so we have 16 IDs. I didn't say potential, because IDs are finite and exist whether we use them or not. IDs start at ID01 and go all the way to ID16. Each channel is given a specific set of IDs to use.
Channel | IDs |
---|---|
Red | 01-04 |
Green | 05-08 |
Blue | 09-12 |
Alpha | 13-16 |
What are ID Maps?
ID Maps are the texture images we create and import into UE. To make a texture map you need to use the information above to determine a few things:
- how many areas do you want to color with that material
- do you need/want any of the masked areas to overlap
- what channels do you want to use for each mask
- based on the number of masks per channel, what value will each mask need to be
ID Map Example A
A simple texture with 3 areas to color. One area is the main part of a shirt, one area is a tie, and one is some buttons. None of the areas currently overlap and you want to be as simple as possible with the mask so only 1 color per channel.
So we would likely use RGB and not A. Each channel is only using 1 mask so, per the chart, each mask value will be 1.0. Nothing is overlapping so it doesn't matter what area is masked in any particular channel. Pretty simple.
Image with additional detail
This is a screenshot from Blender. The mesh (right window) is a simple shirt with a tie. The four images in the upper left show 3 separate masks and a blank mask. The bottom left is a blender material shader with each image acting as a mask fed thru a mix color node to ensure its full white (1.0) and then each mask is added to a channel in the mix color node that combines them into one and is visible on the shirt mesh.
ID Map Example B
You have a dress with a fancy pattern design that you want overtop of it. There's a trim for the dress and the buttons for the dress you want colored are baked into the base texture. In total, you want to use 4 masks. You don't know how to make a proper alpha channel and aren't willing to try at this time.
So we have 4 masks and two overlapping situations: pattern over design and buttons overtop of everything. We aren't going to use the alpha so we will need to have at least two masks in one of the remaining RGB channels. In this case, we'd put the base mask for the dress in the R channel. We'd put the pattern mask in the green channel so that it's on top of the dress mask, and then we'd use the B channel for the buttons and the trim since both need to overlap the base and/or the trim. The buttons are not in a separate UV space but they are far removed from the trim so they won't need to overlap in the mask. The R and G masks will both be 1.0 and the B masks will be 0.212 and 1.00 respectively.
Image with additional detail
In the bottom left window, there are a bunch of things going on. The group of image nodes to the far left shows the Dress pattern in the R channel, the Stripes in the G channel, and the Buttons and Trim in the B channel. The B channel has the buttons masked section set to a value of 0.212 and the trim parts to 1.0. Next to that setup is the Blender version of the math and how the game handles masks like this. The channels of the texture are split and the R channel is applied, followed by the green channel, and then the blue channel with the alpha being last. The Blue channel has more than one shade of grey in it so some fun math is required to separate the colors back into separate masks. The game then applies whatever custom colors we want using those masks. This is shown in the right window with the customized mesh on the left and the combined RGBA ID mask on the right.
Getting the ID Map into the MI
ID Maps are loaded into a material instance the same as other maps. If we did things correctly the ID Map portions should be 95-100% complete. If you are not using the alpha channel but can't figure out how to blank out the channel you can use the Texture editor in UE. Once your good to go it's time to look at the SplitNumberPerChannel parameter.
How to set Alpha to 0 in UE
forthcoming...
What is a SplitNumberPerChannel?
Now we need to set the SplitNumberPerChannel parameter. This is a vector parameter which means it is made up of 4 parts which is often used for colors (e.g. RGBA) but can also be used to store data. Tekken 8 uses this property to identify and tell the game what values to isolate from the ID Map color channels and set to the appropriate ID numbers. If this parameter is not aligned with what you are using in your ID mask then it's very likely your colors will be messed up or not even work at all.
If we take the information from Example A which had 1 mask in each of the RGB channels and none in the A channel the split number parameter would read:
Channel | Value |
---|---|
R | 1 |
G | 1 |
B | 1 |
A | 0 |
I prefer to write this in this format RGBA 1110 and will refer to it like this for the rest of this document.
If we look at example B we had 1 mask in each of the R and G channels with 2 in the B channel and none in the alpha. The SplitNumber would be RGBA 1120.
We also need to understand how the split number and the IDs work together. In example A, we have RGBA 1110 and we need to know what IDs this is affecting. As stated before, each channel has a specific amount of IDs assigned to it and since the IDs are being run through some math we can easily tell which IDs will be active per channel. So I'll show a chart showing how all of this works together using Example A.
Channel | ID |
---|---|
R | ID01 |
G | ID05 |
B | ID09 |
We don't care about anything in the Alpha channel since we have no masks there.
For Example B it would look like this...
Channel | ID |
---|---|
R | ID01 |
G | ID05 |
B | ID09 |
B | ID10 |
We have one mask in the R and G so we only use the first ID of that range. For B we have two masks so we use the first two IDs in the range.
I have an emulated master material with preset_materials you can install for use in the editor if you want to try them out: Emulated Materials
The only way to use these parameters in your mods is to use 1. Peek's scripting process to import material instances that contain all the parameters from the game, using an MI parented to one of my emulated preset_materials, or creating your own emulated material with the correct parameters. The biggest difference is the functionality of the material instances in the editor; Peeks gives you everything you need quickly but it does not provide a real-time view but will be visible in the game and mine provides a real-time view but could be hard to install if there is a language barrier or unfamiliar with the process.
Only the MI that are used for the main characters, their items, and the avatars are colorable. I also haven't done a lot of extensive research on the avatar materials yet so I recommend sticking with the main character materials. Additionally, we cannot use character materials with cloth physics.
ID Settings
Now that you have an ID Map, set your SplitNumber parameter, and understand what IDs you will be working with you can start applying color and other edits to your masks. If using one of the above-mentioned resources you will see something similar to this or exactly this if you are using my resources:
It's pretty simple. Make sure to check the box next to the ID you'll be changing, and set the color or other parameters as needed.
Before you try and make the items colorable i'd suggest doing a test package to see if the colors are applied correctly. If your mod is using a dummy CI with nothing in it, or a referenced CI that doesn't have your material listed in it then the game will default to whatever is set on the material itself. If your material is working you'll see it...but if not then you won't. If everything is good to go or you don't need to test it out, continue reading.
What is a CI?
The CI is a Customization Item Asset used in the game to override parts of a material instance so that the player can customize their character or item. You can use Fmodel to look up the CI for an item: Content / Character / Item / Customize_Item / (char abbreviation) / (slot category) / CI_. These items allow you to swap out an existing material that is assigned to a mesh, set default coloring options for the item, change some of the material parameters like roughness or metallic, and turn on or off IDs. In the community there are two ways of approaching this item...create a custom one yourself or use Peek's Python scripts to import a game one then edit that. I only know how to make custom ones.How to set up the CI
A CI is primarily two parts: AssignPerMaterialArray (Material Assign) and the DesignAssignSlotArray (Slot Assign)
Screenshot
When you make a custom CI, you will notice that there are "+" next to each array and nothing under them. Since the purpose of this asset is to override existing stuff, it makes sense that it will do nothing if you don't give it anything to override, and the slot will become uncolorable. This is helpful when making non-colorable mods; in Tekken 7, if we did this, the user could still try to color the mod and cause the game to crash.
Before I go into detail, I will go through the process of what happens in this asset.
BLUF: The Assign per Material section provides an index/array for you to set the material to be colored or override an existing material. Within this index is a DesignAssignArray that allows you to set the color and other parameters per ID, decide which IDs will be colorable, and assign them to a color slot. It is important to note that IDs go from 1-16 but indexes go from 0-15. Repeat this process for every material you want to be included in your CI except for references to in-game skin material instances. There's some cleanup to be done that we can do once the Design Assign Slot Array is set up. The DesignAssignSlotArray is where you set the slots that correlate with the slots identified in the AssignPerMaterialArray indexes. We don't set up any slot numbers or materials here as it relies on the slot numbers we already defined. The first index will be whatever was set to slot 0 and so on for all of the slots assigned in the materials we included. The final cleanup is making sure that the ScalpMask Index is set to -1, that the slot number in every unused index is set to -1, the IsEditUserAll is set for all materials, the IsEditUser in all indexes in the AssignPerMaterialArray not being used is off and ofc on for the ones its being use for, the same thing for the Is Enable Id, and for the DesignAssignSlotArray each index has the Is Slot turned on.
If all that makes sense then you should be good to go but if you want more information, keep reading. I'm going to demo creating the CI for each of the examples.
Example using both the Examples as individual MI.
To help make sure things run smoothly I will often draw u a table that I can reference throughout the process.
MI: MI_Example A RGBA 1110 MI: MI_Example B RGBA 1120 I've also decided that the G channel won't be colorable by the user for either MI.
MI | ID | Color | APMA Index | Slot | DASA Index |
---|---|---|---|---|---|
MI_Example A | 01 | cd476a | 0 | 0 | 0 |
"" | 05 | E91F52 | 4 | -1 | n/a |
"" | 09 | 7E0000 | 8 | 1 | 1 |
MI_Example B | 01 | FCE500 | 0 | 2 | 2 |
"" | 05 | 2F5EBD | 4 | -1 | n/a |
"" | 09 | 485b3e | 8 | 3 | 3 |
"" | 10 | 721C59 | 9 | 4 | 4 |
- Create the CI by right-clicking and choosing Polaris Customize Item
- Click on the "+" next to AssignPerMaterialArray to create a new index. Expand the index tab. Set the Material Assign Preview to your first MI (MI_Example_A) and make sure the Is Edit User All box is checked.
- Check the "+" next to DesignAssignArray to create 16 Indexes (0-15)
- Since we will be using ID01 we will expand 0. Then expand the DesignAssignColor section. Set your color in the Assing Color section. At the bottom of this index check the box next to Is Edit User and Is Enable ID. Since this will be the first slot make sure it says 0 and the Scalp Mask Index is set to -1.
- The next ID is ID05 so we will expand Index 4. This ID will not be colorable but we still set it up exactly the same however make sure the Slot Number is set to -1 and the Is Edit User is not checked.
-
Repeat Step 4. for all IDs that will be colorable and Step 5. if coloring them with ID but not letting the user color them. Be sure to keep track of the slot numbers and remember that the index is always 1 less than the ID number.
-
With MI_Example_A complete you can move on to MI_Example_B starting at Step 2. It's important to remember what your last slot number was so that you continue the order for the new MI.
- Once you have completed setting up all the MI in the AssignPerMaterialArray collapse all of the open tabs and hit the "+" next to the DesignAssignSlotArray to make some new indexes. You will need to make as many indexes as you have colorable items. In this case, we have 2 colorable IDs in MI_Example_A and 3 in MI_Example_B so we will need 5 indexes in total (0-4).
- Setting up the Design Assign Slot Array is almost the same as the Assign Per Material Array with a few small differences. Expand the Index you want to edit (in this case Index 0), and make sure the Is Edit User and Is Slot box is checked. The Slot Number and Scalp Mask Index will be -0 for all indexes in this section.
-
Repeat this step for each ID you set to a slot number. Depending on how many MI and slots you intend to use, this is where having a notepad on the side is a good idea for organization.
-
Once all of these are complete there is one last bit of clean-up required. I have found that I get much more reliable results when I ensure the unused indexes are setup as well. Don't worry, the setup is very minimal. We need to ensure every Scalp Mask Index for every index used in either array is set to -1. We also need to make sure that every for every index in the Assign Per Material Slot Array that is not being used has the Slot Number set to -1. Thankfully, UE5 has a pretty good search function so you can type "scalp" at the top and all of the Scalp Mask fields are shown. You can do the same thing with Slot Number by simply typing "Slot Number".
- That's pretty much it. Keep in mind that it is very easy to skip over steps or get index and ID numbers confused whenever starting out so be sure to double-check what's going on if you run into an error. This guide is also for a fully custom CI. If you choose to work with an imported CI, you may need to try and stay within the setup the devs have established. I don't use that method but many others do and yo can ask for assistance in the ModdingZaibatsu discord.
Texture and Mesh Prep
Here are some settings that I and others have found that can help to make implementation of the ID system in the game a bit cleaner and more reliable.
- Texture Setup
- Verify that your ID_Map has an alpha channel. If you can't click on the A then it does not have an alpha channel. You can use the method I provided earlier to set your alpha to 0; however, IMO it's best if imported with an Alpha detected. In the screenshot I used, you can see the alpha channel exists but the Source Alpha Detected says False.
- In the details section make sure MipGenSettings is set to NoMipMaps, Texture Group is set to Vehicle, Compression Settings are set to Vector Displacement Map, and sRGB is turned off.
- In your Mesh, search for "Precision" in the Asset Details search bar and make sure Use Full Precision UVs is turned on.