Hi guys!
I’ve been experimenting with my HUD and the anchor behaviour and I have some difficulties grasping what it does.
First, a very simple question : if I have this option in the properties :
In your 2nd screenshot you have black rectangle
That is your game resolution
And you would expect it to be same always for your game but what if your res is 1000x1000 and my monitor is 800x800?
Do you think your game will shrink for me or will 200 extra pixels from each side will be cut out to compensate my smaller screen?
Easy way to test it is to set your resolution to something stupid like 2000x2000
And run preview in browser to see how it will look
Anchor is like IF you want to anchor left side of your button to left side of your resolution (black rectangle) you placed it somewhere in editor
Then that button will always be in same exact distance from left edge of…
And here i do not know
I always change resolution in real time to fit screen
So for me it would always stick to as many pixels from left screen edge
As i placed it in editor
For you IDK since i never tested it
Well, that’s ultimately my goal and I thought using the Anchor behaviour on the UI and HUD would be the first step!
But it appears that what I tried doesn’t work and makes no difference when I change the resolution in the properties.
But I suspect there’s something I’m missing!
I was using anchor at 1st but i found that changing position of objects is easier for me to manage
I can’t say position change is better i can only say it is better for me
So i say you try both and pick whichever suits you more
Imagine you have button
You want to position it somewhere on screen to be always in that position
Let’s go with top left corner
I change its X pos to CameraBorderLeft()
And Y to CameraBorderTop()
But that makes it exactly as edges of top and left edges of screen
That is why i add some offset to it for example
CameraBorderLeft()+10
CameraBorderTop()+15
Which means it will go to left camera border + 10 pixels right
And top camera border + 15 pixels down
On X axis - means more to the left + more to the right
On Y axis - means more up and + more down
But there is 1 more thing
If you want to put that button on bottom right corner with same 10 and 15 offset
You need
CameraBorderRight()-Button.Widht()-10
CameraBorderBottom()-Button.Height()-15
If you don’t add that width and height of your object to expression
Then it will move to beyond screen
Cause change X and Y takes origin point as reference
So for everything by default it is top left corner of object
And armed with that knowledge you can position anything anywhere anytime
Well maybe also
CameraCenterX()-Button.Widht()/2
CameraCenterY()-Button.Height()/2
For placing such button on center of screen
Now you can try it out
I suggest testing placing some object to at any camera border
After like 3 mins you will have perfect understanding how it works
And you will be able to decide do you want change position or anchor your objects
Hey!
Thanks for this detailed answer!
Yeah, I’ve thought about positioning through events and when there’s only a few aligned buttons, messing with the positions is not too difficult.
It gets a little bit more tedious when there are several objects but completetely doable and if it’s the best solution for me, I’ll do that!
I mean tedious because you have to test things a lot!
Thanks for the CameraBorder trick! I knew ScreenHeight() and ScreenWidth() but didn’t we could place things in relation to the Camera Borders! That should prove helpful!
I’ll try rightaway!
Thanks again!
PS : one question though : how do you place your HUD/UI?
Do you use the editor and change position in event?
Do you create them through an event at the right position?
I literally just told you i go with change pos action
I do not even place them on scene
I create them at beginning of scene or when menu is open
And where you create them does not matter since you gonna change their pos anyway
I just create them at x1 y1
If it comes to menu/settings/options that opens and closes
I create them off screen
Hey! Just to follow up. For my Selection Screen Menu (only two buttons for now), I wanted to divide the screen into 4 equal parts and place the buttons in the center of those parts.
I created a CellWidth and CellHeight variable dependent on the cameraWidth and CameraHeight. I then positionned them accordingly.
I used your Camera positioning trick for the background too and for now, it seems to look as I wanted it too!
Thanks for the advice!
At this point you know enough to do whatever you want
One last thing is text issue
For text there are 2 things
1 - is text can flicker if you 1st change its position and then change its text
That is wrong
Text change action needs to be above change position action
Change pos needs to be below text change
That is only important if your text change for example like score counter or timer text
If its something like button text then it does not matter since text don’t change
2 - there are some problems when changing text position depending what kind of alignment you use
For example IF you align text to left you change X pos of your object
If you align text to the right you change X pos of text-text.Width()
So in other words you are changing its pos by its right edge
As for if you align text to center
Then you either change text CENTER X pos or Y pos (there is separate action to change X position and CENTER X position same for Y)
Or you just change text x pos -Text.Width()/2
And finally last trick i can teach you
IF you have HP bar you most likely will make it filling from left to right
What if you want for it to fill from right to left?
And magic here is well rotate object 180°
You can deduce rest
Same trick can be done if you want to reverse filling of bar if bar fill vertically
Now you know all i know about it
And my question is (since i gonna use this post to teach others how to position stuff cause i wrote it way to many times)
Tell me
Do you care to go back to anchor behavior?
Thanks for all those tips and tricks! I’ll have to read it once or twice to let it sink in!
especially this one :
I’ve never thought about it like that but that’s a smart way of putting it!
As for you last question : give me a little more time to experiment with it.
For now, I’ve only positionned a simple UI (menus) but I’ve left the anchor behaviour on the HUD (the HP bar and the 3 vertical continuous bars) and it seems to be doing what I want them to.
So, for now, my opinion is not made although I’m happy I know more about the event way!
Honestly, I’d prefer the anchor behaviour because it allows for more direct vision of what you’re doing and less fiddling with numbers.
For example, to place my 3 vertical bars, the 3 labels under them and 3 other labels under, placing them through events would be certainly doable but a bit annoying whereas the anchor behaviour would allow me to place them where I want and that’d be it!
But thanks again for all those insights, I’ll bookmark the post because I’m sure I’ll back to visit later on!
Hey!
Last update!
Finally, I couldn’t make the anchor work on my HUD as I would have liked to so I had to use events and it looks good but man, it was a bit tiresome!
Here is the screenshot of my events :
I tried to make it as “adaptable” as I could possibly do it with my knowledge (and I’m sure there are thousands ways to improve those lines!).
I needed it to adapt to any game resolution because I’m working on a Multiplayer game and to test things out, I frequently have to open 2 or more game previews. So, to avoid resizing manually everytime, I reduced the game resolution so that each window can be set side by side and I can see both game windows at the same time…
I feel like it is a very efficient method for when you get to a point in development where things are quite definitive, it is definitely worth your time but for me, as of right now, it is a bit pointless (except for the purpose above) and I’ll have to revisit those lines when I change the Labels font or size for example…and fiddle with those numbers again. That’s what’s bothering me a little!
Thanks again for the advice! I read your post twice or 3 three times to apply them because those things are way from being easy, I think!