Bezier Curves
Bezier curves are a great way to animate objects smoothly along a curve in ZapWorks Studio.
See also: Z.Bezier scripting reference
Creating a Bezier Curve
To create a Bezier curve right click the root node in the Hierarchy and select 'New > Transforms > Bezier' and give it a name.
This will produce a new Bezier node in the Hierarchy. Much like Group nodes, Bezier nodes can contain other nodes. These child nodes will appear at a point along the curve defined by their parent Bezier node.
Newly instantiated Bezier curves begin without any points with which to define a curve so it's necessary to highlight the Bezier node and click the 'ADD' button within the Properties panel to add 4 starting points in a 'Segment'.
Manipulating a Bezier Curve
Positioning Bezier Points
With at least one segment present, a curve will appear within the 3D view.
Highlighting a Bezier node and selecting the 'B' button at the top of the 3D view will expose a Bezier's points (represented by small squares) and allow them to be moved. In a single segment two of the points relate to the start and end of the curve and two relate to the arc of the curve between those points.
Clicking and dragging the exposed points within the 3D view will alter their position - this is the easiest way to set up a curve. Bezier points can also be edited directly from the points section of the Properties panel and through the points(...) setter function of Z.Bezier.
Adding and Deleting Segments
Further segments can be added to a Bezier curve by clicking the 'ADD' button at the bottom of the points section within the Properties panel. This will extend the curve and expose further points to manipulate.
Segments can be deleted by clicking the cross next to their name within the Properties panel.
Splitting a Segment
In the case where a segment already exists but a more complex curve needs to be defined there is the option of splitting a segment. Splitting creates a further segment that lies in the centre of the one split.
A segment can be split by clicking on the 'SPLIT' button within the Properties panel.
The option to split a segment makes it possible to go back and fine tune Bezier curves after having already created a number of segments.
Animating Objects Along a Bezier Curve
Objects can be animated along a Bezier curve using the distance variable. Nodes inside or relativeTo a Bezier node will appear at the proportion distance along the curve. The best way to alter the distance variable is to use a Timeline however it is also possible with States and via the distance(...) setter function.
The example on the right shows the distance property of a Bezier node transitioning from 0 to 1 with 0 representing the start of the curve and 1 representing the end. This transition results in the object animating along the curve over the length of the timeline.
Using Multiple Curves
While segment splitting can help fine tune the curve of an animation, it cannot change the speed at which an object moves along the curve at different points. To do this multiple curves must be 'chained' together in the 3D view and an object's relativeTo property switched between them using a Timeline.
Two Bezier nodes instantiated in the Hierarchy can be chained together by placing the start of one of the curves at the end of the other, either by hand using the Bezier manipulation tool, or by using the points section of the Properties panel. The latter is more appropriate for ensuring that the start and end points are in exactly the same location.
Next, a Timeline must be created that includes the distance property of both Bezier nodes along with the relativeTo property of the object(s) animating along the curves.
During the timeline the following must occur in the given order:
- The
distanceof the first Bezier node transitions from 0 to 1. - The
relativeToproperty of the object(s) switches from the first Bezier node to the second. - The
distanceof the second Bezier node transitions from 0 to 1.
The switch of relativeTo is what chains the curves together and the point along the timeline the switch occurs effects the speed at which the object moves along each curve. A switch closer to the beginning of the timeline will mean the object will move faster along the first curve and slower along the second and vice versa.
The example below shows this process in action.