Smoother Camera Motion in SpriteKit Using lerp

Wall West Studio

Whilst working on Ghost Dash: Scared Of The Dark, I did some experimentation with smooth camera motion in SpriteKit.

I wanted the camera motion in SpriteKit to feel smooth, comfortable, natural and non-jerky.

The standard approach with managing camera movement in SpriteKit is to create a scene, in that scene create a game world and place the player into the world.

Then as the player moves, the camera needs to follow the player and this can be done in one of two ways, the first is to introduce a camera node or alternatively you can simply adjust the position of the world with respect to the scene. The latter approach is simpler in my opinion and the one shown below.

Adjusting the position of the world after every physics simulation can give a jerky feel to the camera movement because it tracks the player position too precisely and the player always remains dead center in the scene. This can feel quite static.

Jerky Camera Motion in SpriteKit – Without lerp

The simple approach leading to static, jerky camera movement:

@implementation GameScene { 
   SKNode *world; //game world
   SKNode *player; //player
}

-(void)didMoveToView:(SKView *)view {
   self.anchorPoint = CGPointMake(0.5, 0.5);
   //create game world
   world = [SKNode node];
   [self addChild:world];

   //create player and add to game world
   ...
   [world addChild:player];
}

- (void)didSimulatePhysics {
   [self centerOnNode];
}

- (void)centerOnNode {
    CGPoint positionInScene = [self convertPoint:player.position fromNode:player.parent];

   CGFloat adjustedX = world.position.x - positionInScene.x;
   CGFloat adjustedY = world.position.y - positionInScene.y;
   world.position = CGPointMake(adjustedX, adjustedY);
}

Smoother Camera Motion in SpriteKit – With lerp

A slightly more complex approach is to use a precise linear interpolation function (lerp) to work out where the camera should move to and start to move it in that direction. Adding some damping and experimenting with parameters will give the desired effect where the camera follows the player smoothly and almost looks like it’s trying to catch up with the player. This additionally gives the impression of speed.

@implementation GameScene { 
   SKNode *world; //game world
   SKNode *player; //player
   CGPoint previousPosition; //previous position of world
...
}

-(void)didMoveToView:(SKView *)view {
   self.anchorPoint = CGPointMake(0.5, 0.5);
   //create game world
   world = [SKNode node];
   [self addChild:world];

   //create player and add to game world
   ...
   [world addChild:player];
   previousPosition = [self position];
}

- (void)didSimulatePhysics {
   [self centerOnNode];
}

- (void)centerOnNode {
   //move camera using lerp
   CGPoint currentPosition = [self position];
   CGFloat x = [self lerpPrec:previousPosition.x b:currentPosition.x t:0.03] - 20;
   CGFloat y = ([self lerpPrec:previousPosition.y b:currentPosition.y t:0.03] - 20) * 0.4;
   previousPosition = currentPosition;

   //smoother camera movement
   SKAction *move = [SKAction moveTo:CGPointMake(x, y) duration: 0.2];
   [world runAction:move];
}

- (CGPoint)position {
   CGPoint positionInScene = [self convertPoint:player.position fromNode:player.parent];
   return CGPointMake(world.position.x - positionInScene.x, world.position.y - positionInScene.y);
}

- (CGFloat)lerpPrec:(CGFloat)a b:(CGFloat)b t:(CGFloat)t {
   return (1 - t) * a + t * b;
}

So there you have it, a quick tutorial with a code example on how to get smooth camera motion in SpriteKit!

Check out the build log for Ghost Dash: Scared Of The Dark

 

George: Scared Of The Dark – Build Progress (Part 2)

George: Scared Of The Dark

Build progress of our new game George: Scared Of The Dark (Part 2).

Back to Part 1

LINKS

Check out the homepage and Press Kit!

BUILD LOG (Part 2)

18 // MAR // 2016
  • Another sneak peek trailer released check it out below
  • Level 1 now refined with tutorial
  • Added new “jumping slime” enemies into the game
  • End game cut scene completed! It’s quite moving!
  • Improved game home page
  • Added game to SlideDB
  • Aim is now to focus on fine tuning levels 1, 2 and 3 next week and submitting the game to IndieCade!

10 // MAR // 2016
  • Good progress overall but a bit of scope creep
  • I decided to delay the release to end of June to give more time to refine the game and raise awareness
  • Started working on the end game cut scene – it’s looking good! All will be revealed!
  • Big improvements to story and game description
  • Updated Press Kit
  • Oh and my article about starting my own game studio was well-received on Gamasutra, Twitter and Reddit! You can check it out here.
08 // MAR // 2016
  • Level 1 refined with a tutorial!
  • Level 8 completed. That leaves 2 more levels plus bonus level.
  • Lot’s of general art improvements
  • Added sunset effects for all levels
  • Cut scene improvements
  • New play through video published to YouTube for level 8
  • Massive amount of screenshots below!

Ghost Dash Screenshot

Ghost Dash Screenshot

Ghost Dash Screenshot

Ghost Dash Screenshot

Ghost Dash Screenshot

Ghost Dash Screenshot

Ghost Dash Screenshot

Ghost Dash Screenshot

Ghost Dash Screenshot

Ghost Dash Screenshot

Ghost Dash Screenshot

Ghost Dash Screenshot

Ghost Dash Screenshot

Ghost Dash Screenshot

Ghost Dash Screenshot

Ghost Dash Screenshot

Ghost Dash Screenshot

Ghost Dash Screenshot

