Slate, How to Make Fancy Custom SButtons

From Epic Wiki
Jump to: navigation, search

Overview

Author: Rama (talk)

In this tutorial I show you how to make some fancy custom buttons!

I show you how to use images as button background, or as the entire button!

I also show you how to use custom color and font text!

I also give you the code for how to make custom Tool Tips

Lastly I show how to make text highlight when it is hovered over :)

Enjoy!

Video

Here's a video demoing what I am showing you in this tutorial!

<youtube>https://www.youtube.com/watch?v=OfA0jTeqb0A</youtube>

.H

<syntaxhighlight lang="cpp"> //Buttons

 TSharedPtr<SButton> RefreshButton;
 TSharedPtr<STextBlock> RefreshButtonText;
 TSharedPtr<SButton> ClearTileButton;

</syntaxhighlight>

.CPP

FButtonStyle

Both of my example buttons use a special Slate Core Style.

<syntaxhighlight lang="cpp"> .ButtonStyle( FCoreStyle::Get(), "NoBorder" ) </syntaxhighlight>

Rainbow Background Button

<syntaxhighlight lang="cpp"> //The button! SAssignNew( RefreshButton, SButton ) .ButtonStyle( FCoreStyle::Get(), "NoBorder" ) .OnClicked( this, &SDDFileTree::RefreshButtonPressed ) .HAlign( HAlign_Center ) .VAlign( VAlign_Center ) .ForegroundColor( FSlateColor::UseForeground() ) [ //Colored Background SNew(SBorder) .Padding(FMargin(3))

//~~~ Rainbow Image for Button!!! ~~~ .BorderImage( FCoreStyle::Get().GetBrush("ColorSpectrum.Spectrum") ) [ //Button Text!! AssignNew so can change color later SAssignNew(RefreshButtonText , STextBlock) .Text( FString("Refresh (F5) ") ) .Font(FSlateFontInfo(FPaths::EngineContentDir() / TEXT("Slate/Fonts/Roboto-Bold.ttf"), 16)) .ColorAndOpacity(FLinearColor(1,0,1,1)) .HighlightColor(FLinearColor(1,1,0,1)) .ShadowColorAndOpacity(FLinearColor::Black) .ShadowOffset(FIntPoint(1, -1)) ] ] </syntaxhighlight>

Trash Can Button

<syntaxhighlight lang="cpp"> //Resizes the image SNew(SBox) .WidthOverride(64) .HeightOverride(64) [ //~~~ Clear Button / Trash Can ~~~ SAssignNew( ClearTileButton, SButton ) .ButtonStyle( FCoreStyle::Get(), "NoBorder" ) .OnClicked( this, &SDDFileTree::ClearButtonPressed ) .HAlign( HAlign_Center ) .VAlign( VAlign_Center ) .ForegroundColor( FSlateColor::UseForeground() ) [ //Button Content Image TSharedRef<SWidget>( SNew( SImage ) .Image( FCoreStyle::Get().GetBrush("TrashCan") )) ] ] </syntaxhighlight>

Setting The Cursors

<syntaxhighlight lang="cpp"> //Set Cursors ClearTileButton->SetCursor(EMouseCursor::SlashedCircle); RefreshButton->SetCursor(EMouseCursor::Hand); </syntaxhighlight>

Setting the Custom Tooltips

<syntaxhighlight lang="cpp"> ClearTileButton->SetToolTip( SNew(SToolTip) [ SNew(STextBlock) .Text(NSLOCTEXT("FileTree", "Clear", "Clear any currently Loaded Preview Tile! -Rama")) .Font(FSlateFontInfo(FPaths::EngineContentDir() / TEXT("Slate/Fonts/Roboto-Bold.ttf"), 12)) .ColorAndOpacity(FLinearColor(1,0,1,1)) .HighlightColor(FLinearColor(1,1,0,1)) .ShadowColorAndOpacity(FLinearColor::Black) .ShadowOffset(FIntPoint(-2, 2)) ] );

RefreshButton->SetToolTip( SNew(SToolTip) [ SNew(STextBlock) .Text( NSLOCTEXT("FileTree", "Refresh", "Refresh Directory and File Listing, updating to hard drive contents! -Rama") ) .Font(FSlateFontInfo(FPaths::EngineContentDir() / TEXT("Slate/Fonts/Roboto-Bold.ttf"), 12)) .ColorAndOpacity(FLinearColor(1,0,1,1)) .HighlightColor(FLinearColor(1,1,0,1)) .ShadowColorAndOpacity(FLinearColor::Black) .ShadowOffset(FIntPoint(-2, 2)) ] ); </syntaxhighlight>

Updating the Text When Highlighted

<syntaxhighlight lang="cpp"> void SDDFileTree::Tick( const FGeometry& AllottedGeometry, const double InCurrentTime, const float InDeltaTime ) { // Call parent implementation SCompoundWidget::Tick( AllottedGeometry, InCurrentTime, InDeltaTime );


//~~~~~~~~~~~~ // Button Hovering //~~~~~~~~~~~~ if(RefreshButtonText->IsHovered()) { SetRainbowGlowColor(); RefreshButtonText->SetForegroundColor( RainbowGlowingColor ); } else { RefreshButtonText->SetForegroundColor( FLinearColor(1,0,1,1) ); } } </syntaxhighlight>

Summary

Enjoy!

Rama (talk)