How do I use Stretch 2D on just UI or something similar?

This is a READ-ONLY snapshot of the Godot Community Forums when TwistedTwigleg was the owner, which is hosted for archival reasons only. The current Godot Community Forums can be found here.

Some links may point to external websites, including the current Godot Community Forums. These websites are not associated with TwistedTwigleg.

How do I use Stretch 2D on just UI or something similar?

ZachAR3

Like the title says I am working on a 3D game menu and I want my UI to scale with the window size, I can enable Stretch 2D globally but this causes artifacting and jagged edges on my 3D models. Is their a way to just use it on the UI or an easy way to scale ui with window size? (I tried a scale script on a canvas layer but it ended up looking blurry) TIA.

duane

If your UI is built out of standard Controls and Containers, you can resize it by changing the outermost container's size. You might want to describe your UI and how you want it to relate to the rest of the window.

ZachAR3

duane That doesn't work for me saddly, Everything stays in the proper positions since I use anchors but I want the UI elements themselves to stay a consitent size. These are my node setups, I have a homescreen / pause screen with a seperate settings popup, but when i resize my window to be bigger the windows stay the same size (so they look smaller) and the inverse when I shrink them

cybereality

You should read these.

https://docs.godotengine.org/en/stable/tutorials/ui/index.html

https://docs.godotengine.org/en/stable/tutorials/rendering/multiple_resolutions.html

ZachAR3

cybereality I did but didn't find anything new that fixed my problem, thanks though

duane

Well, one way to do it is to set up a lot of BoxContainers inside other BoxContainers, like this. With their size flags set to expand, they'll grow to fill available space. You'll have to change the outermost size and the font sizes on signal.

extends Node2D


var vb:VBoxContainer
var lab:Label
var butt:Array
var font:DynamicFont


func _ready() -> void:
	font = DynamicFont.new()
	font.font_data = load('res://DejaVuSans.ttf')
	font.size = 30

	vb = VBoxContainer.new()
	vb.size_flags_vertical = Control.SIZE_EXPAND_FILL
	vb.rect_size = Vector2(1024, 600)
	add_child(vb)

	lab = Label.new()
	lab.set('custom_fonts/font', font)
	lab.text = 'PCD ESCAPE'
	lab.align = Label.ALIGN_CENTER
	vb.add_child(lab)

	var hb1 = HBoxContainer.new()
	hb1.size_flags_vertical = Control.SIZE_EXPAND_FILL
	hb1.size_flags_horizontal = Control.SIZE_EXPAND_FILL
	vb.add_child(hb1)

	var vb2 = []
	for i in 3:
		var b = VBoxContainer.new()
		b.size_flags_horizontal = Control.SIZE_EXPAND_FILL
		hb1.add_child(b)
		vb2.append(b)

	var vb3 = []
	for i in 3:
		var b := VBoxContainer.new()
		b.size_flags_vertical = Control.SIZE_EXPAND_FILL
		vb2[1].add_child(b)
		b.set('custom_constants/separation', 20)
		vb3.append(b)

	for i in ['Start', 'Settings', 'Quit']:
		var b := Button.new()
		b.text = i
		b.set('custom_fonts/font', font)
		vb3[1].add_child(b)
		butt.append(b)

	get_tree().connect('screen_resized', self, 'resize_it')


func resize_it():
	var sz = OS.window_size
	vb.set_size(sz)
	font.size = 30 * sz.y / 600

ZachAR3

duane Sad that Godot doesn't have something easier haha but awesome response, Thanks for actually making an example and being super clear about how it works!