Scaling GUI?

[kuyimobile]

Hi! New to Defold and having a bit of a hard time understanding how the camera works. I’m making a game that’s 320x180 and then scaled up 4x to support 1280x720 resolution. I was able to set up my orthographic camera to scale the content at 4x zoom but it seems to have no effect on the GUI.

Here’s a screenshot of my camera at 1x and you’ll notice that the GUI isn’t affected at all.

I got an advice from britzl (at Discord) to modify this piece of code to set the GUI camera view but still no idea how?

local camera_gui = state.cameras.camera_gui
render.set_view(camera_gui.view)
render.set_projection(camera_gui.proj)

render.enable_state(render.STATE_STENCIL_TEST)
render.draw(predicates.gui, camera_gui.frustum)
render.draw(predicates.text, camera_gui.frustum)
render.disable_state(render.STATE_STENCIL_TEST)
render.disable_state(render.STATE_BLEND)

Hope you can help out a fellow dev. Thank you!

[kuyimobile]

Basically, I just want my GUI to scale together with the entire game whether I set it to 1x, 2x or 4x and this is the part I’m having problems with.

[britzl]

Here’s a complete sample project with an orthographic zoomed camera which applies to both world and gui:

sample-guiscaling.zip (87.7 KB)

[kuyimobile]

Thank you so much for the sample @britzl ! Giving this a try and let you know how it goes in my project

[kuyimobile]

Hi @britzl ! My camera works great now and I can easily scale at 4x including the gui, thank you so much!

I have one other problem though, there’s an offset in my gui (as seen in the screenshot) and it’s not anchored correctly. Is there an easy way to adjust the gui’s position/anchor points? Below is how my gui is laid out btw.

I also noticed one other thing, my gui buttons (nodes) are not clickable anymore if I put this line in my camera script (taken from your sample code):

msg.post( “#camera”, “acquire_camera_focus” )

If I disable it, my gui buttons are working again. How do I bring back focus to my gui then?

[britzl]

@kuyimobile

If I disable it, my gui buttons are working again. How do I bring back focus to my gui then?

Ah, yes, I overlooked picking. There are two options: 1) Translate the mouse/touch positions based on camera matrix or 2) Change to applying the camera zoom as scale on a root node of the gui

Number 2 is much simpler. I’ve attached an updated example showing this method:

sample-guiscaling-rootnode.zip (85.7 KB)

[kuyimobile]

Thank you so much @britzl ! I got everything to work now.

One last question btw, I had to reposition my GUI and use 0, 0 as center in order for it to align with the world view. Is there anyway to set the GUI’s anchor to 0, 0 instead of having to use -160 and 90 (my game’s 320x180 btw)? Please see the screenshot below.

[britzl]

You should be able to position the gui any way you want if you use the solution with a root node that you scale.

[kuyimobile]

My bad, I missed that part in the sample project! Thank you so much! Problem solved!

[kuyimobile]

So I tried building an early HTML5 version and I noticed that if I upload to itch.io and set the resolution to 1280x720, my game gets cropped at the sides. I had to set it at 1320x760 to show the entire game screen. Is this really the case for HTML5 builds on Defold?

[kuyimobile]

I’m using default the HTML5 project settings btw

[Pawel]

What’s the settings in itch? There is something like viewport dimensions, maybe this is causing the “cropping”?

[kuyimobile]

Itch.io settings are pretty basic, I simply need to indicate my game’s width and height.