Custom Font with Phaser3
First let's start with a simple "Hello World" program.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="phaser.min.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
scene: {
create: create,
}
};
var text;
var game = new Phaser.Game(config);
function create() {
text = this.add.text(200, 200, 'Hello World', { fontSize: '50px',
fill: '#9999ff',
});
}
</script>
</body>
</html>
Now there are a couple ways we can do this, but the method I chose is as follows.
I have a TrueType Font file called Quentincaps-owxKz.ttf. To load it into our Phaser3 project, we will add 3 sections of code.
The first will be in the <style> element. The next will be at the top of our <script> element. And finally, one little bit in the "create()" function. Here is the code.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="phaser.min.js"></script>
<style type="text/css">
body {
margin: 0;
}
@font-face {
font-family: myFont;
src: url('Quentincaps-owxKz.ttf');
}
</style>
</head>
<body>
<script type="text/javascript">
const f = new FontFace("myFont", "url(Quentincaps-owxKz.ttf)");
f.load();
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
scene: {
create: create,
}
};
var text;
var game = new Phaser.Game(config);
function create() {
text = this.add.text(200, 200, 'Hello World', { fontSize: '50px',
fill: '#9999ff',
fontFamily: 'myFont' });
}
</script>
</body>
</html>
And the result.
Well, that was a short tutorial. But let's move on.
Next Topic: Responsive Background
Comments
Post a Comment