A Platform game in SpriteKit and F# – Part 2 – Start building a level

Today’s post is going to be fairly short and sweet. I’m going to start filling out the level1 method, by making the 1st step of drawing the basics of a level.

At the end of this post there will be

1. A floor
2. A moving platform

There wont be

1. Scrolling
2. Interaction

The graphics used for this come from Kenney in the open.commonly.cc bundle.

Let’s begin

The floor is simply added by repeatedly adding “grass” to the scene.

 //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.

 //Next lets define a path that the platform will follow - like Super Mario World 
 let path = CGPath.EllipseFromRect(RectangleF(50.f,150.f,200.f,200.f), CGAffineTransform.MakeIdentity())
 let movePlatform = SKAction.FollowPath(path, false, false, 5.0)|>SKAction.RepeatActionForever
 platformCenter.RunAction movePlatform

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.

The code for this post is available here

Next time I’ll add in a character that can interact with the level to spice things up……

Advertisements