Hello. I can’t align the text and picture inside the VerticalBox.
The text should be placed above the picture. Someone show an example of how to implement this. I’ve tried many different ways.
But the text either does not transfer to the next line or the picture has the wrong dimensions.
Use Auto Size on text and Fill on Image.
this works if the image is fixed size. If the image is inserted into the ScaleBox (to align the image to the height of the Horizontal Box) then the width of the text is incorrect.
I’m a bit confused by what exactly you need.
Try this, make them both Fill, and set for example text 0.2 and image 0.8.
the height of the image must be equal to the height of the horizontal box. If I set the image resolutions in pixels, then this image will occupy different space on different monitor resolutions.
I’m trying to use these nodes
Begin Object Class=/Script/UMG.HorizontalBox Name=“HorizontalBox_2” ExportPath=“/Script/UMG.HorizontalBox’/Game/Dev1/Widget/TestWidget1.TestWidget1:WidgetTree.HorizontalBox_2’”
Begin Object Class=/Script/UMG.HorizontalBoxSlot Name=“HorizontalBoxSlot_0” ExportPath=“/Script/UMG.HorizontalBoxSlot’/Game/Dev1/Widget/TestWidget1.TestWidget1:WidgetTree.HorizontalBox_2.HorizontalBoxSlot_0’”
End Object
Begin Object Name=“HorizontalBoxSlot_0” ExportPath=“/Script/UMG.HorizontalBoxSlot’/Game/Dev1/Widget/TestWidget1.TestWidget1:WidgetTree.HorizontalBox_2.HorizontalBoxSlot_0’”
Parent=“/Script/UMG.HorizontalBox’HorizontalBox_2’”
Content=“/Script/UMG.VerticalBox’VerticalBox’”
End Object
Slots(0)=“/Script/UMG.HorizontalBoxSlot’HorizontalBoxSlot_0’”
bExpandedInDesigner=True
End Object
Begin Object Class=/Script/UMGEditor.WidgetSlotPair Name=“WidgetSlotPair_3” ExportPath=“/Script/UMGEditor.WidgetSlotPair’/Engine/Transient.WidgetSlotPair_3’”
WidgetName=“HorizontalBox_2”
SlotPropertyNames(0)=“LayoutData”
SlotPropertyNames(1)=“bAutoSize”
SlotPropertyNames(2)=“ZOrder”
SlotPropertyValues(0)=“(Offsets=(Left=8.000000,Top=216.000000,Right=450.540222,Bottom=356.926788),Anchors=(Minimum=(X=0.000000,Y=0.000000),Maximum=(X=0.000000,Y=0.000000)),Alignment=(X=0.000000,Y=0.000000))”
SlotPropertyValues(1)=“False”
SlotPropertyValues(2)=“0”
End Object
Begin Object Class=/Script/UMG.VerticalBox Name=“VerticalBox” ExportPath=“/Script/UMG.VerticalBox’/Game/Dev1/Widget/TestWidget1.TestWidget1:WidgetTree.VerticalBox’”
Begin Object Class=/Script/UMG.VerticalBoxSlot Name=“VerticalBoxSlot_3” ExportPath=“/Script/UMG.VerticalBoxSlot’/Game/Dev1/Widget/TestWidget1.TestWidget1:WidgetTree.VerticalBox.VerticalBoxSlot_3’”
End Object
Begin Object Class=/Script/UMG.VerticalBoxSlot Name=“VerticalBoxSlot_4” ExportPath=“/Script/UMG.VerticalBoxSlot’/Game/Dev1/Widget/TestWidget1.TestWidget1:WidgetTree.VerticalBox.VerticalBoxSlot_4’”
End Object
Begin Object Class=/Script/UMG.VerticalBoxSlot Name=“VerticalBoxSlot_2” ExportPath=“/Script/UMG.VerticalBoxSlot’/Game/Dev1/Widget/TestWidget1.TestWidget1:WidgetTree.VerticalBox.VerticalBoxSlot_2’”
End Object
Begin Object Class=/Script/UMG.VerticalBoxSlot Name=“VerticalBoxSlot_1” ExportPath=“/Script/UMG.VerticalBoxSlot’/Game/Dev1/Widget/TestWidget1.TestWidget1:WidgetTree.VerticalBox.VerticalBoxSlot_1’”
End Object
Begin Object Class=/Script/UMG.VerticalBoxSlot Name=“VerticalBoxSlot_0” ExportPath=“/Script/UMG.VerticalBoxSlot’/Game/Dev1/Widget/TestWidget1.TestWidget1:WidgetTree.VerticalBox.VerticalBoxSlot_0’”
End Object
Begin Object Name=“VerticalBoxSlot_3” ExportPath=“/Script/UMG.VerticalBoxSlot’/Game/Dev1/Widget/TestWidget1.TestWidget1:WidgetTree.VerticalBox.VerticalBoxSlot_3’”
Size=(SizeRule=Fill)
HorizontalAlignment=HAlign_Center
VerticalAlignment=VAlign_Center
Parent=“/Script/UMG.VerticalBox’VerticalBox’”
Content=“/Script/UMG.ScaleBox’ScaleBox_1’”
End Object
Begin Object Name=“VerticalBoxSlot_4” ExportPath=“/Script/UMG.VerticalBoxSlot’/Game/Dev1/Widget/TestWidget1.TestWidget1:WidgetTree.VerticalBox.VerticalBoxSlot_4’”
Parent=“/Script/UMG.VerticalBox’VerticalBox’”
Content=“/Script/UMG.SizeBox’SizeBox’”
End Object
Begin Object Name=“VerticalBoxSlot_2” ExportPath=“/Script/UMG.VerticalBoxSlot’/Game/Dev1/Widget/TestWidget1.TestWidget1:WidgetTree.VerticalBox.VerticalBoxSlot_2’”
HorizontalAlignment=HAlign_Center
VerticalAlignment=VAlign_Center
End Object
Begin Object Name=“VerticalBoxSlot_1” ExportPath=“/Script/UMG.VerticalBoxSlot’/Game/Dev1/Widget/TestWidget1.TestWidget1:WidgetTree.VerticalBox.VerticalBoxSlot_1’”
End Object
Begin Object Name=“VerticalBoxSlot_0” ExportPath=“/Script/UMG.VerticalBoxSlot’/Game/Dev1/Widget/TestWidget1.TestWidget1:WidgetTree.VerticalBox.VerticalBoxSlot_0’”
End Object
Slots(0)=“/Script/UMG.VerticalBoxSlot’VerticalBoxSlot_4’”
Slots(1)=“/Script/UMG.VerticalBoxSlot’VerticalBoxSlot_3’”
bExpandedInDesigner=True
End Object
Begin Object Class=/Script/UMG.SizeBox Name=“SizeBox” ExportPath=“/Script/UMG.SizeBox’/Game/Dev1/Widget/TestWidget1.TestWidget1:WidgetTree.SizeBox’”
Begin Object Class=/Script/UMG.SizeBoxSlot Name=“SizeBoxSlot_0” ExportPath=“/Script/UMG.SizeBoxSlot’/Game/Dev1/Widget/TestWidget1.TestWidget1:WidgetTree.SizeBox.SizeBoxSlot_0’”
End Object
Begin Object Name=“SizeBoxSlot_0” ExportPath=“/Script/UMG.SizeBoxSlot’/Game/Dev1/Widget/TestWidget1.TestWidget1:WidgetTree.SizeBox.SizeBoxSlot_0’”
Parent=“/Script/UMG.SizeBox’SizeBox’”
Content=“/Script/UMG.TextBlock’TextBlock’”
End Object
MinDesiredHeight=100.000000
MaxDesiredWidth=1.000000
bOverride_MinDesiredHeight=True
bOverride_MaxDesiredWidth=True
Slots(0)=“/Script/UMG.SizeBoxSlot’SizeBoxSlot_0’”
bExpandedInDesigner=True
End Object
Begin Object Class=/Script/UMG.TextBlock Name=“TextBlock” ExportPath=“/Script/UMG.TextBlock’/Game/Dev1/Widget/TestWidget1.TestWidget1:WidgetTree.TextBlock’”
Text=NSLOCTEXT(“”, “9D0F808B46C4A324C8BC028D423244F6”, “Text Block Text Block Text Block Text Block “)
AutoWrapText=True
End Object
Begin Object Class=/Script/UMG.ScaleBox Name=“ScaleBox_1” ExportPath=”/Script/UMG.ScaleBox’/Game/Dev1/Widget/TestWidget1.TestWidget1:WidgetTree.ScaleBox_1’”
Begin Object Class=/Script/UMG.ScaleBoxSlot Name=“ScaleBoxSlot_0” ExportPath=“/Script/UMG.ScaleBoxSlot’/Game/Dev1/Widget/TestWidget1.TestWidget1:WidgetTree.ScaleBox_1.ScaleBoxSlot_0’”
End Object
Begin Object Name=“ScaleBoxSlot_0” ExportPath=“/Script/UMG.ScaleBoxSlot’/Game/Dev1/Widget/TestWidget1.TestWidget1:WidgetTree.ScaleBox_1.ScaleBoxSlot_0’”
Parent=“/Script/UMG.ScaleBox’ScaleBox_1’”
Content=“/Script/UMG.Image’Image’”
End Object
Slots(0)=“/Script/UMG.ScaleBoxSlot’ScaleBoxSlot_0’”
bExpandedInDesigner=True
End Object
Begin Object Class=/Script/UMG.Image Name=“Image” ExportPath=“/Script/UMG.Image’/Game/Dev1/Widget/TestWidget1.TestWidget1:WidgetTree.Image’”
Brush=(ImageSize=(X=600.000000,Y=600.000000),ResourceObject=“/Script/Engine.Texture2D’/Game/Dev1/Image/9.9’”)
bIsVariable=False
End Object
Can you make a screenshot of your component tree? I haven’t been able to replicate your problem.
I will upload a text file with nodes, copy ctrl+c → ctrl+v the contents of the file to the umg editor. Nodes are just text.
nodes.txt (7.2 KB)
I got a good result when I don’t use the Scale box and specify the size of the image in pixels. But I want to scale the picture to the dimensions of the horizontal box. So that umg looks the same at any screen resolution (and quickly change the size).
Here’s what I want to get (screenshot from the game):
Проверяй.
nodes.txt (7.8 KB)
same result.
sometimes I get the correct result, but after clicking “compile” the text wrapping doesn’t work again.
Оберни текст в Канвас и якоря поставь на растяжение (самый нижний правый угол).
А нельзя ли скрин как должны якоря выглядеть ?
О спасибо, я правда чуть по другому сделал. Почти все что я хотел. Но, что мы сделали этим канвасом ? Он сообщает дочерним элементам, размер родительского и выравнивает их по якорям ?
Так как у тебя вертикальная ячейка внутри горизонтальной, то контент (текст) будет влиять на его ширину. Канвас создает что-то вроде границы между текстом и вертикальной ячейкой.
