Understanding customizable pieces outlines feature?

[johnneerdael]

Hi there,

This seems like a nice framework, in the features it's mentioning customizable pieces outlines feature, could you expand what this means or how's used? I don't find this back in the demo's.

Greetings,

John

[flbulgarelli]

Hi @johnneerdael!

headbreaker supports customizable outlines in the sense that you can override completely the pieces' rendering strategy. You just have to pass your own outline object, as it is shown in the Rounded demo:

const rounded = new headbreaker.Canvas('rounded-canvas', {
   width: 500, height: 300,
   outline: new headbreaker.outline.Rounded() 
});

However, you are right in that nowhere is documented how do define an online object. It is quite straightforward, though: it has to understand two messages: isBezier and draw- which takes the piece to draw, its size and border width. The first method just tells whether to use a normal o bezier line, and the latter, which lines to draw.

I really recommend to check out https://github.com/flbulgarelli/headbreaker/blob/master/src/outline.js in order to better understand they contract. I think Squared will be quite easy to understand - it just returns a list of points x, y. The Rounded outline may be more spooky if you are new to bezier lines.

Hope this helps!