Bezier.js With Cocos Creator

As a game programmer, working with Bezier curves is as inevitable as death and taxes. And not just drawing them, which you may easily do with cc.Graphics, but tackling more advanced issues like stroking a Bezier curve, getting its bounding box, getting intersections with another curve or with a line, etc.

Bezier.js is a library that does all the heavy lifting and it does so in a render agnostic way. All one has to do is render and interact with it!

I’m proud to introduce cc-bezier-js, a project that integrates this library rendering and interactivity with Cocos Creator, in friendly, Component based way.

Since visuals tell more stories than a bunch of words, you can check out the demos here. These have been adapted for Cocos Creator based on the original demos. Most of these demos are interactive too, so feel free to drag the curve control points!

The integration is very straightforward: there are two components, named BezierDrawAPI and BezierInteractionAPI, which do the work. Add your script to a node. Then, add any of those two Components to the same node. Then, hook them up with the library! And that’s all there is to it.

Originally, the goal was to integrate this library with one my games yet-to-be-released, Dog And Ball Forever. Due to lack of time at that point in time, I have chosen a different (custom) solution, but as I’ve already put some work into it, I’ve decided to create a separate project.

Credits go to Pomax, the author of Bezier.js and to the Cocos Creator team for the scene navigation code.

Hopefully, you’ll find this useful for your next game or killer app you do with Cocos Creator. If so, please leave a shout here!