Coding Academy home

Help & Lessons / Showing Text on Screen

Showing Text on Screen

Drawing Text on Screen

UI.drawText(text, x, y, color, size) puts text on screen — health, score, a level counter, anything that needs to be visible while you play.

export function update(self) {
    UI.drawText("Health: " + self.health, 20, 20);
}
  • x and y are where the text starts (from the top-left).
  • color and size are optional — leave them out for white, 20-pixel text, or set them yourself: UI.drawText("Health: 100", 20, 20, "red", 32).

Call it every frame, from inside update() — not just once. Unlike a shape, text doesn't stay on screen by itself; each frame redraws the whole game from scratch, so if you only draw the text once, it disappears the very next frame.

export function update(self) {
    // Right: called every frame, so it keeps showing.
    UI.drawText("Health: " + self.health, 20, 20);
}

Text drawn this way stays visible even while the game is paused by a message (see "Showing a Message") — so a "Health: 0" HUD stays readable behind a "Game Over" screen instead of vanishing.

Building a number into the text needs +, like "Health: " + self.health — this joins the words "Health: " and whatever number self.health currently is into one piece of text.