CSS Styled DOM Text

Demonstrates how to load an external CSS file and apply styles to DOM elements using class names, while treating them as game objects that can be rotated and animated with tweens.

CSS Styled DOM Text, running
800 × 600
GitHub
class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
        this.load.css('80s', 'assets/loader-tests/80stypography.css');
    }

    create ()
    {
        const h1 = this.add.dom(450, 100, 'h1', null, 'CHROME');

        h1.setClassName('chrome');

        const h2 = this.add.dom(570, 180, 'h2', null, 'Dreams');

        h2.setClassName('dreams');
        h2.setAngle(-15);

        this.tweens.add({
            targets: [ h1, h2 ],
            y: 500,
            duration: 3000,
            ease: 'Sine.easeInOut',
            loop: -1,
            yoyo: true
        });
    }
}

const config = {
    scale: { mode: Phaser.Scale.FIT },
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#080808',
    parent: 'game-container',
    dom: {
        createContainer: true
    },
    scene: Example
};

const game = new Phaser.Game(config);

More in Dom Element19 examples