Text & UI

Text

TextObject is a GameObject that shows text:

import { TextObject } from 'bare-engine';

const score = new TextObject(this, {
    text: 'Score: 0',
    fontSize: 32,
    fontFamily: 'monospace',
    fill: '#ffffff',
    stroke: '#000000',
    strokeThickness: 4,
});
this.AddGameObject(score).SetPosition(20, 20);

score.SetText('Score: 10');

Option	Default	Description
text	"Text"	The text.
fontSize	24	Size in pixels.
fontFamily	bare.defaultFont, then Arial	Font name.
fontWeight	"normal"	For example "bold".
fill	"#000000"	Text color.
stroke / strokeThickness		Outline color and width.
align	"left"	"left", "center" or "right" for multiple lines.
lineHeight	1	Line spacing.

Text objects can also be created from a prefab, with "baseClass": "TextObject" and the same fields. Like any baseClass, register the class first, for example in your scene's OnAwake:

bare.AddClass(TextObject);

Example: the Platformer's coin counter.

TextComponent

To add text to an existing GameObject, like a label above a character, use TextComponent:

const label = enemy.AddComponent(TextComponent, { text: 'Goblin', fontSize: 16 });
label.offset.set(0, -40);
label.SetText('Angry goblin');

Unlike most components, it also shows in the level editor.

Fonts

Put a .ttf file in public/fonts/, load it, and set it as the default:

await bare.LoadFont('pixel');
bare.defaultFont = 'pixel';

Example: the Platformer loads its font in the UI scene's OnAwake.

Buttons

Button is a text button with a background:

import { Button, Color } from 'bare-engine';

const play = new Button(this, {
    text: 'Play',
    fontSize: 28,
    buttonColor: Color.fromHex('#3060c0'),
    cornerRadius: 8,
    margin: 16,
    OnPress: () => bare.scene.Goto(Game),
});
this.AddGameObject(play).SetPosition(bare.width / 2, bare.height / 2).CenterPivot();

Besides OnPress there are OnRelease, OnEnter and OnLeave. Any other GameObject can act as a button as well, see pointer events.

UI scenes

A UI should stay on screen while the camera moves. Put it in its own scene with UI: true:

export class HUD extends Scene
{
    constructor()
    {
        super({ UI: true, resize: true });
    }

    OnStart()
    {
        // ...add text and buttons
    }
}

// in your game scene
this.hud = await bare.scene.Add(HUD);

UI and resize are scene options; persistent keeps the scene when others are cleared.

For quick UI there's also bare.uiScene, a ready-made UI scene that's created the first time you use it:

bare.uiScene.AddGameObject(pauseButton);

Examples: the Platformer's UI scene, and the RPG's touch joystick on bare.uiScene.

Anchoring

Use the pivot to anchor UI to the edges of the screen:

text.SetPosition(bare.width, 0).SetPivot(1, 0);              // top right
text.SetPosition(bare.width / 2, bare.height).SetPivot(0.5, 1); // bottom center

Example: the Showcase's UI demo anchors text to every edge.