Trouble using with materials instead of images

[Sessional]

I'm trying several things here to use this with some materials instead of an image so that I can stitch together button icons at run time instead of modifying every single icon.

So. The button works if I use the hex image.

I then use this same image to try and mask a material:

And then set this as the brush image:

And it doesn't detect any hit testing 😢

I can see that it's this chunk right here relying on a Texture2D but not being able to use a material. https://github.com/JanSeliv/CustomShapeButton/blob/main/Source/CustomShapeButton/Private/SCustomShapeButton.cpp#L157

Any guidance?

[JanSeliv]

UPD: materials support is implemented:
#7 (comment)

---

Hi there!

Thanks a lot for checking out the Custom Shape Button. Your interest means a lot!

You're right about the issue. Currently, it supports only textures, not materials.

I'm excited about your idea to use materials for making button icons on the fly, it could make the Custom Shape Button even better.

When I start updating the Custom Shape Button to UE5.4, I'll check if adding material support is possible. I can't promise it will be implemented, but I'll definitely look into it.

[Sessional]

Hi there!

Thanks a lot for checking out the Custom Shape Button. Your interest means a lot!

You're right about the issue. Currently, it supports only textures, not materials.

I'm excited about your idea to use materials for making button icons on the fly, it could make the Custom Shape Button even better.

When I start updating the Custom Shape Button to UE5.4, I'll check if adding material support is possible. I can't promise it will be implemented, but I'll definitely look into it.

I don't know how you can get at the pixels, but the GetResource() call can be casted to a UMaterialInstance, and aside from the deprecated looking property name, the brush has the image size available on it.

	const FSlateBrush* ImageBrush = GetBorderImage();
	const int imageX = ImageBrush->GetImageSize().X;
	const int imageY = ImageBrush->GetImageSize().Y;
	TextureRes = FIntPoint(imageX, imageY);
	RawColorsPtr->SetNum(TextureRes.X * TextureRes.Y);
	const UMaterialInterface* resource = Cast<UMaterialInterface>(ImageBrush->GetResourceObject());

I imagine there's gotta be some way to sample the material, seeing as slate does it (and capturing to render target must too?), but I don't have any clue what magical craziness that would be.

I tried a work-around of dumping the material to a render target, it's pretty awful. I suspect in a perfect world where performance at run time is the most important thing ever this might be what you'd want to do, but from a material instance aspect it kinda crushes the value as you make more instances. Here's what I had to do:

1. Modify the material:
   Swap Material Domain to Post Process
   Check the Output Alpha box.

2. Draw Material to Render Target (I used an editor utility like below)

3. Create static texture from Render target

[Aureliaar]

As a workaround, maybe have an OverrideAlphaMask in case you want to use a material, and provide the alpha mask separately?

[JanSeliv]

• Along with updating the plugin to UE5.4, I've implemented Materials Support as an alternative to textures.

Simply connect your mask to the 'Opacity' input:

This allows you to select your material in the usual way in the 'Button Style' instead of a texture, without any extra steps. See documentation here.

Download the Sample Project from the Release page, where the UE Logo is used as an example of material usage:

I have tested materials support both in PIE and the shipping build. However, I would appreciate it if someone could confirm that it's working as expected.

[Sessional]

Looks good. BUT, there is one thing (this might be a me problem). Looks like it eats the it test of overlapping buttons even though the material opacity is set?

2024-06-09.18-45-09.mp4

[JanSeliv]

Thank you for confirming this feature. I really appreciate your interest and for raising the issues.

I confirm that overlapping multiple custom shape buttons with their alpha causes the issue. Creating custom hit-test geometries is needed. I will definitely take a look during UE5.5 integration.

Feel free to share your ideas or links to possible solutions; it will greatly assist me in resolving this issue more quickly.

[Sessional]

Thank you for confirming this feature. I really appreciate your interest and for raising the issues.

I confirm that overlapping multiple custom shape buttons with their alpha causes the issue. Creating custom hit-test geometries is needed. I will definitely take a look during UE5.5 integration.

Feel free to share your ideas or links to possible solutions; it will greatly assist me in resolving this issue more quickly.

I can't seem to find anything good on where to even begin. I was hoping I could tinker with hover events but that didn't appear to work. Is a hit geometry a slate widget thing?