Deforming sprites with SKWarpGeometryGrid in SpriteKit

SKWarpGeometryGrid is a grid based deformation what can be applied to nodes conforming to SKWarpable protocol. It defines normalised vertex positions for source and destination where source positions are un-warped geometry and destination warped geometry. Therefore, if destination vertex positions are not equal to source, the node will look deformed.

Vertex positions

Grid_vertex_positions_source
Here is a geometry grid with 4 columns and 4 rows. Positions in grid are normalised and in case of un-warped geometry both x and y-values are in range of 0 to 1. Therefore, position at the top left corner has coordinates 0,1 and the bottom right 1,0. It should be noted that when deforming a node, destination vertex positions can have x and y values larger than 1 and less than 0 – node will just look stretched.

Deforming a node

Deforming a sprite consists of two steps: creating a SKWarpGeometryGrid and applying it to a warpable node. Firstly, let’s create a function on SKWarpGeometryGrid what takes in a normalised contact position and returns a deformed grid. Normalised means that the contact point is in grid’s coordinate system.

This function copies all the current destination vertex positions as node might be already deformed. Secondly, it loops over all the vertex positions and modifies the ones, which are fairly close to the contact point. The amount how much each vertex position is moved should depend on the distance to the contact point. The angle is calculated between the contact point and the grid position. Angle is clamped for avoiding moving vertex positions too far away from the centre point what gives more natural deformation. Magnitude and angle gives us a deformation vector for a given vertex position.

Grid deformation

Here we can see a contact point in green and moved vertex positions. In one case, angle is not limited and vertex position is moved further away (contact point, old vertex position and new vertex position line up). In the second case, angle of the offset vector is clamped and the vertex position moves to the right and it will not line up with the contact point and previous position.

The deformed geometry can be applied by setting warpGeometry property which will deform the node without an animation. For animating deformation, use warp(to:duration:).

Finally, here is a demo app with a rotating circle and clicking anywhere around the circle will cause it to deform.

Deformation_demo.gif

Summary

SKWarpGeometryGrid adds a simple way for creating deformations in SpriteKit. The precision of the deformation is defined by the amount of vertex positions in a grid. Applying coordinate system transformations and using euclidian geometry, it is possible to create pretty cool deformations with a little bit of code.

Playground

SKWarpGeometryGridExample (GitHub) Xcode 10, Swift 4.2

References

SKWarpGeometryGrid (Apple)
SKWarpable (Apple)
Euclidian geometry (Wikipedia)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s