How to Center Text Objects Perfectly! (I cracked the code!)

GDevelop general
1

Centering Text Objects has been something that i’v always found difficult to do in GDevelop… but as it turns out… its quite simple! :smiley:

The main reason iv struggled with this is because of how Text Objects are different from regular Sprite Objects… like the fact that they dont have “Points” or a “Body” to them.

When i looked up how to “Center Text Objects”, i didnt really find anything about how to do it… only why they couldnt be treated the same as other objects…

Then i had the idea of adjusting the “Width” of a text object and use that into calculations, but… you cant adjust the “Width” of a Text Object with an Action, because they dont work like normal sprites… so i gave up on it and decided to make a feature request about this…

But today i decided to try again and give it some more thought… and i had an idea!

GDevelop cant change the Height and Width of a Text Object… but does the engine know the Hight and Width of the object after its created?

The answer is… YES!

Even if the engine cant change these parameters with an action, it can still tell you their values and use them for positioning! :smiley: My mind = Blown

So now centering an object becomes quite easy!!

To center the Text Object on an Objects “Point”

For example, a text over a Player character head…

  1. Create object “TextObject” at position “Player.CenterX()” “Player.Y()-64”
  2. Change X position of “TextObject” “set to” "Player.CenterX()-(TextObject.Width()/2)

…before checking for the Text Objects Width and adjusting the position we need to first create the object, otherwise GDevelop has no way of know its Width.

The example bellow has the “Player” as “Rogue” and the Text Object as “LevelUpField”.

image
image1252×192 56.4 KB

To center the Text Object on the screen instead of an object is just as simple!

Lets center a text in the middle of a “HUD” layer…

  1. Create object “TextObject” at position “CameraCenterX(“HUD”, 0)” "CameraCenterY(“HUD”, 0)
  2. Change the X position of “TextObject” to CemeraCenterX(“HUD”, 0)-(TextObject.Width()/2)"
  3. Change the Y position of “TextObject” to CemeraCenterY(“HUD”, 0)-(TextObject.Height()/2)"

image
image1886×258 51.8 KB

…maybe this stuff is some sort of common knowledge, but in case theres more people out there like me that have been struggling to make this happen, i decided to share my findings! :smiley:

Hope this can help you! :slight_smile:

If theres anything about this that didnt make sense, let me know and ill try to explain things better :smiley:

1 Like
2

I already knew how to do this, but what I haven’t figured out yet is how to align it. For example, its x and y coordinates are on the left, but I want it to be on the right. How do I do that? If I set it to be on the left border, it will work perfectly, but if it stays on the right border, it will go off the screen.

3

Change position of the text to CameraBorderRight()+TextWidth()

4

You mean aligning a Text Object to the Right Border of the Screen?

You just subtract the entire “Width” of the Text Object.

So lets say your screen / camera width is 1280, you set the Text Object to X: 1280-TextObject.Width().

For the Y you do the same, lets say the “Height” of your screen / camera is 720, you set the Y to: 720-TextObject.Height()

Was that what you ment?

5

You need to (-) subtract, not (+) add.

Otherwise its just gonna go out of the screen just the same.

6

You are correct. I consulted ChatGPT and it confirmed this. I tested it, and it worked. I didn’t know it had to be done this way. I always had trouble fixing a text object to the right edge without it going off the screen to the left. Now it works perfectly. One additional detail: the action must be declared after the text declaration, otherwise there may be a slight delay in fixing the text if the number of strings increases.

7

This isnt just true for text, its true for everything regarding events in GDevelop.

Once per frame, GDevelop reads all your events from the top of the event sheet all the way to the bottom, then on the next frame it starts over again from the top.

So for example… If you make an event that changes the position of an Object, but only create the object on the event bellow that one, then the object will only be moved on the next frame… but if you create the object and then tell it to move, then the object will move on the same frame it was created.

This can be applied to everything in GDevelop.

8

Yes, I know. I just said that for other people who might read this in the future. GDevelop doesn’t make that explicit. I used to think differently at first, that all conditions were applied in the same frame and sub-events in the following frame, but it’s all events in a stack. Sometimes I forget about that because there are so many events and groups in my game.

9

You know when you Tween the Font Size of a Text Object and instead of it staying centered where it was, it slides to the side as the font gets bigger or smaller…

This is so easy to fix now!

For floating text that you dont want following objects around, you can create a new hidden object to anchor the text where you want it, then while the text exists in the scene, add the position change to HiddenObject.CenterX()-(Text.Width()/2)…

I used to hate how this effect looked… now it looks how it should! With floating text always centered, even as its changing sizes… im so happy i could cry :smiley: