How to stick a GUI element top left

Questions
#1

Hello everyone,

It must sounds like a dumb question but I did not find an answer for it on the forum.
I’m trying to stick an element to the top left corner of the screen.
I don’t want this element to be resized on different resolutions.
So always the same size for the element and always at the same distance (in pixel) from the top and the left of the screen.

I tried to disable the “Adjust references” parameter. So for now, the element is not resized when screen size changes. But it appears to always be anchored bottom left.
It doesn’t seem to do anything at all if I change the Y-anchor parameter.

Any idea on what I’m doing wrong ?

1 Like
#2

there is a property in the gui element you choose, for example a box, you set the X and Y anchor, and then in adjust mode, the best option is fit, But I have the same problem, there is no way to maintain the same position of the element in diferent screen sizes…

#3

As I disabled the “Adjust references” parameter, the adjust mode(fit in your case) is not taken in account which is good since I don’t want my elements to be adjusted. But then, it seems that the anchors are not taken in account either which is not what I want.

#4

Hm, maybe I’m missing something in the question, but pinning a node to the top left is totally possible to do:

gui_alignment_example.zip (202.2 KB)

1 Like
#5

Thanks for the quick answer @sven.
It is in fact totally possible if you want your element to resize as your screen changes size.
But what if that element should not be resized ?

#6

where is the adjust references parameter?

#7

In the root node of your gui.

#8

I see, sorry missed that! :slight_smile: Let me give it a try…

1 Like
#9

ok thanks.

#10

You need to apply the inverse of the GUI scale to the node to make it not resize as the screen scale.

1 / math.min(render.get_window_width() / render.get_width(), render.get_window_height() / render.get_height())

Also you should have a root node which has the anchor set with custom size of 0,0,0 and ideally with a texture of a 1px transparent pixel with same texture as your other GUI elements where you put children nodes below.

1 Like
#11

I was able to do it through some GUI script logic, is this what you wanted?

gui_alignment_example.zip (203.8 KB)

1 Like
#12

thats good, but too complicated

#13

Hi guys. So, I have sort of a custom solution for precise GUI and game object layouts (and black bar letterboxing and GUI <-> GO coordinate conversion). It’s part of the set of modules I’m going to release soon. I’m still writing docs and examples for them, though.

6 Likes
#14

I’m curious about this use case. Why wouldn’t you want the UI element to scale with the size of the screen?

1 Like
#15

I’ve used it when keeping some pixel font text at the corner of the screen. It’s also useful for pixel icons. Like level editor buttons. Some games you don’t need the UI to resize you want as much space as possible for the game.

1 Like
#16

Actually, I’ve had situations when I wanted the node to scale differently from the way Defold normally scales nodes (fit/zoom/stretch). For example, 90% of our game scales nodes based soley on the X axis scale (window_width / design_width).

1 Like
#17

I’ve seen that broken in many desktop games on High-DPI screens, where the text becomes too small to read. A good strategy there would be to compute the scale as you would normally, but then round it off to the nearest integer. Defold obviously doesn’t support that, but you will be able to do that with my layout module. Starts working frantically on docs.

4 Likes
#18

Fair points @Pkeod and @dapetcu21!

1 Like
#19

Thanks to @sven and @Pkeod for their answer !
And to reply to @britzl I’m currently working on a pixel perfect desktop game where resizing the screen results in showing more of the game world. My ui elements must be displayed always at the same scale like the world.
But it may become a problem when screen resolutions will be too large… So right now I’m really just trying different stuffs.
@dapetcu21 can’t wait to see your extension !

#20

@ChienBleu You can try the same approach when calculating your projection in the render script. For example, in the default render script, in fixed_fit_projection, you can do zoom = math.max(1, math.floor(zoom + 0.5)) and you’ll have the desired effect.