Using Alpha Masks in Color Maps to Customize/Tint Base Colors

[blutzer]

In this guide, we’re exploring the art of using alpha masks to tint colors – a useful feature that can enhance your art, color palettes, and improve the breadth and efficiency of materials and textures in your Roblox creations.

Why consider this technique?

This method allows you to utilize both the base color of your mesh while also taking advantage of a high-fidelity PBR Textures through Surface Appearance. To create color diversity in your experience, you can simply duplicate the same model and adjust the base color instead of wasting time and performance by importing multiple duplicate textures with baked-in colors. This process is also a critical element for supporting user-customizable avatar character skin tones.

It’s a time-saver, a memory-saver, and a performance booster! Say goodbye to uploading numerous color maps, and hello to faster loading times and reduced VRAM usage. This technique not only enhances your visuals but also streamlines your game development process.

Let’s Get Started

In this guide, I’ll guide you through the step-by-step process of creating an alpha mask texture using Photoshop. You can use many other texture or image editing software as the core concepts will be the same. After creating the image map, we’ll bring it into Studio and set it as a SurfaceAppearance PBR texture where you can modify the base color.

Resources:

For this guide, I am going to use a simple barrel model. To follow along, you can download all resources directly from this .zip file that contains the following assets:

How To Use Alpha Masks to tint the Base Color.zip (5.9 MB)

• Oil_Barrel.fbx
• Oil_Barrel.blend
• Oil_Barrel.rbxl
• Oil_Barrel.psd
• All generated Oil Barrel w/ Alpha Mask Maps
• PBR Maps (Base Color, Normal, Metal, Roughness)
  

Creating the Texture in Photoshop

You can use any image creation software of your choice. In our case, I am using Photoshop. You can also find the provided .psd file for download. When opening the file, you will see a Base Layer that contains the Base Color and Texture map for the oil barrel.

In Photoshop, I am going to duplicate that layer, please see below:

Once I duplicated the layer, I use the Magic Wand Tool and set the Tolerance to 20. Now I can click on areas of my texture map, I would like to tint when using Roblox Studio.

Once my areas are selected, I invert my selection. You can do this by SELECT–> Inverse or by using the Windows Shortcut Shift+Ctrl+I

When I have my selection inverted, I am creating a mask. In the Photoshop Layers Mask, simply click the Mask Icon and you’ll have successfully created your mask. Please see the image below as a reference.

Once this is done, your new texture map will look like the image shown below.

This is exactly what we are aiming for. The masked areas will be replaced by the selected Diffuse Color within our Roblox Material.

Once you are happy with your mask selection and your final result, it’s time to save your image. It’s important to export the image with a file format that supports Alpha Channel information.

In this case, we are going to export the image as a .png file.

Importing Into Studio and Setting the SurfaceAppearance

Once exported, you can now use the newly created Base Color within your Surface Appearance.

If you haven’t already, import the Oil_Barrel.fbx file into Studio using the 3D Importer or add the .rblx file directly to your project.

In the Oil_Barrel object, add a SurfaceAppearance object if there isn’t one already.

Upload your modified textures with the Asset Manager. As a quick tip, you can bulk upload multiple files using this tool. Just upload all your texture images to your Asset Manager, and copy and paste the Texture ID to your ColorMap slot. Make sure to fill in any missing Roughness, Metal, and Normal images as well with the provided textures.

As a result, you can now set the Color property to any color of your choice and retain the rest of your texture.

For an additional tip, if you like to give the entire mesh an overall tint, so that some of the base color bleeds through, you can adjust the opacity of the mask’s “layer opacity” to reduce the intensity of the effect, in Studio.

In the end, it’s up to you with how you would like to control the tint of your base color. Feel free to download the asset pack. The .zip file contains also the Roblox Studio file, ready to go for testing.

Thanks for following along! This technique isn’t just about colors; it’s about making your game stand out and your workflows better with faster color tweaks, quicker game loading, and an overall boost for your game’s performance! Check out our official documentation on PBR Texture Alpha Modes for some additional reading on how to utilize alpha channels in your textures.

Experiment with it, enjoy the process, and feel free to share how it goes! What would you like to learn about next?

[mrfIuffywaffles (Mustang)]

Very interesting. I suck at texturing models, and this looks very simple and easy to understand. Thank you!

[HealthyKarl]

OOOOH WAIT, it’s just transparency. I thought one makes an Alpha Channel that is a custom mask to control tinting and several places.

Hm.

How is this going to impact performance?

Would this also mean that if the Material of a MeshPart is Plastic, it’s going to show the Plastic Texture on the transparent areas as well??

Or is it just the Color Map that is letting transparency through, but the Metalness Mask and everything else, doesn’t?

[C_Corpze (Cartoon_Corpze)]

Thanks so much for this, I was actually curious how some body types in the catalog were able to achieve this “recolorable” property.

Weird that I somehow didn’t think of this, it seems so obvious to use alpha but I wasn’t sure if Roblox shaders supported it.

[ADAMW3D]

Hey HealthyKarl - Sorry for any confusion in the post here. I’ve made some edits above and I’ll clarify for you.

The correct terminology to use here is “Alpha Mask” instead of “transparency”.

You understand everything correctly, and this post is not made to illuminate any new features… the writer just mislabeled the information on accident as “transparency” instead of “alpha mask”.

My apologies for the confusion - I should have caught this error during my editing pass.

[HealthyKarl]

Not sure if I understood what this is about correctly.

Is the Alpha Mask on the Color Map used as Transparency or as a Mask?

Because if it isn’t about Transparency.

Then is the Alpha Mask used as additional data, where the the Values from 0 to 255 indicate the strength of the Tinting? E.g. 255 means Colors tint this part of the Color Map 100% while 0 leaves it untinted or vice-versa 0 means Color tint 100%, while 255 protects it from tinting completly.

Which one of it is it?

[ADAMW3D]

Is the Alpha Mask on the Color Map used as Transparency or as a Mask ?

The Alpha Channel of the ColorMap is passed into the surfaceAppearance. On the surfaceAppearance object, in the properties panel, you can select a dropdown to choose either “transparency” or “overlay”.

When you select either Transparency mode, or Overlay mode, the surfaceAppearance will utilize the data in the Alpha Channel (the mask that you made on your colorMap) to drive either transparency or tinting.

Black pixels in the Alpha Channel represent the areas that will become tinted [overlay mode], or become transparent [transparency mode]

White pixels in the Alpha Channel represent the areas that will remain unchanged [overlay mode], or be visible [transparency mode].

So yes, the Alpha Channel (or alpha mask)'s grayscale information (black, gray, white pixels) represent the intensity of the effect.

[Ascyius]

Very useful method for cutting down on the amount of textures needed.

Is there any idea of how to get the actual material of the basepart to render under the SurfaceAppearance’s alpha?

Such as in a in situation where you need to combine a mesh’s textures with a scaled material, for example if you were making a castle you could add baked details to the architecture models then layer it on top of a standard stone material.

if you were to do this via compositing you would lose most of the base materials detail and it would look terrible.