Fitting an image in a SBox(Slate)

Development Programming & Scripting UI
, , ,
1

Image is not stretching. Box and border do. When you set margin you divide your texture into 9 sections. Box leaves corners alone, stretches upper and lower edges sections horizontally, right and left edges sections vertically and middle - uniformly.

When you set margin to 0 you basically put your whole texture to middle section and it stretches uniformly filling the space you set for it.

2

I need to resize an image and fit it in a small place. I am using SBox to achive it. But instead of resizing, the image size remains the same and only a small part of it is visible.

16056-untitled.jpg

This is what I am currently getting.

SNew(SBox)
.HAlign(HAlign_Left)
.VAlign(VAlign_Top)
.WidthOverride(16)
.HeightOverride(16)
[
	SNew(SImage)
	.Image(&GalaxyHUD->NuclearResourceImg)
]
3

Set your NuclearResourceImg Brush option “Draw As” to “Box” and its “Margin” to 0.

4

Works thanks…

5

Also additionally I want to ask what are the works of other draw types?

Border I know. difference between image and box?

6

It doesn’t worked. It worked for a second but now it still is getting stretched.

						SNew(SOverlay)
						+ SOverlay::Slot()
						.HAlign(HAlign_Left)
						.VAlign(VAlign_Fill)
						[
							SNew(SBox)
							.HAlign(HAlign_Fill)
							.VAlign(VAlign_Fill)
							.WidthOverride(16)
							.HeightOverride(16)
							[
								SNew(SImage)
								.Image(&GalaxyHUD->NuclearResourceImg)
							]
						]

And I have set my brush type to box.

7

16060-capture.jpg
16060-capture.jpg1443×525 56.3 KB

8

Unfortunately, I couldn’t reproduce your issue. I created SCompoundWidget with code like yours:

ChildSlot
		[
			SNew(SOverlay)
                     + SOverlay::Slot()
                     .HAlign(HAlign_Center)
                     .VAlign(VAlign_Center)
                     [
                         SNew(SBox)
                         .HAlign(HAlign_Fill)
                         .VAlign(VAlign_Fill)
                         .WidthOverride(64)
                         .HeightOverride(64)
                         [
                             SNew(SImage)
                             .Image(&TestStyle->ContentBoxBrush)
                         ]
                     ]
		];

But my texture stretches fine:

16106-test.jpg
16106-test.jpg926×392 24.2 KB

9

I am compressing the texture not stretching.

Also the overlap slot is inside a horizontal box…

						+ SVerticalBox::Slot()
						.HAlign(HAlign_Fill)
						.VAlign(VAlign_Fill)
						[
							SNew(SOverlay)
							+ SOverlay::Slot()
							.HAlign(HAlign_Left)
							.VAlign(VAlign_Fill)
							[
								SNew(SBox)
								.HAlign(HAlign_Fill)
								.VAlign(VAlign_Fill)
								.WidthOverride(16)
								.HeightOverride(16)
								[
									SNew(SImage)
									.Image(&GalaxyHUD->NuclearResourceImg)
								]
							]
							+ SOverlay::Slot()
							.HAlign(HAlign_Left)
							.VAlign(VAlign_Fill)
							.Padding(FMargin(20,0,0,0))
							[
								SNew(SBox)
								.HAlign(HAlign_Fill)
								.VAlign(VAlign_Fill)
								[
									SNew(STextBlock)
									.Font(FSlateFontInfo("Veranda", 9))
									.ColorAndOpacity(FLinearColor(0.4, 0.4, 0.4, 1))
									.Text(NuclearResource)
								]
							]
						]
10

Sorry I misstyped. I decrease the size too. As you can see my texture is 256x256 and I put it in 64x64 box. I’ll try your code and see what happens.

UPDATE: I tried your model with Vertical Box but still wasn’t able to reproduce the bug.

16139-test.jpg
16139-test.jpg1436×831 81.6 KB

11

Hmm what should I do then any idea? Rewrite it?

Also I think you should test it in game. When i first click, the tooltip first appears right then I guess after 1 tick the texture stretches out.

Also My whole thing is placed inside a SCanvas.

12

http://www.megafileupload.com/en/file/568252/SlateWidgets-rar.html

I have linked my files. Can you check it out.

13

I’ll try it today/tomorrow.

14

OK, here’s update. I run your code and everything works.

But I made a slight edit. I didn’t use FSlateBrush from HUD like you do, I used the FSlateBrush from my style instead.

const struct FTestWidgetStyle* MyStyle = &FTestStyle::Get().GetWidgetStyle<FTestWidgetStyle>("DefaultStyle");

and

SNew(SBox)
.HAlign(HAlign_Left)
.VAlign(VAlign_Top)
.WidthOverride(16)
.HeightOverride(16)
[
	SNew(SImage)
	.Image(&MyStyle->TestBrush)
]

Try to use style. Maybe that’s the case. I guess widget styles GetResources function has something to do with this. Here’s a good tutorial of how to make a style system if you need it: MinaLien.com is for sale | HugeDomains Also ShooterGame is a great example.