Do you like my tutorials?

Then consider supporting me on Ko-fi

Talking about Game development, HTML5, Javascript and Phaser.

With Phaser native DOM support you can add your preferred GUI framework to your HTML5 Phaser games.

I already showed you how to add Bootstrap components to Phaser projects and how to add jQuery UI components to Phaser projects, now it’s time to see how to add Font Awesome icons.

You may wonder why you should need to use DOM icons when you can draw your own icons as PNG images.

Well, mostly for two reasons:

1 – You suck at designing icons and you don’t want to be the millionth developer to use just another icon pack you can find on the web.

2 – Because they are cool, and thanks to some CSS tricks you can achieve interesting results, like this button:

Press it. It works! And it’s a Font Awesome icon. Actually, they are three Font Awesome icons on a layer with SVG gradients.

Let’s have a look at the files, starting from index.html where Font Awesome is loaded.

<!DOCTYPE html>
<html>
	<head>
        <style type = "text/css">
            body{
                background: #000000;
                padding: 0px;
                margin: 0px;
            }
        </style>
		<script defer src="all.js"></script>
		<script src = "phaser.min.js"></script>
        <script src = "game.js"></script>
    </head>
	<body>
        <div id = "thegame"></div>
	</body>
</html>

You have to load Font Awesome through JavaScript, and you find all information in the official Font Awesome docs page.

Then, the creation of the button itself, in a file called fontawesome.html:

<style type = "text/css">
    .smallcircle svg * {
        fill: url(#gradient1);
    }
    .playbutton svg * {
        fill: url(#gradient2);
    }
    .fa-play g g path {
        stroke: black;
        stroke-width: 20;
    }
</style>
<span class = "fa-layers fa-fw fa-10x">
    <i class = "fas fa-circle" style = "color:black"></i>
    <span class = "smallcircle">
        <i class = "fas fa-circle" data-fa-transform = "shrink-3" style = "color:Tomato"></i>
    </span>
    <span class = "playbutton">
        <i class = "fas fa-play" data-fa-transform = "shrink-8" style = "margin-left:35px"></i>
    </span>
</span>
<svg width = "0" height = "0">
    <radialGradient id = "gradient1">
        <stop offset = "0%" style = "stop-color: rgb(252, 207, 49); stop-opacity: 1"/>
        <stop offset = "70%" style = "stop-color: rgb(252, 207, 49); stop-opacity: 1"/>
        <stop offset = "100%" style = "stop-color: rgb(245, 85, 85); stop-opacity: 1"/>
    </radialGradient>
    <linearGradient id = "gradient2">
        <stop offset="0%" style = "stop-color: rgb(255, 0, 0); stop-opacity: 1" />
        <stop offset="100%" style = "stop-color: rgb(255, 0, 255); stop-opacity: 1" />
    </linearGradient>
</svg>

The button is built using Font Awesome layers and SVG gradients, so to change button layout and colors you only have to edit the HTML file, without having do draw aything.

Finally the JavaScript file with the Phaser game:

let game;

window.onload = function() {
    let gameConfig = {
        type: Phaser.AUTO,
        backgroundColor: 0xe5e5e5,
        scale: {
            mode: Phaser.Scale.FIT,
            autoCenter: Phaser.Scale.CENTER_BOTH,
            parent: "thegame",
            width: 500,
            height: 500
        },

        // this is needed to work with DOM elements
        dom: {
            createContainer: true
        },
        scene: playGame
    }
    game = new Phaser.Game(gameConfig);
    window.focus();
}

class playGame extends Phaser.Scene {
    constructor() {
        super("PlayGame");
    }
    preload() {

        // this is how we load HTML content
        this.load.html("fontawesome", "fontawesome.html");
    }
    create() {

        // a DOM elements is added pretty much like a sprite
        let button = this.add.dom(game.config.width / 2, game.config.height / 2).createFromCache("fontawesome");

        // click listener
        button.addListener("click");

        // on click callback function
        button.on("click", function(e) {
            alert("play the game!")
        })

        this.tweens.add({
            targets: button,
            scaleX: 0.9,
            scaleY: 0.9,
            ease: 'Power1',
            duration: 1000,
            yoyo: true,
            repeat: -1
        });
    }
}

Here the HTML page is loaded as a DOM element, animated and made interactive.

And now you can have fancy icons in your HTML5 games powered by Phaser and Font Awesome. Download the source code of the entire project.

Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.