Bezier Art Maker Tool using Phaser 3
Bezier curve, the creation of Pierre Bézier, opens up unlimited possibilities for the artists in terms of what can be created. The work which inspired the creation of Bezier Art Maker is
and Playing with Phaser Tweens and Bezier curves in phaser 3. The goal of Bezier Art Maker is to create an intuitive tool for making art using Bezier curves. The user of the tool doesn’t need to know the complexities of how the tool works which makes creating art more fun and accessible enabling people of any age to be an artist.
Creation of this tool started with basic phaser3 template with a scene loaded by game object with all its game configurations. Before scene adds any functionality it loads an image which can be used to show start, end and anchor points of Bezier curve.
The whole functionality of this tool was broken into few simple task which were easy to code:
1. Creating points for Bazier Curve: Bezier Curve is made-up of four points, start, end and two anchor points. From image already loaded in load function four phaser image objects are created. Notice draggablePoint.setInteractive() makes each point respond to events like draggable. Once created, image objects are stored in an array which is passed to Phaser.Curves.CubicBezier(p0,p1,p2,p3) as elements of an array.
2-Drawing Bezier Curve based on points: Create drawBezier() function to draw Bezier curve based on points given to it and call it so a curve appears based on random points giving user a hint that tool is ready to use.
3-Making points draggable: Since phaser image objects are actually game objects so taking advantage of that to make four points draggable. Use callback function to get new x and y location and set it for the point being moved. Calling drawBezier function while point is being moved makes the curve adjustable according to user’s need.
4-Saving desired position of points: Create button to save button which user can use to save the position of points once they form part of the shape user is trying to make.
saveCurve() call function simply saves current position of Bezier curve points to an array so it can be drawn permanently to create the shape.
5-Drawing shape based on saved points: Finally iterating through array which saves all the desired points for bezier curves to make complete shape
Finally calling drawShape() in life-cycle method update() of Phaser scene so it happens repeatedly making it look to the user that shape persists on the canvas.
Here is Bezier Art Maker in action
