Adding support for different screen sizes to the Magic Link tutorial

[Yor]

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.

[Yor]

Hi. I got stuck on this topic way back in April and made me end up dropping Defold (and game development) altogether due to sheer frustration.

It seems the forum has become more active lately, so I’m bumping this just in case someone could point me in the right direction.

Thanks in advance!

[Pawel]

Hello @Yor!

So sorry your post was lost in void without an answer. I’ll try my best to help here

The most related manual would be:

Adapting graphics to different screen sizes

@Yor

So I tried to use the orthographic camera

Did you use Defold Orthographic?

@Yor

but setting FIXED_AUTO or FIXED_ZOOM doesn’t seem to work.

Fixed auto should maintain scale of your objects (don’t stretch them), but you may find it too small or too big and cropped, depending on the original screen ratio to your device screen ratio. It really is hard to design game for many different devices.

You can also check advices from this thread:

Mobile display size? (And other mobile game questions)

The width and height of the game screen. If it is going to be landscape, then the width should be greater than height.(Opposite of what you’ve done currently) You will have to check that manually. There is Simulate Device option in the Debug menu, which allows you to play around with various screen sizes. Read more here I don’t use Apple devices so often, so I won’t be able to guide you here.

@Yor

Coming from Android, I’m used to dps, percentages and so on

In Defold, you will need to think in terms of relative positioning and scaling. While you don’t have direct support for dps, you can design your UI and game elements to adjust based on screen size using Lua scripts. For example, calculate object sizes and positions relative to window.get_width() and window.get_height().

Another advice is that, even though the Magic Link tutorial is made using game objects - this game can really be made solely in GUI - and GUI has imho more built-in options to adjust to different screen sizes (layouts, display profiles and you have built-in gui.pick_node(), which will always give you correct node clicked).

If you still have any specific problem let us know - if you could also post a zip with reproduciton it might be really helpful to help you!