Jump to content

GUI Resolution Independence

JMichael

374 views

DPI scaling and the 2D drawing and GUI system were an issue I was a bit concerned about, but I think I have it worked out. This all goes back to the multi-monitor support that I designed back in September. Part of that system allows you to retrieve the DPI scale for each display. This gives you another piece of information in addition to the raw screen resolution. The display scale gives you a percentage value the user expects to see vector graphics at, with 100% being what you would expect with a regular HD monitor. If we scale our GUI elements and font sizes by the display scale we can adjust for screens with any pixel density.

This shot shows 1920x1080 fullscreen with DPI scaling set to 100%:

100.thumb.png.738d54b1e3c9c2465da12614a37c06ff.png

Here we see the same resolution, with scaling set to 125%:

125.thumb.png.bdb32955946b1145f75798d4b94b099f.png

And this is with scaling set to 150%:

150.thumb.png.d03d555ab32cbd474000d580087b5a53.png

The effect of this is that if the player is using a 4K, 8K, or any other type of monitor, your game can display finely detailed text at the correct size the user expects to see. It also means that user interfaces can be rendered at any resolution for VR.

Rather than trying to automatically scale GUI elements I am giving you full control over the raw pixels. That means you have to decide how your widgets will be scaled yourself, and program it into the game interface, but there is nothing hidden from the developer. Here is my code I am working with now to create a simple game menu. Also notice there is no CreatePanel(), CreateButton(), etc. anymore, there is just one widget you create and set the script for. I might add an option for C++ actors as well, but since these are operating on the main logic thread there's not really a downside to running the code in Lua.

		local window = ActiveWindow()
		if window == nullptr then return end	
		local framebuffer = window:GetFramebuffer()
		if framebuffer == nil then return end
		self.gui = CreateGUI(self.guispritelayer)
		
		--Main background panel
		self.mainpanel = CreateWidget(self.gui,"",0,0,framebuffer.size.x,framebuffer.size.y)
		self.mainpanel:SetScript("Scripts/GUI/Panel.lua", true)

		local scale = window.display.scale.y
		local w = 120
		local h = 24
		local sep = 36
		local x = framebuffer.size.x / 6
		local y = framebuffer.size.y / 2 - sep * 3
		
		self.resumebutton = CreateWidget(self.mainpanel,"RESUME GAME",x,y,w,h)
		self.resumebutton:SetScript("Scripts/GUI/Hyperlink.lua", true)
		self.resumebutton:SetFontSize(14 * window.display.scale.y)
		y=y+sep*2

		self.label2 = CreateWidget(self.mainpanel,"OPTIONS",x,y,w,h)
		self.label2:SetScript("Scripts/GUI/Hyperlink.lua", true)
		self.label2:SetFontSize(14 * window.display.scale.y)
		y=y+sep*2

		self.quitbutton = CreateWidget(self.mainpanel,"QUIT", x,y, w,h)
		self.quitbutton:SetScript("Scripts/GUI/Hyperlink.lua", true)
		self.quitbutton:SetFontSize(14 * window.display.scale.y)

		w = 400 * scale
		h = 550 * scale
		self.optionspanel = CreateWidget(self.mainpanel,"QUIT", (framebuffer.size.x- w) * 0.5, (framebuffer.size.y - h) * 0.5, w, h)
		self.optionspanel:SetScript("Scripts/GUI/Panel.lua", true)
		self.optionspanel.color = Vec4(0.2,0.2,0.2,1)
		self.optionspanel.border = true
		self.optionspanel.radius = 8 * scale
		self.optionspanel.hidden = true

 

  • Like 4


2 Comments


Recommended Comments

I see your really focused on the GUI now. I'm taking that as you want to get started with the new editor; which I will not stop you. 🙂

Share this comment


Link to comment
8 hours ago, reepblue said:

I see your really focused on the GUI now. I'm taking that as you want to get started with the new editor; which I will not stop you. 🙂

I'm trying to make the engine feature-complete ASAP because there are companies that want to use it in VR projects right now.

The beta testers really help make this possible!

  • Like 2

Share this comment


Link to comment

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...