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

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.

  • 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

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.

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

    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

    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

      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!