Jump to content

GUI Resolution Independence 2

Josh

379 views

Here are some screenshots showing more complex interface items scaled at different resolutions. First, here is the interface at 100% scaling:

100.thumb.png.a9ddde52315658a32464b302710f8769.png

And here is the same interface at the same screen resolution, with the DPI scaling turned up to 150%:

150.thumb.png.9524e424955ef5d5b701604e7ac786a9.png

The code to control this is sort of complex, and I don't care. GUI resolution independence is a complicated thing, so the goal should be to create a system that does what it is supposed to do reliably, not to make complicated things simpler at the expense of functionality.

function widget:Draw(x,y,width,height)
	local scale = self.gui:GetScale()

	self.primitives[1].size = iVec2(self.size.x, self.size.y - self.tabsize.y * scale)
	self.primitives[2].size = iVec2(self.size.x, self.size.y - self.tabsize.y * scale)

	--Tabs
	local n
	local tabpos = 0
	for n = 1, #self.items do
		local tw = self:TabWidth(n) * scale
		if n * 3 > #self.primitives - 2 then
			self:AddRect(iVec2(tabpos,0), iVec2(tw, self.tabsize.y * scale), self.bordercolor, false, self.itemcornerradius * scale)
			self:AddRect(iVec2(tabpos+1,1), iVec2(tw, self.tabsize.y * scale) - iVec2(2 * scale,-1 * scale), self.backgroundcolor, false, self.itemcornerradius * scale)
			self:AddTextRect(self.items[n].text, iVec2(tabpos,0), iVec2(tw, self.tabsize.y*scale), self.textcolor, TEXT_CENTER + TEXT_MIDDLE)
		end
		if self:SelectedItem() == n then
			self.primitives[2 + (n - 1) * 3 + 1].position = iVec2(tabpos, 0)
			self.primitives[2 + (n - 1) * 3 + 1].size = iVec2(tw, self.tabsize.y * scale) + iVec2(0,2)
			self.primitives[2 + (n - 1) * 3 + 2].position = iVec2(tabpos + 1, 1)
			self.primitives[2 + (n - 1) * 3 + 2].color = self.selectedtabcolor
			self.primitives[2 + (n - 1) * 3 + 2].size = iVec2(tw, self.tabsize.y * scale) - iVec2(2,-1)
			self.primitives[2 + (n - 1) * 3 + 3].color = self.hoveredtextcolor
			self.primitives[2 + (n - 1) * 3 + 1].position = iVec2(tabpos,0)
			self.primitives[2 + (n - 1) * 3 + 2].position = iVec2(tabpos + 1, 1)
			self.primitives[2 + (n - 1) * 3 + 3].position = iVec2(tabpos,0)
		else
			self.primitives[2 + (n - 1) * 3 + 1].size = iVec2(tw, self.tabsize.y * scale)
			self.primitives[2 + (n - 1) * 3 + 2].color = self.tabcolor
			self.primitives[2 + (n - 1) * 3 + 2].size = iVec2(tw, self.tabsize.y * scale) - iVec2(2,2)
			if n == self.hovereditem then
				self.primitives[2 + (n - 1) * 3 + 3].color = self.hoveredtextcolor
			else
				self.primitives[2 + (n - 1) * 3 + 3].color = self.textcolor
			end
			self.primitives[2 + (n - 1) * 3 + 1].position = iVec2(tabpos,2)
			self.primitives[2 + (n - 1) * 3 + 2].position = iVec2(tabpos + 1, 3)
			self.primitives[2 + (n - 1) * 3 + 3].position = iVec2(tabpos,2)
		end
		self.primitives[2 + (n - 1) * 3 + 3].text = self.items[n].text
		tabpos = tabpos + tw - 2
	end

end

 

  • Like 1


4 Comments


Recommended Comments

Quote

so the goal should be to create a system that does what it is supposed to do reliably, not to make complicated things simpler at the expense of functionality

taco.jpg

Things don't have to be complicated to be functional.  How many functions you create and how many arguments they have are in your hands.  Though I'm sure someone will be happy to create a wrapper.

Edit: you could also have a visual GUI designer but I know that's pushing it.

Share this comment


Link to comment

The code above is the widget script, which you don't have to touch. Usage to create a tabbed panel would be like this:

local tabber = CreateWidget(parent,"",0,0,400,300)
tabber:SetScript("Scripts/GUI/tabber.lua")
tabber:AddItem("Item 1", true)
tabber:AddItem("Item 2")
tabber:AddItem("Item 3")

 

  • Like 2

Share this comment


Link to comment

