How to stick a GUI element top left

I like this example doing it all in the gui_script without needing to edit the render, here is it simplified and improve to work with all scales assuming the root scaler node starts a 1 (then can child anything else at different scales below it)

local function update_node(self)
	gui.set_scale(self.scaled_node, vmath.vector3(1 / math.min(self.screen_width / self.width, self.screen_height / self.height), 1 / math.min(self.screen_width / self.width, self.screen_height / self.height), 1 / math.min(self.screen_width / self.width, self.screen_height / self.height)))
end


local function window_callback(self, event, data)
	if event == window.WINDOW_EVENT_RESIZED then
		self.screen_width = data.width
		self.screen_height = data.height

		update_node(self)
	end
end

function init(self)
	self.scaled_node = gui.get_node("scaled_node")
	self.node_scale = gui.get_scale(self.scaled_node)
	self.screen_width = gui.get_width()
	self.screen_height = gui.get_height()
	self.width = self.screen_width
	self.height = self.screen_height

	update_node(self)
	
	window.set_listener(window_callback)
end

For anyone searching, this is useful to make things scale 1:1 no matter how you scale the window. So if you want an FPS counter at the corner of your screen or something you can use a tiny pixel font and it will look good no matter the windo scale.

2 Likes