GUI on iPad not in the middle (pixel precision doesn't work)

neronekro

Hello,

on my Mac the GUI of my game is in the middle of the screen, but on my iPad it isn't. I think pixel precision is not working. My Project settings: Width: 2048 Height: 1536 Resizable: True Allow Hippie: True Orientation: landscape Mode: viewport Aspect: expand

With the following code, I want to move the GUI to the middle of the screen:

func _ready():
	window_x = get_viewport().size.x
	window_y = get_viewport().size.y
	$ButtonStart.rect_position = Vector2(window_x/2-300, 653.056)
	$ButtonAchievements.rect_position = Vector2(window_x/2-300, 853.056)
	$ButtonOptions.rect_position = Vector2(window_x/2-300, 1053.056)

Is in the iOS Device another viewport or why is all moved to the left? Is a my project configuration not correct?

Thanks!

cybereality

That's not a very good way to position a GUI. You should use Control nodes and everything should just work. The issue is that mobile devices real screen resolution and their reported resolution are not the same (which was done initially for compatibility reasons with desktop websites and also older apps as screen resolution increased). So you almost never want to position 2D elements based on the screen size. See here for a GUI tutorial. https://docs.godotengine.org/en/stable/getting_started/step_by_step/ui_game_user_interface.html

neronekro

@cybereality said: That's not a very good way to position a GUI. You should use Control nodes and everything should just work. The issue is that mobile devices real screen resolution and their reported resolution are not the same (which was done initially for compatibility reasons with desktop websites and also older apps as screen resolution increased). So you almost never want to position 2D elements based on the screen size. See here for a GUI tutorial. https://docs.godotengine.org/en/stable/getting_started/step_by_step/ui_game_user_interface.html

Im using Control Nodes for my menu, but the alignment was very annoying and the configurations reset themselves after the slightest change. so i dispensed with the containers. The containers were more of a curse than a blessing.

If I have no other option, however, I have to use the containers. can I prevent the child nodes from resetting themselves every time I do something on the main node? even if I only added a new child node, my entire configuration was shot to pieces. is that the way it is supposed to be?

cybereality

Control nodes are mostly responsive. But there are lots of settings you shouldn't ever touch (like margin and size) and they honestly should just be disabled since they don't work. To get a button centered, you'd have a parent Control node set to Full Rect and the Button set to Centered. You can also adjust the min size of the button, that will work if you need a specific size. If you have multiple Buttons, you'd use an HBox or VBox.

neronekro

Thx, the size parameter was my problem. :)

I hope the last question. I have a MenuPopup and in this Popup are two buttons, but they don't work on click or touch. If I press space, the first button will be selected and pushed, but why I can't use the button with touch or something else?

cybereality

There is a setting "emulate mouse from touch" in the project settings, that should work okay for buttons and simple stuff. But depending on how you coded it, you have have to look for touch events manually.

TwistedTwigleg

@neronekro said: I hope the last question. I have a MenuPopup and in this Popup are two buttons, but they don't work on click or touch. If I press space, the first button will be selected and pushed, but why I can't use the button with touch or something else?

By click, do you mean with the mouse? If so, it could be that another Control-based node is processing the input before it gets to the MenuPopup.

Do you have a Control-based node over other nodes further in the scene tree? Like this, for example:

Control
- MenuPopup
- Control2 (node covers section of MenuPopup)

If so, it could be blocking mouse events. You may need to set the mouse_filter property of the nodes that are overlapping so mouse inputs go through. So with the example above, you would need to change Control2 to have a mouse filter of MOUSE_FILTER_IGNORE so it doesn't capture the input event. You could also move Control2 in the scene so MenuPopup processes it's input first:

Control
- Control2 (node covers section of MenuPopup)
- MenuPopup

Which would also fix the problem.