How to draw a border around a certain part in a 2D texture?

I’m trying to replicate this border/outline functionality.
Uploading: 2023-11-19 00-51-38.mp4…
image

I have created these opacity masks that are used to create puzzle pieces dynamically. I want to use these same masks to dynamically create a border/outline in the white region.

Does anyone know how I could go about doing this please?

Hi Zarrar2802,

Have a look into signed distance fields - basically, rather than a sharp edge in your mask, you have a gradient from white to black around the edges - then your material can say that when the color is white (1.0), it’s the main image, and between something like 0.5-0.999 it’s the outline (you can alter the width just from the lower cutoff)

1 Like

Thanks! Could you recommend some resources for me?

1 Like

I’ve got a tool on the marketplace (rdTexTools) that can create Signed Distance Fields from your texture - here’s a link to a tutorial - it’s more about using them to store textures in a small resolution, but the concept is the same.

The tool creates the mask with the edge at a value of 0.5, so you can also change the outline to be inside the masked area if you wish. (There are other ways of creating the distance fields, a google search should find them)

Something like this material is all you need to do:

1 Like

Hey thank you so much for the solution. Your texture toolset definitely looks like something that would be of use for me.

The material setup you provided doesn’t seem to be doing much for my texture.

I do see a tiny green outline but I’m not sure which parameter to mess with to make it thicker
image

1 Like

You’ll need to create a DistanceField version of your texture first - the thin line you see there will be the aliasing - otherwise it’s almost all either 1.0 or 0.0 - so it is kind of working…

If you’ve got a paint program, you can create a simple DistanceField (not very accurate) by reducing the mask down to something like 64x64 or 32x32 using a sharp resize filter, then resizing it back up to the original size, but using the smoothest resize filter.

1 Like

I see, could I do this inside the material itself? I have a lot of Opacity Masks (360 to be exact) and modifying each one would be unfeasible

Yes you can create SDFs with the GPU, I actually have both c++ and HLSL versions in use in various places - but they’re not fast, there’s a lot of sampling going on, using a pre-made mask is more optimal. Using math to create them does give a lot more options, here’s a link to some interesting ideas (not Unreal based):

rdTexTools can create the SDFs from all selected textures so it can be painless - there’s probably other tools available that can too…

There are other ways to outlines too - you can use PostProcessing outline effects…

1 Like

Thanks! I also need a way to crop a render target. I’m basically using these opacity masks to mask an image and then capture a shot of it to render targets in order to populate puzzle pieces at runtime. I wanted a way to crop the render target to the size of the puzzle piece. Does RdTexTools have something to help me with this?

1 Like

I did add a simple crop but i wasn’t happy with it so removed it, but I’ve added it back onto the ToDo list to re-implement - I’ve been tempted to write an auto crop routine for a while…

1 Like

Thanks! I’ll try the plugin out! <3

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.