George: Scared Of The Dark – From Concept To Game

Wall West Studio

I’ve been working on this game since December 2015!

I thought it would be a nice touch to show the progress through some screenshots. Check them out below!

It all started with a jam! The 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.

It all started with a jam!

The jam entry got good feedback on its strong visual aesthetics and I decided to start developing the concept further into a game a month later.

procjam 2015
procjam 2015
Concept Art 1
Concept Art 1
Concept Art 2
Concept Art 2
Concept Art 3
Concept Art 3
Concept Art 4
Concept Art 4
Concept Art 5
Concept Art 5
Concept Art 6
Concept Art 6
Screenshot 1
Screenshot 1
Screenshot 2
Screenshot 2
Screenshot 3
Screenshot 3
Screenshot 4
Screenshot 4
Screenshot 5
Screenshot 5
Screenshot 6
Screenshot 6
App Store Screenshot 1
App Store Screenshot 1
App Store Screenshot 2
App Store Screenshot 2
App Store Screenshot 3
App Store Screenshot 3
App Store Screenshot 4
App Store Screenshot 4
App Store Screenshot 5
App Store Screenshot 5
An Actual Game You Can Play!
An Actual Game You Can Play!

Check out the game homepage!

 

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

 

Design a Game Character – Art Competition

Wall West Studio

Our design competition is now closed!

Winning Entry

The Skeleton!

Runners Up

The Reaper and The Zombie!

Thanks to everyone that took part!

Voting Results

The Nominations

Contest Nominations
Contest Nominations

 

fireborn Calling All Game Asset Artists!

We are running an open competition to design an exclusive character for our upcoming game Ghost Dash: Scared Of The Dark. The winning design will feature as an unlockable character in the final game due to be released in Summer 2016

shield Awards

  • £50 Amazon voucher to winner PLUS your character featured in Ghost Dash: Scared Of The Dark PLUS full in-game credits PLUS early access PLUS an opportunity to provide feedback into the final game!
  • £25 Amazon voucher to 2 runners-up

 

slow Timeline – Ready, Steady, Draw!

  • 12th April 2016 – competition start date
  • 21st May 2016 – submission deadline – CLOSED
  • 27th May 2016 – nominations announced, voting opens
  • 4th June 2016 – voting closes, winners announced

 

alien How To Submit

1. Tweet your art using the following hashtags:

#ghostdash #indiedev #indiegame #gamedev #gameart #competition

2. Follow us on Twitter

If you are not on Twitter, you can also contact us directly.

invisible All Entries!

The Small Print

  • Entries must be in PNG format (square size) no smaller than 1024 by 1024px
  • Art assets must be in keeping with the aethetics and art style of Ghost Dash: Scared Of The Dark – see dev log for examples
  • Up to 4 selected entries will be put to a community vote on Twitter
  • Most up-voted character will feature as an exclusive character in Ghost Dash: Scared Of The Dark
  • By sumbitting an entry you allow us to feature your image on Twitter and on this page as part of the competition
  • Only the winning entry will be used in the game
  • Wall West will own the copyright to winning entry art work
  • The character will be un-lockable using in-game collectibles
  • Winning entry will be required to further submit 7 “walking” animation frames to feature in the game (these will not have to be complex, just similar to below sample, frames can be repeated)
  • In case of a very small number of entries (less than 10) or in case of poor quality entries the competition may be declared void and the winning entry selected by Wall West
  • Participation is free
  • No purchase necessary
  • Competition is run by Wall West, 10th Floor, One Canada Square, Canary Wharf, London E14 5AA
  • Multiple entries are allowed
  • Winners will be notified via direct message on Twitter or email
  • Results will be announced on Twitter and on this page
  • Game will be released exclusive to iOS
  • Final game release date may vary
  • All final decisions remain with Wall West

Frame Reference