[SOLVED] Coordinate systems when window is resized? (mouse vs cursor)

Hi!

I’m currently working on an idle game prototype and even though there are still thousands of stuff to add, I wanted to have a html5 version.

Here is the WIP prototype (nothing to do except clicking the green buttons to create/upgrade the rooms… That’s all):
http://idle-dungeon.orgfree.com/

As you can see, since the window is (automatically) slightly resized in this html5 version (which is another issue but not the main one here), more important “coordinate”-related issues are revealed.

Here is a video recorded in the editor that make it clearer:

Many coordinate-related problems here, but the first one (that may help me fix the others once I’ll understand how it works) is that the cursor and mouse positions are unsynchronized.

Looks like cursor and mouse positions are resynchronized at the very bottom left of the scene (see the video), which seems to be the origin of both “coordinate systems” (GUI for the mouse, world for the cursor?).

Until now, I only converted my mouse coordinates (gui) to interact with the tiles and the green button (world), it worked fine but when the window is resized… Everything seems broken and I’m lost.

1/ Is there an “easy” way to manage this issue (through a known trick or an extension) or do I have to “manually” convert the coordinates? (how? based on the screen/window ratio?)

2/ Is there a clear/simple documentation about different type of coordinates I could start with before toying with these coordinates and ask more precise/smart questions? To be honest I don’t know where to start… Not even sure to see the difference between screen and viewport etc. (let’s be honest, I just don’t master the basics)

I assume I’m not the only one here to create games with mouse controls and resizable windows :slight_smile:

Note: I’m using defold-input for the cursor and rendercam for the camera.

Thank you :pray:

1 Like

I’m not super familiar with Rendercam, but have you looked at the various screen_to_world, etc. helper functions it provides?

2 Likes

I’m already using rendercam.screen_to_world_2d to convert the mouse position (screen ?) to world position.

It works fine until I resize the window… :sweat_smile: From that moment the cursor (game object) stops sticking to the mouse.

I think I’ll create a clean test project to understand what’s wrong :thinking:

Do you have a window update listener. When the window is resized, the new dimensions need to reach the render script in some way.

1 Like

Good to know indeed! But in the meantime I just changed action.x/y to action_screen.x/y and now it works as intended with rendercam.screen_to_world_2d

It was way easier than expected thanks to rendercam, but I can’t imagine how painful it was for @ross.grams when he had to do it for the 1st time :zipper_mouth_face: (without rendercam)

Just need to fix the camera position when zooming (the current scene is currently cropped at the top/bottom for some reason) and I’ll be good.

Thank you very much for the answers @gianmichele :+1:

3 Likes

Glad you figured it out.

To fix the zooming you can experiment with the different options on the camera. Generally you want to use the View Area settings, or else it uses the current window, which can be different for different devices if you’re using mobile.
Also you may want to change the Scale Mode. It sounds like “Fixed Height” might be what you want? Or you can use a fixed aspect ratio to always see the same thing.

2 Likes

I just toyed a bit with the different options, looks cool :slight_smile:

“view Area” seems to work fine on mobile (only tested on 1 smartphone though - would need to try it on more devices), except that in terms of gameplay it’s unplayable for now :grin: + the html5 webpage doesn’t let me play in full screen. But nothing to do with the camera, and still pretty cool to see that it seems to be really fluid on mobile. Defold is awesome!

But the main issue is on my computer, I’d like to keep it zoomed in when I play in full-screen mode


http://idle-dungeon.orgfree.com/

But the camera min/max positions are more “centered” than expected… The top/bottom parts are like cut.

Probably something I’ve done wrong when defining the min/max camera position in my script… I’ll check that tomorrow (but maybe you have a clue :grin:).

Btw thank you for rendercam and the tips!

2 Likes

The fullscreen button at the page you linked works fine for me (except that the game gets cropped).

So you’re zooming the camera yourself and limiting its bounds?

On mobile? :thinking: (it works on my computer but nothing happens when I tap the “full screen” button on my smartphone)

In fact I’m not zooming myself. The game does it automatically when I switch to full-screen mode.

But I’m limiting the bounds indeed, based on tilemap top/bottom and screenHeight (not sure this is how I should do it but it worked fine when I first implemented the scrolling, so…)

It works as intented in “normal” mode (not full screen), and in full-screen mode the camera position seems at the correct world position BUT since there is less space at the bottom/top, these parts are visually cropped.

How to “dynamically” adapt the camera position in full screen mode to avoid to crop the bottom/top part in full screen? :thinking:

Ah, I see. Yeah I just tried fullscreen on desktop, not mobile.

I believe if you change the camera scale mode to “Fixed Height” (un-check all other modes), that will make it zoom the way you want.

For the bounds limit, if you’re just using the height of the screen/window, then that’s not taking into account the camera zoom. You need to convert that to world-space.
Here’s an example:
cam-bounds-test.zip (96.0 KB)

1 Like

Thanks for the example! :slight_smile: I used it to fix my issue and the camera works as intended now.

Just need to re-add the inertia and I’ll be good (I hope).

1 Like

Ah, there remains a minor but annoying issue when resizing the windows (from full screen to windowed):

Steps to reproduce:

Start the game in windowed mode
Switch to full screen
Move the camera to the top limit
Switch back to windowed mode
==> A gap/space just appeared at the top of the screen
when slightly moving the camera, the position instantly clamps the bounds (and gets back to its expected position)

(note : same thing occurs at the bottom, cf video)

Just tried to use a listener to tell the script that the window is resized (and then automatically re-clamp the bounds after resizing)… but no effect :thinking: (is this the correct method?)

1 Like

(problem solved in the meantime, with a listener indeed :slight_smile: everything seems ok with the camera, thank you again)

1 Like