GUI adjust questions - fit within available space? (more-or-less solved)

[ross.grams]

I would like to have a gui with a box that maintains its aspect ratio while filling as much of the available space as possible, but I haven’t been able to figure out any node settings or combination of nodes that does this.

1. With a horizontal display proportion, and a square box set to “Fit”, I get this, matching what the .gui in the editor looks like:
   

   

2. If I shrink the window vertically I get what I expect and want:
   

   

3. But if I shrink it horizontally, the box shrinks based on the proportional scale of the window (compared to the project settings size), rather than the actual width & height.
   

   

4. So, what I want is this: (instead of #3)
   

   

For the node to maintain it’s propertion/aspect-ratio, within the width & height of it’s parent (or the window if there’s no parent).

Is there any way to do this?

• I’ve tried every combination of nested Stretch/Zoom/Fit nodes I can think of, no luck.
• I can manually resize the node no problem, but that doesn’t update the layout of any children of that node, so I would have to manually, recursively resize every single child node, which sounds very painful.

[ross.grams]

Related other questions:

• Is there a way to have a menu bar that stretches to fit the width of the window, but doesn’t scale vertically?
• Why isn’t “None” an available Adjust Mode -per node-? (only for the entire GUI)
• Has anyone written their own GUI layout system, either with GUI nodes or Game Objects, to get around the limitations of Defold’s built-in GUI?

[AGulev]

That would be easier to play with that if you share your project with this example.

[Pkeod]

@ross.grams

Is there a way to have a menu bar that stretches to fit the width of the window, but doesn’t scale vertically?

Can probably be done by manually scaling width and then setting height to inverse GUI scale?

How to prevent automatic GUI scaling?

I ran into a similar issue. +1 on a “None” option. The way I solved it is by inferring the scale of the gui in the render script, sharing it globally, and then applying the inverse of that scale to every gui element in the gui script. -- in .render_script update -- share gui scale globally so that we can reverse it in our gui script (this blackboard is my own thing, you can use a global table) -- this guess at the gui scale assumes that "fit" adjust mode is used on all elements whose scale you …

[ross.grams]

@AGulev Good point!
ross_gui_fit_test.zip (7.6 KB)

@Pkeod Yeah…the answer staring me in the face I guess. I’m just resisting manually scaling every node.

[AGulev]

Here is solution that uses Layouts (no code):
ross_gui_fit_test_fixed.zip (14.2 KB)

[ross.grams]

Hmm, that’s pretty cool and would be perfect I think, buuut…it seems like Layouts have broken GUI Templates for years?

For me if I add a basic button template, the overriden properties are sometimes used and sometimes not? It kind of goes haywire.
ross_gui_fit_test_broken_again.zip (9.6 KB)

[AGulev]

Yes, it is broken.
I don’t use templates because of that.

(btw, if I remember correctly it’ broken only in the editor and works fine when bundle, or vice versa)

[ross.grams]

Yeah, I guess if you had to pick, templates are just for convenience. Do you just copy-paste a lot then? Or clone_tree at runtime?

[AGulev]

I copy-paste nodes in the editor.
In my UI system I need to specify all the nodes I want to use, so for me it doesn’t matter if it’s a template or just a couple of nodes (I think UI is the only place I use operator : ^___^ )

like this:

self.ui = {}
  local ui = self.ui
  ui.factory = ui_factory.new(self)

  ui.btn_buy_shuffle_1 = ui.factory:new_button("btn_buy_shuffle_1", on_btn_buy_shuffle, cfg.IAP_SMALL_PACK_SHUFFLES)
  ui.btn_buy_shuffle_2 = ui.factory:new_button("btn_buy_shuffle_2", on_btn_buy_shuffle, cfg.IAP_BIG_PACK_SHUFFLES)
  ui.btn_buy_shuffle_ad = ui.factory:new_button("btn_buy_shuffle_ad", on_btn_buy_shuffle_ad)
  ui.btn_cancel = ui.factory:new_button("btn_cancel", on_btn_cancel)
  ui.factory:new_back_handler(on_btn_cancel)

  ui.factory:new_text_field("txt_shuffle_title")
  ui.factory:new_text_field("txt_btn_video_ad")
  ui.factory:new_text_field("txt_50_profit")

[anon95708182]

@ross.grams

I would like to have a gui with a box that maintains its aspect ratio while filling as much of the available space as possible

@ross.grams

Is there any way to do this?

• I’ve tried every combination of nested Stretch/Zoom/Fit nodes I can think of, no luck.
• I can manually resize the node no problem, but that doesn’t update the layout of any children of that node, so I would have to manually, recursively resize every single child node, which sounds very painful.

I had the very same problem and have written a module that I have used successfully in my last app.
All children stay exactly where they are supposed to be.
Total Lua-newbie here, what do you folks think about my solution?

--[[
This module provides one way to scale a Gui scene to use as much screen estate as possible.
Useful for adapting to different screen sizes or when the user resizes the window on a Desktop.
Put all content as children in one box (the root) and scale this box.
Set "adjust mode" of the Gui scenes concerned to "disabled".
Use in init when no resizing can occur (Mobile), use when a resized window is detected (Desktop).
Tested on Android, Windows and Manjaro Linux (I have not got a Mac, but I expect it works as well).
]]


local M = {}

-- variables for the box
local box
local box_width
local box_height
local box_dimensions
-- variables for the target device/window
local target_width
local target_height
-- variables for the scaling factors
local scale_width
local scale_height
-- variables for the center of the device screen
local window_center_x
local window_center_y

function M.scalefactor()
	-- get the box node and its dimensions
	box = gui.get_node("box")
	box_dimensions = gui.get_size(box)
	box_width = box_dimensions.x
	box_height = box_dimensions.y
	-- get the device screen/window, its dimensions and its center
	target_width, target_height = window.get_size()
	window_center_x = target_width / 2
	window_center_y = target_height / 2
	-- calculate the scaling factors
	scale_width = target_width / box_width
	scale_height = target_height / box_height
	-- if the screen/window is wider than tall, the box can use the full height available
	-- so use the height factor for scaling, then center the box
	if scale_width >= scale_height then
		gui.set_scale(box, vmath.vector3(scale_height, scale_height, 0))
		gui.set_position(box, vmath.vector3(window_center_x, window_center_y, 0))
	end
	-- if the screen/window is higher than wide, the box must respect the width,
	-- so use the width factor for scaling, then center the box
	if scale_width < scale_height then
		gui.set_scale(box, vmath.vector3(scale_width, scale_width, 0))
		gui.set_position(box, vmath.vector3(window_center_x, window_center_y, 0))
	end

end


return M

here it is in a small demo:
scalingtestLandscape.zip (4.7 KB)

Oh, forgot Apple-support. Have uploaded new zip

[britzl]

@anon95708182

Total Lua-newbie here, what do you folks think about my solution?

Looks good! I gave the sample project a try and it seems to work really well. Cool.

[anon95708182]

Thank you @britzl for having a look!