Scale UI with pixel art game

[pixel-boy]

When working on the UI it can be complicated to make the UI the desired size, in my case I would like the scale of the nine patch rect texture of my StyleBoxTexture to be increased to 2 or 3 (the pixel size is too small currently to say that otherwise).

I can't use the scale parameter of the Control node because it's not compatible with the anchor system.

The only viable option to my knowledge is to scale the entire CanvasLayer (which is possible but not really an officially supported feature because you still have to adjust things manually) This solution scales all Node controls which is an advantage for some node and a disadvantage for others.

I think that having a scale parameter directly on the StyleBoxTexture could be a fairly effective solution and an additional tool for such situations, but I don't know the technical implications.

I am also open to other workaround methods if they exist.

[Calinou]

See the Pixel art section of the Common use case scenarios described in the Multiple resolutions documentation.

I don't think you should scale the stylebox texture only, as otherwise, the text and icons will remain unscaled. If you are going to scale something, other elements should be scaled as well so that they remain readable.

[pixel-boy]

Thanks! I looked but I don't really see a solution for my case, knowing that it mainly concerns the overall resolution of the game, while I don't want to modify the game, only the UI.

Here is an image to illustrate the problem more clearly :

The game resolution is 1920x1080 but the use of the Camera2D makes the game pixels bigger than the UI pixels (which is not affected by the camera.

Thinking about it again I feel a nice solution would be for the Container nodes to take into account the scale value of the Control, this would look like normal behavior knowing that they already have the scale property.

It could also be useful for TextureRect, currently it's only possible to have the texture in scale 1 or in SCALE / COVERED mode, but being able to give a scale of 2 for example could be practical.

Theme also have default_base_scale property, which could perhaps be used for this, but as it stands it doesn't affect Panel.

The best option currently is to have a parent in scale 2 for the UI elements, I can't use the automatic anchor options because of the scale modification but they can be defined manually, it's clearly acceptable and usable, and taking into account the scale for the Controls is probably a lot of work (if it's even possible) I think I'll settle for that for now!

[pixel-boy]

I found the option to create a custom Container which allows to apply a scale value to its children.

The Container code looks like this:

@tool
extends Container

@export var content_scale := 1.0:
	set(v):
		content_scale = v
		queue_sort()

func _notification(what: int) -> void:
	match what:
		NOTIFICATION_SORT_CHILDREN:
			for child:Control in get_children():
				child.set_anchors_and_offsets_preset(Control.PRESET_FULL_RECT,Control.PRESET_MODE_MINSIZE)
				child.size /= content_scale 
				child.scale = Vector2(content_scale,content_scale)