In this exercise, we’re going to cover how to make a simple geometric shape in Phaser. A Circle! To do this, we’re going to use the method
this.add.circle(). This creates a
GameObject that we can use to represent a circle in the game.
GameObjects can have different animations or interactions that we can add to them, but for now, we’re going to focus on drawing them. To make a circle we provide
this.add.circle() with four arguments in the following order:
xcoordinate for the center of the circle. A larger
xvalue means the circle will be further to the right in the game.
ycoordinate for the center of the circle. A larger
yvalue means the circle will appear further down in the game.
radius, a value for how large the circle should be.
0xindicates the value is hexadecimal and
FF8030is the color code for the color we want.
this.add.circle(20, 50, 10, 0xFF0000);
This line of code would create a new circle that is
20 pixels to the right and
50 pixels down from the top-left corner (sometimes called “the origin”). This circle will be
10 pixels in radius (i.e.,
20 pixels across), and bright red due to the color we supplied
Create your own circle! Inside the
create() function you’ll find circles numbered 1-4. Create a
circle5 and give it
fillColor values of your choosing!
Check out those graphics!