A question about gui.ADJUST_ZOOM

Questions
#1

Hi.
I want to create a mobile game using only GUI elements. I will use a ZOOM adjustment mode for all nodes, and I believe that adjustment is calculated like this:

local DISPLAY_SIZE = vmath.vector3(640, 1136, 0)
local window_size

do
	local width, height = window.get_size() -- width = 720, height = 1545
	window_size = vmath.vector3(width, height, 0)
end

local adjust_zoom_scale = math.max(
	window_size.x / DISPLAY_SIZE.x,
	window_size.y / DISPLAY_SIZE.y
)

Let’s say I want a GUI node that always spans the width of the window, I could do this:

local node = gui.get_node("my_node")
gui.set_adjust_mode(node, gui.ADJUST_ZOOM)
gui.set_xanchor(node, gui.ANCHOR_LEFT)
gui.set_yanchor(node, gui.ANCHOR_TOP)
gui.set_size(node, vmath.vector3(window_size.x / adjust_zoom_scale, 100, 0))

Yet the node still overflows the window.

1 Like
#2

It also depends on your camera projection type.
For default projection, you can get adjust_zoom_scale like this

local display_size = vmath.vector3(640, 1136, 0)
local width, height = window.get_size()
local window_size = vmath.vector3(width, height, 0)

local scale_x = window_size.x / display_size.x
local scale_y = window_size.y / display_size.y

local actual_display_height = scale_x > scale_y and display_size.y or window_size.y / scale_x
local adjust_zoom_scale = actual_display_height / display_size.y

I’m just wondering why you choose to use gui.ADJUST_ZOOM for all your nodes? When you change your node size, it means that you can not use size mode Auto, a useful mode for your node texture

#3

The camera projection will not affect the gui. The gui is always rendered to cover the full screen. (unless you’ve modified your render script)

1 Like
#4

Yes, sorry for confusing information, I meant there are 3 projection types in your camera library. In case of using it, no differences with gui for each type?

#5

No the gui projection is always the same:

1 Like
#6

Hi.
I use gui.ADJUST_ZOOM for all nodes because when I switched from computer to mobile phone, everything was so small whereas with gui.ADJUST_ZOOM everything was suitable, whether on the computer or the mobile phone.
My application requires text input, scroll windows, lists, and I wonder if Defold is a good choice when I see Flutter offering animations and particle systems (https://codelabs.developers.google.com/codelabs/flutter-next-gen-uis). The test I did with Defold launches in 3 seconds on a mobile phone and Flutter in 5-6 seconds. I like the lightweight nature of Defold but Flutter seems interesting for my case.

#7

I don’t have any experience with Flutter so I can’t say. But I know it is becoming more and more popular. You should evaluate it. Remember to also look at things such as cross platform support, launch speed (you already tested this), install size and so on.

If you do wish to continue with Defold then make sure to look into Druid, a nice UI library for Defold. It has all the features you need:

1 Like
#8

Hello.
Look. The node is adjusted with gui.set_adjust_mode(gui.ADJUST_FIT) and
I’m using the window scale factor (not the gui.ADJUST_ZOOM factor).

--[[
  Computer:
    window_width = 1920
    window_height = 1080
  Android:
    window_width = 720
    window_height = 1545
--]]
local window_width, window_height = window.get_size()
local gui_width, gui_height = 360, 767
local zoom = math.min(
  window_width / gui_width,
  window_height / gui_height
)

gui.set_size(
  gui.get_node("node"),
  window_width / zoom, window_height / zoom
)

On the computer screen everything is perfect but on the Android phone the
width is perfect unlike the height which is too short.

#9

I guess you are trying a way to have a fullscreen covered node? If yes, you can do that as following

local display_size = { width = 360, height = 767 }
local window_width, window_height = window.get_size()
local sx = window_width / display_size.width
local sy = window_height / display_size.height
local scale = math.min(sx, sy)
local actual_width = window_width = scale == sx and display_size.width or window_width / scale
local actual_height = window_height = scale == sy and display_size.height or window_height / scale

local node = gui.get_node("node")
gui.set_position(node, vmath.vector3(display_size.width / 2, display_size.height / 2, 0)) -- set it centered of the screen
gui.set_size(node, vmath.vector3(actual_width, actual_height, 0))

If you want to have fullscreen covered but by scale

local bg_node = gui.get_node("bg_node")
local bg_size = gui.get_size(bg_node)
local bg_scale = actual_width / bg_size.x
if bg_size.y * bg_scale < actual_height then
	bg_scale = actual_height / bg_size.y
end
gui.set_scale(bg_node, vmath.vector3(bg_scale))
#10

Hi.
It’s the same thing. Perfect on the computer but on Android, the height is smaller than the screen.

#11

Did you apply any scale on your node? If yes, reset it

#12

No. It’s weird.

#13

Is your display size (which set in game.project) 360 x 767?

#14

Yes.
“display.width” = 360
“display.height” = 767.

What’s strange is that it works perfectly fine on the computer, but not on Android.

#15

Sounds strange. Can you attach a screenshot?
Do you want me test for you on my phone? If yes, give me your zip.

#16

Ok. I continued with my method since your code produces the same thing anyway. The application launches in fullscreen, and you can move the rectangle with the mouse or your finger.

EDIT: I deleted the zip file, it’s no longer needed.

#17

The rectangle is fullscreen on my phone. Can you show your Android screenshot?

#18

Here is:

screen
screen720×1600 82.9 KB

#19

Oh but look. The screenshot is 720×1600.

#20

Yeah, that’s the issue :D, maybe the window api returns incorrect size. Let’s wait for Defold team answer then