Plane Text
Overview
The Plane Text prefab enables rendering 2D text in Babylon.js by integrating babylon-msdf-text. Plane Text can be created by calling createPlaneText(), create(), or bind(), returning a Mesh or Selection. The default font is Roboto Regular. To use a different font, generate a texture atlas and json specification for your font using the MSDF font generator.
Usage
js
//With createPlaneText() returns Mesh
let planeText = anu.createPlaneText(name: string, options: {}, scene: Scene);
//updatePlaneText() will update the Mesh with the specified options in a single pass
planeText.updatePlaneText(options: {});
//setters will update the Mesh with the specified option after each call
planeText.text = string;
//With create() returns Mesh
let mesh = anu.create('planeText', name: string, scene: Scene, options: {}, data: {});
//With bind() returns Selection
anu.bind('planeText', scene: Scene, options: {}, data: [{}]);
//With bind() from a Selection returns a new Selection
Selection.bind('planeText', options: {}, data: [{}]);
//Combine run() and updatePlaneText() to update a Selection
Selection.run((d,n,i) => n.updatePlaneText(options: {}));Options
| Property | Value | Default |
|---|---|---|
| text | (string) text to be rendered | 'undefined' |
| font | (json) json spec of the MSDF text font | roboto-standard.json |
| atlas | (png) texture atlas of the MSDF text font | roboto-standard.png |
| align | (string) horizontal alignment of the text, either 'left, 'center', or 'right' | 'center' |
| vAlign | (string) vertical alignment of the text, either 'top, 'middle', or 'bottom' | 'middle' |
| color | (Color3) color value of the text | Color3.White() |
| strokeColor | (Color3) color value of the text's stroke | Color3.Black() |
| strokeWidth | (number) width of the text's stroke between 0 and 1 | 0 |
| opacity | (number) opacity value between 0 and 1 | 1 |
| size | (number) scaling factor to be applied to the Mesh, same as scaling | 1 |
Methods and Properties
| Property / Method | Description |
|---|---|
| updatePlaneText(options) | updates the plane text with all the specified options in a single pass. Undeclared options will not be modified |
| text | (string) gets or sets the rendered text |
| font | (json) gets or sets the json spec of the MSDF text font |
| atlas | (png) gets or sets the texture atlas of the MSDF text font |
| align | (string) gets or sets the horizontal alignment of the text |
| vAlign | (string) gets or sets the vertical alignment of the text |
| color | (color3) gets or sets the color value of the text |
| strokeColor | (color3) gets or sets the stroke color value of the text |
| strokeWidth | (number) gets or sets the stroke width value of the text |
| opacity | (number) gets or sets the opacity value |
| size | (number) gets or sets the scaling factor |
Examples
js
let options = {
text: 'Hello World',
color: Color3.Green()
}
let myText = anu.createPlaneText('myText', options, scene);
options.text = "Goodbye World";
options.color = Color3.Red();
options.size = 1.5;
scene.onPointerDown = (pointer) => myText.updatePlaneText(options);
scene.onPointerUp = (pointer) => myText.text = "Hello Again";