Creating a Text Extension for TCJSGame: Tctxt - Complete Documentation & Tutorial

If you're using TCJSGame for your JavaScript game projects, you might have noticed that handling text can be a bit limited. That's why I created Tctxt - a powerful text extension that makes working with text in TCJSGame as easy as working with sprites!

What is Tctxt?

Tctxt is a custom class that extends TCJSGame's Component class, providing enhanced text rendering capabilities with features like background padding, text alignment, stroke effects, and more.

Installation

Simply add this to your HTML file after including TCJSGame:

<script src="https://tcjsgame.vercel.app/mat/tcfont.js"></script>

Or download the file and include it locally.

Complete API Reference

Constructor Parameters

new Tctxt(size, font, color, x, y, align, stroke, baseline, background, paddingX, paddingY)

Parameter	Type	Default	Description
size	string	"16px"	Font size with unit
font	string	"Arial"	Font family
color	string	"black"	Text color
x	number	0	X position
y	number	0	Y position
align	string	"left"	Text alignment (left, right, center)
stroke	boolean	false	Use stroke instead of fill
baseline	string	"alphabetic"	Text baseline
background	string	null	Background color
paddingX	number	0	Horizontal padding
paddingY	number	0	Vertical padding

Tutorial: From Basic to Advanced

1. Basic Text Setup

const display = new Display();
display.start(800, 600);

// Simple text
const title = new Tctxt("32px", "Arial", "white", 400, 50, "center");
title.text = "My Awesome Game";
display.add(title);

2. Text with Background

// Text with background box
const scoreText = new Tctxt("20px", "Arial", "white", 50, 50, "left", 
                           false, "alphabetic", "rgba(0,0,0,0.7)", 15, 10);
scoreText.text = "Score: 0";
display.add(scoreText);

3. Styled Text with Stroke

// Outline text effect
const outlineText = new Tctxt("48px", "Impact", "transparent", 400, 200, "center", 
                             true, "middle", null, 0, 0);
outlineText.text = "GAME OVER";
display.add(outlineText);

4. Dynamic Text Updates

let score = 0;
const scoreDisplay = new Tctxt("24px", "Arial", "yellow", 400, 100, "center");
scoreDisplay.text = `Score: ${score}`;
display.add(scoreDisplay);

// Update text dynamically
function updateScore(points) {
    score += points;
    scoreDisplay.text = `Score: ${score}`;
}

5. Advanced: Animated Text

const animatedText = new Tctxt("24px", "Arial", "red", 400, 300, "center");
animatedText.text = "Press Start!";
animatedText.speedY = -1;
display.add(animatedText);

function update() {
    // Bounce text animation
    if (animatedText.y < 250 || animatedText.y > 350) {
        animatedText.speedY *= -1;
    }
}

Real-World Examples

Health Bar with Text

class HealthBar {
    constructor(x, y, maxHealth) {
        this.maxHealth = maxHealth;
        this.currentHealth = maxHealth;

        this.bg = new Component(200, 20, "red", x, y);
        this.fill = new Component(200, 20, "green", x, y);
        this.text = new Tctxt("16px", "Arial", "white", x + 100, y + 15, "center");
        this.text.text = `Health: ${this.currentHealth}/${this.maxHealth}`;

        display.add(this.bg);
        display.add(this.fill);
        display.add(this.text);
    }

    updateHealth(newHealth) {
        this.currentHealth = Math.max(0, Math.min(newHealth, this.maxHealth));
        this.fill.width = (this.currentHealth / this.maxHealth) * 200;
        this.text.text = `Health: ${this.currentHealth}/${this.maxHealth}`;
    }
}

Dialogue System

class DialogueBox {
    constructor() {
        this.box = new Tctxt("18px", "Arial", "white", 400, 450, "center", 
                           false, "alphabetic", "rgba(0,0,0,0.8)", 20, 15);
        this.box.text = "";
        this.visible = false;

        display.add(this.box);
    }

    show(text) {
        this.box.text = text;
        this.visible = true;
    }

    hide() {
        this.box.text = "";
        this.visible = false;
    }
}

Performance Tips

1. Reuse text objects instead of creating new ones
2. Use setText() method for dynamic updates
3. Limit background rendering when not needed
4. Batch text updates in your game loop

Common Issues & Solutions

Text Not Appearing?

• Make sure you've called display.add()
• Check that text property is set
• Verify font family is available

Background Not Showing?

• Ensure background color is not null or transparent
• Check padding values are sufficient

Alignment Issues?

• Remember alignment is based on the x position
• Use "center" for centered text

Full Example: Complete Game UI

const display = new Display();
display.start(800, 600);

// Game UI elements
const uiElements = {
    title: new Tctxt("48px", "Impact", "#FFD700", 400, 80, "center", 
                    true, "middle", "rgba(0,0,0,0.5)", 30, 20),

    score: new Tctxt("24px", "Arial", "white", 50, 30, "left", 
                    false, "alphabetic", "rgba(0,0,0,0.7)", 15, 8),

    timer: new Tctxt("20px", "Arial", "yellow", 400, 30, "center"),

    gameOver: new Tctxt("64px", "Impact", "red", 400, 250, "center", 
                       true, "middle", null, 0, 0)
};

// Initialize text
uiElements.title.text = "SPACE ADVENTURE";
uiElements.score.text = "Score: 0";
uiElements.timer.text = "Time: 60";
uiElements.gameOver.text = "";

// Add to display
Object.values(uiElements).forEach(element => display.add(element));

Conclusion

The Tctxt extension fills a crucial gap in TCJSGame's text rendering capabilities, making it much easier to create professional-looking game UIs, HUDs, and text elements. With features like background boxes, alignment control, and stroke effects, you can create text that looks great and integrates seamlessly with your game.

Give it a try in your next TCJSGame project and let me know what you think! What other features would you like to see in future versions?

---

Download: tcfont.js

TCJSGame Docs: Official Website

Let me know if you'd like me to add any specific examples or cover particular use cases!