Text2D x change not displayed on screen

[royibernthal]

I tried to create a text centering solution.

 

I create a Group2D container for a Text2D - textFieldContainer.

Inside the container I create a Text2D (naturally) - textField.

Whenever I change the text, I set textField.x to be textField.width / 2 (textField.width returns different values for different widths as expected).

By doing that I'm attempting to keep the actual text centered to the (0, 0) of the textFieldContainer. (and so I'm able to play freely with textFieldContainer's x and y without affecting textField.x centering solution.

 

The problem is the text isn't actually being moved on screen.

 

I created a PG reproducing this problem:

http://www.babylonjs-playground.com/#1088V8#1

Line 24 has no effect at all, commenting it results in the same display.

I created the marker textField to help you see better that the text is not moved.

 

It's as if there's an extra placement logic for Text2D behind the curtains that's preventing me for moving it around properly.

I also tried playing with textField.origin, to no avail.

 

I attached an image demonstrating how it is now (X), and how it should look centered (V).

 

 

@Nockawa

[adam]

http://www.babylonjs-playground.com/#1088V8#3

http://doc.babylonjs.com/overviews/Canvas2D_PosTransHierarchy

http://doc.babylonjs.com/overviews/Canvas2D_Prim_Positioning

[royibernthal]

Thanks, it indeed works, but is there a way to do it without making the parent fixed size? (100, 100)

I'd like to retain centering while keeping the size of the object dynamic and reflecting its actual current size, according to the logic in my previous post, if possible.

[adam]

http://www.babylonjs-playground.com/#1088V8#4

[Nockawa]

@royibernthal does @adam solved it?

Thanks adam for the contribution! I appreciate a lot!

[royibernthal]

@Nockawa It does work, thank you @adam, but is there some way to disable the forced alignments and work with pure x and y?

[adam]

http://www.babylonjs-playground.com/#1088V8#6

[Nockawa]

2 minutes ago, royibernthal said:

@Nockawa It does work, thank you @adam, but is there some way to disable the forced alignments and work with pure x and y?

I'm not sure I understand, if you don't specify margin/padding/alignment, then it's not on and you can use position/x/y. That's the way it should be, is there a default alignment setting that is contradictory with what I just said?

[royibernthal]

1 minute ago, Nockawa said:

I'm not sure I understand, if you don't specify margin/padding/alignment, then it's not on and you can use position/x/y. That's the way it should be, is there a default alignment setting that is contradictory with what I just said?

Could you see the PG in my first post? I don't specify anything yet line 24 doesn't do anything.

[Nockawa]

sorry, I've missed the info, too many things, so I rushed, yes, I can see the issue now, I've tried some other things that should work but it still doesn't.

Basically "width" (which is a shortcut of size.width) is not the property to go for in  your case, because you don't set a size for your Text2d object. What you want to know is the width taken by the current text that is set and the textSize property is the one that should returns it. but I've tried to replace .width with .textSize.width and it still doesn't work. It's almost time for bed, so I'll check it tomorrow morning and keep you informed.

[royibernthal]

okay thanks

[adam]

Did you look at the last PG I posted?

http://www.babylonjs-playground.com/#1088V8#6

 

Line 26 is setting the position.

 

 

[adam]

Here I took your original PG and just gave the cavas a size of 0 and now it works.

http://www.babylonjs-playground.com/#1088V8#7

 

[Nockawa]

There are things I need to check up, I know the positioning engine may not execute as expected in every cases, it was quite difficult to mix it with absolute positioning and I didn't code something very satisfying...

@adam 's PG relying on alignment is certainly "the recommended" way to go for such thing, but the other way @royibernthal is trying should work too! I'll take a look asap today.

I have to make positioning reliable in all cases and make sure it doesn't conflict with absolute position and lastly make things clear enough to state some simple ground rules for everybody to understand everything as quickly as possible. And I agree that so far I'm not there yet...

[Nockawa]

Ok guys, I have the final conclusion to this issue!

There was a bug in the Global Transformation matrix computation, it wasn't trigger in your specific case, which was the reason why your text wasn't "moving".

It's completely fine to use the very first PG you gave with :

textField.x = -textField.width / 2;

because if you don't specify a size for your text object, it will take the size of the text itself, which is what you want.

There was just an issue that prevent this change of position to update the global transformation, I'm going to make the bug fix and merge the PR right away so you can have the latest version, but the PG itself will be update when DK will be able to.