GUI TextBlock is Streched

I’m working on a simple 3D card that can show some GUI elements. I want the card to have a 3/2 aspect ratio. It has a square image at the top, then a title, description, and a button.

I’m using AdvancedDynamicTexture on a Plane. When I create the plane with the size that I want, the text blocks end up getting stretched (taller).

Here is a playground with a full example of the card layout.

Is there a better way to go about making a fixed layout like this without streching the text?

You can specify the width and the height of the AdvancedDynamicTexture to have the same aspect ratio as your plane: Simple GUI in fullscreen mode | Babylon.js Playground (babylonjs.com)

This looks like a fantastic use case for our new GUI Editor too! Introducing the GUI Editor Alpha! - Announcements - Babylon.js (babylonjs.com)

3 Likes

Thank you! That slight change made these cards look so much better.

Where did the “512” number come from? Is that the default pixel size of the AdvancedDynamicTexture?

The GUI editor looks neat! I’ll add it to my list of things to check out. That could make designing these cards a lot easier, especially if the editor makes it clear what properties are available on a GUI object.

The default is 1024 actually, I chose the 512 a bit arbitrarily! :rofl: The important thing is just ensuring that it has the correct ratio :slight_smile:

Ah, got it. I’ll keep that in mind with future GUI work. Thanks for your help :grinning_face_with_smiling_eyes:

1 Like