Text and text inputs

Change text, shrink it to fit, restyle it, and read what the player typed.

Set text

In zStudio, a text field always sits inside a container. Call setText() on that container.

const score = stage.get('scoreText') as ZContainer;
score.setText('1,250');

// Shrink the font when text is too wide for its original box
score.setFixedBoxSize(true);
score.setText('A much longer translated line');

// The underlying PIXI.Text, for anything else
const field = score.getTextField();

Change the style

score.setTextStyle({ fill: '#ffcc00', fontSize: 40 });

setTextStyle() has no effect on bitmap fonts, which get their look from the font's image.

Text inputs

const form = stage.get('loginForm') as ZContainer;
const nameInput = form.get('nameInput') as ZContainer;

// The input itself lives on getTextField()
const field = nameInput.getTextField() as any;

field.on('input', (text: string) => console.log(text));
field.text = 'Player 1';
field.focus();
field.blur();
field.disabled = true;