search

MarcoFazioRandom / Virtual-Joystick-Godot

A simple virtual joystick for touchscreens, for both 2D and 3D games, with useful options.
MIT License
743 stars 81 forks source link

Wrong reset position on HBoxContainer sizing #73

Closed UnreALi closed 5 months ago

UnreALi commented 5 months ago

I am trying to use 2 joysticks by separating the left 3/2 and 3/1 of the screen.

When I place my joysticks in a HBoxContainer, the reset positions are incorrect.

https://github.com/MarcoFazioRandom/Virtual-Joystick-Godot/assets/23552481/08035f7e-0af7-44c9-b243-5ff046592697

MarcoFazioRandom commented 5 months ago

Hello,

you shouldn't use a container for the joystick, just use their transform to change their position, size and anchors.

Containers should be used for static ui elements (buttons, sprites, etc) in a grid/row/column, where you don't want to change their size and position individually.

UnreALi commented 5 months ago

@MarcoFazioRandom Why should we not dynamically resize the UI element containing the joystick? What kind of problem does this cause?

Do you really care about landscape portrait mode transitions for a mobile game tool?

Finally, I need a motion joystick that will work on 3/2 of the screen, how can I achieve this without using a container?

MarcoFazioRandom commented 5 months ago

@UnreALi,

Why should we not dynamically resize the UI element containing the joystick? What kind of problem does this cause?

Resizing the UI is not the problem, the problem is putting the joysticks inside a container, it will complicate things and not work properly, even with your solution.

I need a motion joystick that will work on 3/2 of the screen, how can I achieve this without using a container?

Using the node's anchors, margins, position, size: size_and_anchors.

UnreALi commented 5 months ago

I'm pretty new to godot. I approach containers as a simple responsive tool and I don't understand why using them would complicate things (I come from web technologies). However, I should point out that I have been using my solution for a few days and I have not encountered any problems.

https://github.com/MarcoFazioRandom/Virtual-Joystick-Godot/assets/23552481/ca0d53b7-c5e2-48c7-b9a0-532cb0e64614

Apart from that, I still have no idea how to create a joystick that will cover 3/2 of the screen at all sizes using anchors, margins, position, etc.

MarcoFazioRandom commented 5 months ago

Look, I don't want to sound unfriendly, if you made it work, good for you, but just for future reference let me point out some things:

The container is useful if you have several elements, in a grid/list. Using a container for 1 single Node is useless.

Online you can find many tutorials about these Node, UI, anchors, etc, I suggest you to take a look.

One last thing: The issue you opened, "Wrong reset position on HBoxContainer sizing" is not related to a bug or something to change in the code, that's way I closed it.

UnreALi commented 5 months ago

Of course I don't think you're being unfriendly. I'm just trying to understand

Responsive design from web technologies is a very basic concept. At the end of the day, we are trying to achieve the same user interface and the same user experience on different screen aspect ratios.

I don't get what you mean by "covering 3/2 of the screen", do you mean that if the screen if 1920x1080 you want the joystick are to cover an area of 640x540? You can do that also without container.

I want it to cover an area of 1280x1080 for 1920x1080, 426x540 for a 640x540 screen. More simply I want the motion joystick to have a stretch ratio of 2:1

For example, let's assume that our game will work on both iphone 4s and iphone 14. These devices have different screen aspect ratios. When we use a fixed size, we have the same aspect ratio for different devices. This creates dead zones where our joystick did not work on different devices.

https://github.com/MarcoFazioRandom/Virtual-Joystick-Godot/assets/23552481/2170b038-58d1-4b3c-9279-282ea5f34aa9

MarcoFazioRandom commented 5 months ago

Something like this?

https://github.com/MarcoFazioRandom/Virtual-Joystick-Godot/assets/51234379/1a7a62fe-2f8f-49a9-982e-c5b8ec0f8930

Here are the settings I've set:


MarcoFazioRandom commented 5 months ago

For the comment above: I used a ColorRect to simulate the screen but you get the general idea.