Adding support for different screen sizes to the Magic Link tutorial

Hi! I’m using the Magic Link tutorial to learn Defold, and I’m struggling to make it look good/work in different screen sizes.

In particular, I’m trying to make it look good both in the desktop and my cellphone. I applied the mobile game template, setting the projection to fixed auto and the display settings to 640 x 1136.

The first problem I encountered was that, when doing this, the input logic became buggy, because of the game coordinates not corresponding with the screen coordinates anymore.

So I tried to use the orthographic camera in order to use the screen to world coordinates conversion, but setting FIXED_AUTO or FIXED_ZOOM doesn’t seem to work. The rendered images are stretched when displayed in my cellphone. I’ve made a copy of both camera.go and camera.script in order to modified them, added the camera to the main.collection, and set the orthographic render script in bootstrap, but I must be missing something.

Could any of you know point me in the right direction? Basically, I want to know how to use the camera so that the rendered sprites stop from stretching and/or learn how to convert the input coordinates to game coordinates without using defold-orthographic.

In general, I found the documentation regarding different screen sizes a bit lacking. Coming from Android, I’m used to dps, percentages and so on that make adapting the content to different screens quite easy, but I’m unsure about the best practices and approaches to follow in Defold.