Yeah, it seems the only new/harder part is creating a Sprite layer for the window I/O passing a window pointer to a GUI object. Everything so far seems comprehendible. 

  • Like 1

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.

  • Blog Entries

    • By Josh in Josh's Dev Blog 0
      I'm back from I/ITSEC. This conference is basically like the military's version of GDC. VR applications built with Leadwerks took up about half of Northrop Grumman's booth. There were many interesting discussions about new technology and I received a very warm reception. I feel very positive about our new technology going forward.

      I am currently reworking the text field widget script to work with our persistent 2D objects. This is long and boring but needs to be done. Not much else to say right now.
    • By Josh in Josh's Dev Blog 4
      Here are some screenshots showing more complex interface items scaled at different resolutions. First, here is the interface at 100% scaling:

      And here is the same interface at the same screen resolution, with the DPI scaling turned up to 150%:

      The code to control this is sort of complex, and I don't care. GUI resolution independence is a complicated thing, so the goal should be to create a system that does what it is supposed to do reliably, not to make complicated things simpler at the expense of functionality.
      function widget:Draw(x,y,width,height) local scale = self.gui:GetScale() self.primitives[1].size = iVec2(self.size.x, self.size.y - self.tabsize.y * scale) self.primitives[2].size = iVec2(self.size.x, self.size.y - self.tabsize.y * scale) --Tabs local n local tabpos = 0 for n = 1, #self.items do local tw = self:TabWidth(n) * scale if n * 3 > #self.primitives - 2 then self:AddRect(iVec2(tabpos,0), iVec2(tw, self.tabsize.y * scale), self.bordercolor, false, self.itemcornerradius * scale) self:AddRect(iVec2(tabpos+1,1), iVec2(tw, self.tabsize.y * scale) - iVec2(2 * scale,-1 * scale), self.backgroundcolor, false, self.itemcornerradius * scale) self:AddTextRect(self.items[n].text, iVec2(tabpos,0), iVec2(tw, self.tabsize.y*scale), self.textcolor, TEXT_CENTER + TEXT_MIDDLE) end if self:SelectedItem() == n then self.primitives[2 + (n - 1) * 3 + 1].position = iVec2(tabpos, 0) self.primitives[2 + (n - 1) * 3 + 1].size = iVec2(tw, self.tabsize.y * scale) + iVec2(0,2) self.primitives[2 + (n - 1) * 3 + 2].position = iVec2(tabpos + 1, 1) self.primitives[2 + (n - 1) * 3 + 2].color = self.selectedtabcolor self.primitives[2 + (n - 1) * 3 + 2].size = iVec2(tw, self.tabsize.y * scale) - iVec2(2,-1) self.primitives[2 + (n - 1) * 3 + 3].color = self.hoveredtextcolor self.primitives[2 + (n - 1) * 3 + 1].position = iVec2(tabpos,0) self.primitives[2 + (n - 1) * 3 + 2].position = iVec2(tabpos + 1, 1) self.primitives[2 + (n - 1) * 3 + 3].position = iVec2(tabpos,0) else self.primitives[2 + (n - 1) * 3 + 1].size = iVec2(tw, self.tabsize.y * scale) self.primitives[2 + (n - 1) * 3 + 2].color = self.tabcolor self.primitives[2 + (n - 1) * 3 + 2].size = iVec2(tw, self.tabsize.y * scale) - iVec2(2,2) if n == self.hovereditem then self.primitives[2 + (n - 1) * 3 + 3].color = self.hoveredtextcolor else self.primitives[2 + (n - 1) * 3 + 3].color = self.textcolor end self.primitives[2 + (n - 1) * 3 + 1].position = iVec2(tabpos,2) self.primitives[2 + (n - 1) * 3 + 2].position = iVec2(tabpos + 1, 3) self.primitives[2 + (n - 1) * 3 + 3].position = iVec2(tabpos,2) end self.primitives[2 + (n - 1) * 3 + 3].text = self.items[n].text tabpos = tabpos + tw - 2 end end  
    • By 💎Yue💎 in Dev Log 5
      The prototype of a four-wheeled vehicle is completed, where the third person player can get on and off the vehicle by pressing the E key.  To move the vehicle either forward or backward, is done with the keys W, and the key S, to brake with the space key.  And the principle is the same as when driving the character, a third person camera goes behind the car orbiting 360 degrees.

      I don't think the vehicle is that bad, but I'm absolutely sure it can be improved.  The idea is that this explorer works with batteries, which eventually run out during the night when there is no sunlight.
      Translated with www.DeepL.com/Translator
       
      Mechanics of the game.
      I'm going to focus on the mechanics of the game, establish starting point (Landing area), after the orbiter accident on Mars where all your companions died, now, to survive, you will have to repair your suit, oxygen runs out, good luck.  This involves replacing the oxygen condenser that is failing and the suit is stuck.

      On the ground and performance.
      The rocks, the terrain and the vehicle kill the SPF, but there is a solution, and everything is related to the chassis of the vehicle. That is to say that if I put a simple collision bucket for the vehicle, the yield recovers, something that does not happen if I put a collider of precise calculation for the car. This has the advantage of better performance but is not very accurate, especially when the car crashes with an object in front, because the horn of the car has no collision. And the solution to this, is to put a sliding joint, as was done with the area in which the player climbs the car and descends from it.


       
      On the rocks, I am trying to make them with the slightest polygons and the most distant from each other. 
      Obviously on Mars I can not create canyons, high mountains, is because the terrain does not produce shadows on itself, that's why the terrain tries to be as flat as possible, simulating a desert with dunes. 

      That's all for now.
       
×
×
  • Create New...