Problem with my virtual gamepad in full screen

[Ragetto]

Hi guys!

Back to Defold after almost 2 months, I resumed my learning and started working on a virtual gamepad.

Since I could not really understand Britzl’s example (), I decided to create mine.

It works as intended and you can even click anywhere to make the gamepad appear and get back to its initial position when you release (which is what’s used in most mobile games -using a virtual pad- to make it more “comfortable”).

But… I have a problem… When I display the game in full screen mode, everything seems to be messed up (not the case in Britzl’s example, but it was not done the same way at all).

1/ My debug circle doesn’t have the same position as the gamepad.
2/ When I click the screen, the gamepad teleports I don’t know where to do I don’t know what…
edit: the gamepad in the GUI (just in case)

Would you recommend things I could investigate or learn to help me fix this issue? I don’t know where to start…

And if someone wants to take a quick look at a minimal version of the project ():

Ragetto/20210703_defold_ratio_mouse_wtf

[Pkeod]

Check this out

Gui.set_screen_position() and gui.screen_pos_to_node_pos()

This is implementation of gui.set_screen_position() and gui.screen_pos_to_node_pos() functions for Defold. This library will be useful if you want to get screen position of the node and set this position for another node with the different parent of even in another component. Installation You can use this library in your own project by adding this project as a Defold library dependency. Open your game.project file and in the dependencies field under project add: https://github.com/AGulev/se…

[Ragetto]

Thanks for your answer! I wasn’t able to test my project earlier, but…

I’m already using @AGulev 's extension (which is wonderful) in other prototypes, but most of the time to move a node to another node’s position, etc.

In this case, I want to move a node to my mouse position. My issue seems to be that… well, it’s ok in default resolution, but when I switch to full-screen mode, my mouse click position seems to be 100% fucked up. I don’t understand why, when I press the mouse button, it’s like the gamepad goes to the other end of the universe It’s crazy… (I could understand a different position but why does it… move while the mouse itself isn’t? Makes no sense to me…)

@ross.grams
I’m probably asking too much but… could you please take a quick look at my original post (and tell me if, at first sight, this is something I can fix with rendercam? If so, I’ll investigate more specifically in that direction, but I’m currently not even sure of what the problem is)

[ross.grams]

No sweat, let me just swoop in like Superman and solve all your problems.

So, do you know the difference between action.x/y and action.screen_x/screen_y?

action.screen_x/screen_y - The ‘actual’ pixel position of your mouse inside the window.
action.x/y - Your mouse position in what I like to call “GUI coordinates”. This is what you get when you take the display width/height from your project settings and stretch them to fit your window.

When you first start a project, the window is the size you set in your project settings (game.project), so both coordinate systems match up. They are the same. But as soon as you resize the window at all, they will be different from each other.

Problem #1 - debug circle
Maybe I should make it more obvious, but if you look at the Readme for the debug-draw library, it says:

NOTE: Unless you mess with your render script, all coordinates are in world space.

So trying to match it up with a GUI node is basically just not going to work. It’s drawing in world space, so if you move the camera at all or resize the window then it won’t match up with gui stuff or screen coordinates. If you want you can try editing the render script to move render.draw_debug3d() after the GUI rendering stuff, that might just work.

Problem #2 - gamepad gui flying away…
If you resize the window just a tiny bit you’ll notice that it doesn’t actually teleport, it moves along over time. So that tells you that it’s not what happens on click press, something’s going wrong continuously, which means it’s either on update or on_input. In your on_input(), you’re only doing stuff on action.pressed or action.released, so that only leaves update().

Not a lot there to go wrong, and only one line where you’re changing the position of the node.
Here’s the problem:

local node = gui.get_node("gamepad_back")
self.gamepad_back_pos = gui.get_screen_position(node)
-- ...
gui.set_position(gui.get_node("gamepad_back"), self.gamepad_back_pos)

You’re getting the screen position, but there’s no gui.set_screen_position…you’re using the node’s screen position to set it’s normal gui position, every frame. So it’s zooming off to the point where those two positions are the same.

*SWOOSH, Ross flies away to fight more evil

[Ragetto]

Thank you SuperRoss, it was really helpful

Indeed, it was not a “technical” issue as I initially thought, but just a matter of logic…

Just fixed the main issue (now it works as intended in full screen ), then started to apply it to the actual gameplay “prototype”. A few issues remain but it should be ok (I’ll try to get back into it tomorrow).

Thanks again!

[britzl]

@Ragetto

Thank you SuperRoss

Perfect title! Awarded to @ross.grams !

[ross.grams]

*scrolls by one of his own posts…what the-!? Hahaha, thanks

[britzl]

@ross.grams

Hahaha, thanks

Let me know if you want me to remove it

[Ragetto]

Hi again! I’m back because I probably need SuperRoss… again …

I’ve implemented the changes in my “main” scene (with the ship), and thanks to you, the “gamepad gui flying away” seems to be fixed.

But another annoying issue remains…

@ross.grams

So, do you know the difference between action.x/y and action.screen_x/screen_y?

action.screen_x/screen_y - The ‘actual’ pixel position of your mouse inside the window.
action.x/y - Your mouse position in what I like to call “GUI coordinates”. This is what you get when you take the display width/height from your project settings and stretch them to fit your window.

When you first start a project, the window is the size you set in your project settings (game.project), so both coordinate systems match up. They are the same. But as soon as you resize the window at all, they will be different from each other.

How do you make them match up again after stretching the window? (full screen)

In my case, here is what happens with action.x/y (the input looks so far away):

With action.screen_x/y: , the input works in a small part of the window only…

I’m a bit desperate because I probably just don’t understand what I am doing… and I feel dumb for asking twice in a row for the same issue

Everything related to “core gameplay” seems like an acceptable challenge to me, but I’m really struggling with stuff like that (spaces, camera, etc.)… probably because I don’t know/understand the basics? I feel like a monkey randomly hitting buttons to see what happens.

Is there some specific documentation I could read, examples I could use, things you would recommend to test/implement (like minimal test scenes), extensions I could use, etc. so I can understand and fix my issue?

[ross.grams]

—Is there an easy way to set and get position of a gui node when the screen have been resized?

It’s not just you. To be honest I forgot how much of a pain this was myself.

The only really simple way is to set the adjust mode to “Stretch” on the node that you move to the mouse position (you can give it child nodes with other adjust modes). Then you can just set its position with action.x and action.y.

Otherwise you have to do the calculations for each adjust mode, which can be a bit much to wade through, but…doesn’t AGulev’s library cover that? It’s screen_pos_to_node_pos function? I haven’t tried it myself.