PIXI Graphics – Continued (Advanced Shapes)

 

PIXI Graphics – Advanced Shapes

In the previous post, we took a look at drawing a square using PIXI Graphics, and how to generate textures from it. Well lets look at how to draw some more advanced shapes.


let graphics: PIXI.Graphics = new PIXI.Graphics();
graphics.lineStyle(1, 0xFFFFFF, 1);

// draw a square
graphics.lineTo(0, 50);
graphics.lineTo(50, 50);
graphics.lineTo(50, 0);
graphics.lineTo(0, 0)

Drawing lines is very simple, just say where two points are on the canvas, and it will draw a line. as you can see above, we drew a square.

Lets use the Graphics.arc function to draw circles!


let graphics: PIXI.Graphics = new PIXI.Graphics();
graphics.lineStyle(1, 0xFFFFFF, 1);

// draw a circle
graphics.arc(75, 75, 50, 0, Math.PI*2, false);

// draw a semi-circle

graphics.arc(75, 75, 35, 0, Math.PI, false);

phaser graphics primitive arc shapes

Drawing Smiley Faces – Arc


let graphics: PIXI.Graphics = new PIXI.Graphics
graphics.lineStyle(1, 0xFFFFFF, 1);

graphics.arc(75, 75, 50, 0, Math.PI*2, false); // Outer circle
graphics.moveTo(110, 75);
graphics.arc(75, 75, 35, 0, Math.PI, false);  // Mouth (clockwise)
graphics.moveTo(65, 65);
graphics.arc(60, 65, 5, 0, Math.PI*2, false);  // Left eye
graphics.moveTo(95, 65);
graphics.arc(90, 65, 5, 0, Math.PI*2, false);  // Right eye

 

Phaser graphics smile with arc function

Drawing Speech Bubble – Quadratic Curve To


let graphics: PIXI.Graphics = new PIXI.Graphics();
graphics.lineStyle(1, 0xFFFFFF, 1);
graphics.moveTo(75,25);
graphics.quadraticCurveTo(25,25,25,62.5);
graphics.quadraticCurveTo(25,100,50,100);
graphics.quadraticCurveTo(50,120,30,125);
graphics.quadraticCurveTo(
graphics.quadraticCurveTo(125,100,125,62.5);
graphics.quadraticCurveTo(125,25,75,25);

A little note for using quadratic curves, they function exactly the same except for accepting an additional parameters for the control point. You can read a very good tutorial on how quadratic curves work here.

Phaser Graphics Speech Bubble

Drawing Heart – Bezier Curve To


let graphics:PIXI.Graphics = new PIXI.Graphics();
graphics.lineStyle(1, 0xFFFFFF, 1);
graphics.moveTo(75,40);
graphics.bezierCurveTo(75,37,70,25,50,25);
graphics.bezierCurveTo(20,25,20,62.5,20,62.5);
graphics.bezierCurveTo(20,80,40,102,75,120);
graphics.bezierCurveTo(110,102,130,80,130,62.5);
graphics.bezierCurveTo(130,62.5,130,25,100,25);
graphics.bezierCurveTo(85,25,75,37,75,40);

Bezier curves are very similar to quadratic curves. There is another very good tutorial on how bezier curves work here.

heart bezier curve