Graphics with Phaser3
The graphics class in Phaser3 allows you to draw basic shapes, like circles, boxes, lines, etc.
Let's start a new project.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Graphics Example</title>
<script src="phaser.min.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script>
var config = {
width: 800,
height: 600,
backgroundColor: '#dddddd',
type: Phaser.AUTO,
scene: {
create: create,
}
};
var game = new Phaser.Game(config);
function create ()
{
}
</script>
</body>
</html>
Inside the create function, let's start drawing stuff. First we need a variable that will be our graphics class.
function create ()
{
var graphics = this.add.graphics();
}
Now we can use it to define a line style and/or a fill style. The line style strokes the outline of our graphics while the fill style will fill in our graphics.
function create ()
{
var graphics = this.add.graphics();
graphics.lineStyle(10, 0xFF00FF, .5);
graphics.fillStyle(0x00FFFF, 1);
}
The three arguments for the line style are, the width of the line, the color of the line, and the alpha transparency of the line. The arguments for the fill style are just the color and alpha transparency.
Now that we have our styles set, we can draw and fill in a box.
function create ()
{
var graphics = this.add.graphics();
graphics.lineStyle(10, 0xFF00FF, .5);
graphics.fillStyle(0x00FFFF, 1);
graphics.fillRect(300, 300, 100, 250);
graphics.strokeRect(300, 300, 100, 250);
}
The fillRect method uses our fill style and the strokeRect method uses our line style. The arguments are the x location, y location, width of the box, and height of the box.
Now let's draw a circle.
function create ()
{
var graphics = this.add.graphics();
graphics.lineStyle(10, 0xFF00FF, .5);
graphics.fillStyle(0x00FFFF, 1);
graphics.fillRect(300, 300, 100, 250);
graphics.strokeRect(300, 300, 100, 250);
graphics.fillCircle(200, 100, 50);
graphics.strokeCircle(200, 100, 50);
}
The arguments are the x location, y location, and radius of the circle.
Now to draw some lines.
function create ()
{
var graphics = this.add.graphics();
graphics.lineStyle(10, 0xFF00FF, .5);
graphics.fillStyle(0x00FFFF, 1);
graphics.fillRect(300, 300, 100, 250);
graphics.strokeRect(300, 300, 100, 250);
graphics.fillCircle(200, 100, 50);
graphics.strokeCircle(200, 100, 50);
graphics.beginPath();
graphics.moveTo(100, 100);
graphics.lineTo(200, 200);
graphics.lineTo(100, 200);
graphics.closePath(); //connects back to start
graphics.strokePath();
graphics.fillPath();
}
The moveTo method goes to a starting location without making any lines. The strokePath method uses the line style and the fillPath method uses the fill style.
We did it! We made an underwhelming piece of modern art using the Phaser3 graphics class.
Thanks for reading.
Comments
Post a Comment