Let’s begin

//Pop in some floor
for i in 0..10 do
use grass = new SKSpriteNode("grass")
grass.Position <- PointF(float32 i * grass.Size.Width, 0.f)
scene.AddChild grass

Hopefully this looks like fairly familiar territory and nothing earth-shattering. Note at the moment I’m not even going to set the physics properties of anything – nothing interacts yet, so there’s really no point!

Where SpriteKit begins to get a little more interesting (and something I haven’t really talked about yet) is that SpriteKit represents the scene hierarchically. The term Node in SpriteNode and LabelNode aren’t there simply to make us type more. You can add children to a node, and by moving the parent it will affect the children.

Let’s put this into practice by adding a platform

//Lets create a moving platform from 3 connected sprites
use platformLeft = new SKSpriteNode("stoneLeft")
use platformCenter = new SKSpriteNode("stoneMid")
use platformRight = new SKSpriteNode("stoneRight")
//Position the left and right **relative** to the center one
platformLeft.Position <- PointF(-platformLeft.Size.Width, 0.0f)
platformRight.Position <- PointF(platformRight.Size.Width, 0.0f)
//Add them as children of the center sprite
platformCenter.AddChild platformLeft
platformCenter.AddChild platformRight
//Add the center sprite to the scene (this adds all 3)
scene.AddChild platformCenter

Notice that when we add platformLeft and platformRight that we offset by the width of the sprite, but no the height – this is so the sides are to the left and right – relatively they are on the same Y-Axis so the position for Y is 0.

Now a stationary platform is pretty dull and Super Mario had lots of moving platforms (and people seem to like Mario), so lets move this platform in a big circle.

Once again SpriteKit’s built in SKAction helps take something that could have been a painful task and turned it into 3 lines – define a path, create an SKAction from the path and then run the action. It’s so simple and yet so powerful.

Wrapping up

I told you this post would be short! So today we’ve added the start of a level. As there’s nothing to interact with there’s little to do, but in only a few lines we’ve managed to create a scene with some animation which we can use as a basis for building more on later.

Here’s a screenshot for those without a Mac and Xamarin License.

Something you may notice from the code which is slightly unusual. The Y coordinate is the inverse of most 2D systems. 0 is at the bottom and n is at the top, whereas usually 0 is the top.