Anyone who know how to render multiple textures on a button

Development Programming & Scripting UI
, ,
1

I have a item button class which derives from UButton.
This button class have a texture which will act as the background texture (FrameTex) and it works as expected.
It also need two icons (IconA, IconB) which need to be rendered in the top of the button but I can’t figure out how to get it to work. I have tryed UImage but I do not know how to get it rendered.

All help is appreciated

Code:

void Construct()
{
//FrameTex are the main texture for the button and works as expected.
FrameTex = LoadTextureFromPath(“/Game/FirstPerson/Textures/FirstPersonCrosshair”);
if (FrameTex != nullptr)
{
FrameTex succeded log here
}
else
{
Error log here
}

    //This two needs to be rendered in the top of the button but I can't figure out how to do it.
IconATex = LoadTextureFromPath(A texture path here);
IconBTex = LoadTextureFromPath(A another texture path here);

    I have tried a lot of things with UImage but I can not get it rendered.
//IconAImage = NewObject<UImage>();
//IconBImage = NewObject<UImage>();

/*IconAImage = NewObject<UImage>(UImage::StaticClass());
IconAImage->SetBrushFromTexture(IconATex);

IconBImage = NewObject<UImage>(UImage::StaticClass());
IconBImage->SetBrushFromTexture(IconBTex);*/

}

FSlateBrush MakeBrush(UTexture2D *Texture, const FLinearColor &TintColor)
{
FSlateBrush Brush;
Brush.DrawAs = ESlateBrushDrawType::Type::Image;
Brush.SetResourceObject(Texture);
Brush.Margin = FMargin(FVector2D::ZeroVector);
Brush.Tiling = ESlateBrushTileType::Type::Both;
Brush.ImageType = ESlateBrushImageType::Type::FullColor;
Brush.ImageSize = this->GetDesiredSize();
Brush.TintColor = FSlateColor(TintColor);
return Brush;
}

void UpdateWidget()
{
this->WidgetStyle.SetNormal(MakeBrush(FrameTex, FrameTexTint)); //Background texture for the button (works as expected)

//FLinearColor IconATexTint = FLinearColor(OptData.FIconATintRed, OptData.FIconATintGreen,      OptData.FIconATintBlue, OptData.FIconATintAlpha);
//FLinearColor IconBTexTint = FLinearColor(OptData.FIconBTintRed, OptData.FIconBTintGreen, OptData.FIconBTintBlue);

IconAImage->SetBrushFromTexture(IconATex);
IconAImage->SetBrushTintColor(IconATexTint);
//IconAImage->SetColorAndOpacity(IconATexTint);
IconAImage->SetVisibility(ESlateVisibility::HitTestInvisible);

IconBImage->SetBrushFromTexture(IconBTex);
IconBImage->SetBrushTintColor(IconBTexTint);
//IconBImage->SetColorAndOpacity(IconBTexTint);
IconBImage->SetVisibility(ESlateVisibility::HitTestInvisible);

}

2

Usually for anything UI related I would create a new class inheriting from whatever (e.g. UMyButton). Within that I’d create bindings to whatever other components I’d need. This looks something like:

...
protected:
UPROPERTY(BlueprintReadOnly, Category="Components", meta=(BindWidgetOptional))
class UImage* MyImage;
...

This tells your widget that it can optionally have an image component called ‘MyImage’ on it (which you create and name in the UMG designer). If you change BindWidgetOptional for just BindWidget, then it is no longer optional and you must create MyImage in order to compile correctly.

Your cpp would then look something like:

...
if(MyImage != nullptr)
{
MyImage->SetBrushFromTexture(MyTexture);
}
...

You can set this up through Slate if you want, but I prefer the flexibility of being able to edit positions etc easily in the UMG and just control my logic in code.