07 // MAR // 2016
  • The game is around 50% complete with most of the heavy coding done
  • Hopefully the next few weeks it should be easier to leverage the code already in place
  • 4 more levels remain to be built (out of total of 11)
  • Next few weeks will focus on developing power-ups for the game!
  • A lot of time this week was spent trying to pin down a memory leak in Sprite Kit *grumble* *$%£^”&* *sigh*
  • Levels 1 to 7 are now completed
  • Game Center integration with leaderboard added
  • Added different death effects!

Ghost Dash Screenshot

Also, had a few issues with procedural generation! 🙂

Ghost Dash Screenshot

05 // MAR // 2016
  • Work continues at a good pace!
  • I’m starting to feel the burn but fighting through it, this is for sure the most complex game I’ve attempted to date
  • Scoring system is now complete
  • Improvements to physics
  • Level 6 complete
  • Starting to work on level 7
  • A video of level 6 game play is on YouTube!
  • Plus here is a selection of the latest screenshots!
  • I would also appreciate any feedback

Ghost Dash Screenshot

Ghost Dash Screenshot

Ghost Dash Screenshot

Ghost Dash Screenshot

03 // MAR // 2016
  • Massive progress in the last few days spurred on by some positive feedback!
  • In-game economy finalised and implemented
  • Daily rewards added
  • Difficulty balancing improved on 3 jumping levels
  • Cut scenes finalised
  • Game over scene finalised
  • Power-ups selection scene finalised
  • App icon finalised
  • General tweaks and improvements
  • Next on the to do list is implementing power-up abilities!
  • We got a few press mentions, firstly with the Indie Game Club being featured on Live Cards and then Ghost Dash on Independent Game Community (IGC) News.
  • Again, I am keen to get the game featured on blogs, vlogs and review sites and raise pre-launch awareness, so if you can help with this, then please get in touch!

Ghost Dash Power Up Boosts

Ghost Dash Icon

28 // FEB // 2016
  • It’s been a busy few days and lots of general progress on the game!
  • We now have the game homepage up and running
  • The Press Kit has been prepared to make it easy to write about the game
  • Development has mainly been on power-ups/boosts for George to use
  • HUD refinements made
  • In-game rewards setup
  • In-game menus are now complete
  • Screenshots of Ghost Dash have generally been well received on Twitter this Saturday’s!
  • I am keen to get the game featured on blogs, vlogs and review sites and raise pre-launch awareness, so if you can help with this, then please get in touch!
#screenshotsaturday

And a few older tweets

23 // FEB // 2016
  • Check out the level 4 game play video!

22 // FEB // 2016
  • Level 4 completed
  • Art assets and look and feel further improved
  • A few screenshots below
  • Submitted the game to RunJumpDev! and Game Happens!

screen2

screen3

screen4

18 // Feb // 2016
  • Added music for all 10 levels
  • Made cut scene improvements
  • Added weather effects
  • Published a sneak peek trailer on YouTube!

16 // Feb //2016
  • And… we are back on track with development of Ghost Dash
  • It’s still looking like a (late) Spring iOS release
21 // Dec // 2015
  • This is the last update this year!
  • It’s looking like a Spring 2016 release date for Ghost Dash: Scared Of The Dark
  • The game will be an iOS exclusive
  • Lots of general improvements and addition of a ton of art assets
  • Level 3 is now complete – here is a sneak preview!
  • Happy holidays!

18 // Dec // 2015
  • The TODO list is pretty huge now!
  • It’s looking like a March release date for iOS
  • Defined in-game rewards system
  • Improvements to level generation algorithms
  • Code refactoring to break game up into separate scenes including cut scenes
  • Level 3 coding – 90%
  • Working on further enhancing art assets for the game:
    • Added 6 terrains
    • Added 2 backgrounds
    • Added 2 foregrounds
    • Added 3 weather systems
    • Added 9 level decoration sets (e.g. trees, bushes, mushrooms)
    • Added 6 under level decorations (e.g. roots, plants)

ghost-dash-art-assets

12 // Dec // 2015
  • Spent a lot of time on UI/UX flow
  • General polishing and improvements to the look and feel of the game

IMG_5185

7 // Dec // 2015
  • Refining level generation and movement, looks pretty smooth now!

4 // Dec // 2015
  • Been working on generating good looking levels
    • Art assets prepared
    • Added 2 different mountain ranges
    • Added 2 different foregrounds
    • Added floating clouds
    • Added custom font labels

IMG_5157

2 // Dec // 2015
  • Game design completed
    • In game economy defined
    • Leaderboard setup
    • In-app purchases setup
    • 10 level challenges designed
    • Bonus level designed
    • Scoring system defined
    • Power-ups designed
  • Game art assets prepared
  • Basic Xcode project template setup
  • Oh and a very basic George is on the screen jumping about!

16 // NOV // 2016

It all started with a jam! Ghost Dash: Scared Of The Dark evolved from an entry to Procedural Generation Jam 2015.

Originally called “Mountains That We Climb”, the mini project took one day to create and experimented with generating 2D scenes with simple mountains, clouds and changing weather systems. The jam entry got good feedback on its strong visual aesthetics.

Mountains That We Climb

Ghost Dash Makes A Dash For iOS

Wall West Studio

Independent Game Community (IGC) ran a news article for our upcoming free iOS game – Ghost Dash!

About IGC

Our goal is to bring new and interesting content to our amazing audience daily! Expect this to grow as we do. We’re trying to focus around the Indie Gaming Community though that doesn’t mean that we won’t tackle other topics either. You can expect a healthy dosage of news content about the goings ons of the industry and our community. We are also going to provide previews and reviews of both upcoming games, released games and Kickstarter projects mixed with a healthy dosage of entertainment from our YouTube, Twitch and Blogging partners.

Read more: Ghost Dash Makes A Dash For iOS