Animate the Warping of a Sprite

Interpolate warping from source to destination warp geometry grids.


You create an SKWarpGeometryGrid by supplying two arrays of normalized vertex positions: the sourcePositions array defines the positions of the vertices in the un-warped geometry and the destPositions defines the final, warped destination positions for the source vertices. Both arrays are one dimensional and in “row-major” order — this means that you additionally have to supply the number of columns and rows of the geometry.

The number of columns or rows is one less than the number of horizontal or vertical vertices respectively.

The origin of the vertex positions is in the bottom left: the first item in the array refers to the position at the bottom left and the last item refers to the position at the top right.

A geometry grid warps the geometry defined by the source positions (left illustration) into a new geometry defined by the destination positions (right illustration).

Warped geometry

With this geometry, you have several options for applying it to a node that conforms to SKWarpable, such as an SKSpriteNode.

The geometry can be applied immediately, without animation, by setting the nodes’s warpGeometry property. You may elect to use this technique if you are calculating and applying the destination positions with each scene update, for example in response to a user’s touch.

A single warp can be applied over time to give an animated morphing effect using the action created by warpTo:duration:. To use a warp action, you first need to define an initial geometry and set it as the warpGeometry of the node you want to warp. The gridWithColumns:rows: initializer creates a suitable geometry that has no distortion.

You can chain together multiple warp geometries to create complex morphing animations. For example, you may want to begin with the warp geometry that does not deform the node, morph to the stretched geometry at 0.5”, and finish the sequence by returning to the first geometry at 0.75”.

Objects that subclass SKNode but don't conform to SKWarpable — for example SKShapeNode, SKEmitterNode or SKVideoNode — can be warped by adding them as children of an SKEffectNode object. You can, for example, use this approach to distort vector artwork supplied as simple geometric primitives or CGPathRef objects and rendered with an shape node. Warping an particle emitter node that has been added as a child of an effect node allows precise control of the overall shape of a particle system.