const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: {
        create: create
    }
};

const game = new Phaser.Game(config);

function create() {
    const text = this.add.text(0, 0, 'Responsive Font', {
        fontSize: getResponsiveFontSize(game.scale.width, game.scale.height, 40),});

    // Center the text
    text.setPosition(game.scale.width / 2 - text.width / 2, game.scale.height / 2 - text.height / 2);
}

function getResponsiveFontSize(baseWidth, baseHeight, baseSize) {
    // You can tweak these values as per your requirements
    const minWidth = 400;
    const maxWidth = 1200;
    const minFontSize = 20;
    const maxFontSize = 60;

    // Calculate the font size based on the screen width
    const ratio = Phaser.Math.Clamp(baseWidth, minWidth, maxWidth) / maxWidth;
    return minFontSize + (maxFontSize - minFontSize) * ratio;
}
