Skip to content

PixelFont class for displaying text with image based fonts #334

Open
@quinton-ashley

Description

@quinton-ashley

The idea is to give users an easier way to load and write text with pixel (image based aka bitmap) fonts like this one:

Actual size:
Alphanumeric

Scaled up:
Screenshot 2024-10-16 at 08 12 05

I'd like a PixelFont class that extends the SpriteAnimations class.

Users would need to define the characters (charSet) in the order they appear in the image. Internally each character would be loaded as a single frame animation, with the character as the animation name. Spaces would be ignored by this setter so that users could skip parts of the image they don't want to load.

//                               (image, charWidth, charHeight, padX, padY)
let pix = new PixelFont("1bit-font.png", 8, 8, 1, 1);
pix.charSet = `ABCDEFGHIJKLM.!?NOPQRSTUVWXYZ,:;abcdefghijklm"''nopqrstuvwxyz"/\\01234#$€~ …       56789&@%^-      +-*÷=<>()_`;

The main task would be implementing a pixelFont.text function that enables users to write messages on screen using the pixel font.

pix.text("Hello world!", 50, 50);

Metadata

Metadata

Assignees

No one assigned

    Projects

    Status

    To Do

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions