Jump to content

GUI Resolution Independence 2

Josh

617 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
      A new update is available for beta testers.
      Terrain
      The terrain building API is now available and you can begin working with it, This allows you to construct and modify terrains in pure code. Terrain supports up to 256 materials, each with its own albedo, normal, and displacement maps. Collision and raycasting are currently not supported.
      Fast C++ Builds
      Precompiled headers have been integrated into the example project. The Debug build will compile in about 20 seconds the first run, and compile in just 2-3 seconds thereafter. An example class is included which shows how to add files to your game project for optimum compile times. Even if you edit one of your header files, your game will still compile in just a few seconds in debug mode! Integrating precompiled headers into the engine actually brought the size of the static libraries down significantly, so the download is only about 350 MB now.
      Enums Everywhere
      Integer arguments have been replaced with enum values for window styles, entity bounds, and load flags. This is nice because the C++ compiler has some error checking so you don't do something like this:
      LoadTexture("grass.dds", WINDOW_FULLSCREEN); Operators have been added to allow combining enum values as bitwise flags.
      A new LOAD_DUMP_INFO LoadFlags value has been added which will print out information about loaded files (I need this to debug the GLTF loader!).
      Early Spring Cleaning
      Almost all the pre-processor macros have been removed from the Visual Studio project, with just a couple ones left. Overall the headers and project structure have been massively cleaned up.
    • By Josh in Josh's Dev Blog 6
      An often-requested feature for terrain building commands in Leadwerks 5 is being implemented. Here is my script to create a terrain. This creates a 256 x 256 terrain with one terrain point every meter, and a maximum height of +/- 50 meters:
      --Create terrain local terrain = CreateTerrain(world,256,256) terrain:SetScale(256,100,256) Here is what it looks like:

      A single material layer is then added to the terrain.
      --Add a material layer local mtl = LoadMaterial("Materials/Dirt/dirt01.mat") local layerID = terrain:AddLayer(mtl) We don't have to do anything else to make the material appear because by default the entire terrain is set to use the first layer, if a material is available there:

      Next we will raise a few terrain points.
      --Modify terrain height for x=-5,5 do for y=-5,5 do h = (1 - (math.sqrt(x*x + y*y)) / 5) * 20 terrain:SetElevation(127 + x, 127 + y, h) end end And then we will update the normals for that whole section, all at once. Notice that we specify a larger grid for the normals update, because the terrain points next to the ones we modified will have their normals affected by the change in height of the neighboring pixel.
      --Update normals of modified and neighboring points terrain:UpdateNormals(127 - 6, 127 - 6, 13, 13) Now we have a small hill.

      Next let's add another layer and apply it to terrain points that are on the side of the hill we just created:
      --Add another layer mtl = LoadMaterial("Materials/Rough-rockface1.json") rockLayerID = terrain:AddLayer(mtl) --Apply layer to sides of hill for x=-5,5 do for y=-5,5 do slope = terrain:GetSlope(127 + x, 127 + y) alpha = math.min(slope / 15, 1.0) terrain:SetMaterial(rockLayerID, 127 + x, 127 + y, alpha) end end We could improve the appearance by giving it a more gradual change in the rock layer alpha, but it's okay for now.

      This gives you an idea of the basic terrain building API in Leadwerks 5, and it will serve as the foundation for more advanced terrain features. This will be included in the next beta.
    • By Josh in Josh's Dev Blog 1
      Here are some things I did in the last couple days to fix a computer that was basically unusable.
      It seems that Superfetch was rebranded to "SysMain" in an update and automatically re-enabled. If your computer is grinding away either the CPU or disk usage while doing nothing, this is the culprit. Disable it in Windows services.
      The XBox games bar is suspect. I recommend disabling it now that FRAPS supports Vulkan.
      Some features in Visual Studio are making it unusably slow.
      In Project settings > Link > Debugging, set "Generate Debug Info" to "DEBUG:FASTLINK" (in the debug build only) for faster linking.
      Disable these two settings in the general program Options:
      Enable Diagnostic Tools while debugging Show elapsed time PerfTip while debugging
×
×
  • Create New...