Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SpriteKit with Swift workshop

SpriteKit with Swift workshop

First presented at Pragma Mark 2014

Bbb75c4dd2e17a7e3114c730ec7144d0?s=128

Marin Todorov

October 03, 2014
Tweet

Transcript

  1. Getting real with SK in Swift Please download the start

    project from www.spritekit101.info now!
  2. Marin Todorov Author at raywenderlich.com, iOS consultant www.touch-code-magazine.com

  3. iOS Games by Tutorials The first book on
 game development

    with Swift ! ! www.ios-games-by-tutorials.com
  4. Game workshop in Swift • SpriteKit had huge revamp in

    iOS8! • Completely in Swift • New Xcode ver. 6 • New power tools
  5. almost • Xcode 6 • Scene editor • Effects /

    lighting • Swift
  6. AlienAttack • iOS8 / SpriteKit • Swift

  7. The Plan Introduction ~ 15min Save 1 Tasks #1/2 ~

    10min Save 2 Task #3 ~ 10 min Save 5 Goes on … [ 15 min Break ] www.spritekit101.info
  8. Epic loot www.spritekit101.info

  9. Introduction ~ 15 min

  10. SpriteKit project • SpriteKit.framework • integrated • built-in UIKit app

    (nav. controller, etc) view controller SKView
  11. Scenes + +

  12. Scene editor • Xcode 6 built-in • add objects •

    edit their properties
  13. Sprites position size opacity zRotation scale children

  14. Demo

  15. Save #1

  16. Task #1 Make chicken #2 eat Continue from Save #1

    ~ 5 min
  17. • Duplicate the code to connect chicken2 to the scene

    sprite! • Duplicate the code to create the frame animation! • Run the animation on chicken2! • [⚛] Play with timerPerFrame and repeat ~5 min
  18. None
  19. Task #2 Add two more labels ~ 5 min

  20. • Duplicate the create and configure code from waveLabel to

    scoreLabel! ! ! ! ! ! ! • [⚛] Play with zRotation ~5 min waveLabel ~> scoreLabel ammoLabel string “Score: \(score)” “Ammo: \(ammoCount)” h. alignment .Center .Right position.x frame.size.width/2.0 frame.size.width - 40.0
  21. None
  22. Save #2

  23. Task #3 Create an enemy ~ 10 min Continue from

    Save #2
  24. • create new method spawnEnemy() and call it from didMoveToView()!

    • startPt=x: CGFloat.random(min:0, max: frame.size.width), y: frame.size.height! • fallPt = x: startPt.x, y: 160.0! • enemy = SKSpriteNode(imageNamed: “mwd1”)! • position = startPt, name = “enemy”, setScale(0.2)! • load and run frame animation on enemy with name ”mwd” and 9 steps
 
 
 
 
 ! • create and run scale animation on enemy: SKAction.scaleTo(2.0, duration: 7.0)! • create and run move animation: SKAction.moveTo(fallPt, duration: 5.0) ~10 min
  25. None
  26. Save #3

  27. Task #4 Make the enemy run ~ 10 min Continue

    from Save #3
  28. • create an action sequence with 
 
 three move

    actions and run it on
 
 enemy! • replace move animation from prev. task with the new action sequence! • replace walking frame animation with running frame animation: ~8 min fallPt walkPt runPt (startPt.x, 160.0) (startPt.x, 120.0) (startPt.x, 40.0)
  29. None
  30. Save #4

  31. Task #5 Add Explosions ~ 8 min Continue from Save

    #4
  32. • make new method: takeHit(enemy: SKSpriteNode)! • call removeFromParent() on

    the passed parameter! • create explostion by calling timedEmitter(“spark”, emitTime: 0.1, totalTime: 
 
 2.0)! • set the exposition’s position to the enemy’s position! ! • back in spawEnemy(), add one more action to the action sequence:! ! ! ! • [⚛] Play with explosion.particleSpeed = [25 … 250] ~8 min
  33. None
  34. Task #6 Flash screen ~ 8 min

  35. • make new method: flash()! • create new SKSpriteNode(), set

    its position and size from bgNode! • set its color to: SKColor.redColor().colorWithAlphaComponent(0.5)! • add it to the scene ( via addChild )! • run this sequence on the node:! ! ! ! • call flash() from takeHit() ~6 min
  36. None
  37. Task #7 Make some noise! ~ 5 min

  38. • in your scene class preload the explosion sound action:!

    ! ! ! • at the bottom of takeHit() play the explosion sound:
  39. Save #5

  40. Break #1 Keep it tight please! 15 min

  41. None
  42. None
  43. None
  44. Save #6

  45. Task #8 Handle touches to shoot rocket ~ 5 min

    Continue from Save #6
  46. ! • make new method shoot(pt: CGPoint)! • print the

    pt param in shoot’s body! ! • override touchesEnded(touches:, event:)! • get one touch:! ! ! • finally call shoot() and pass the touch location point ~10 min
  47. None
  48. Task #9 Launch rocket! ~ 10 min

  49. • inside the shoot() method:! • 1) if ammoCount <

    1 return; 2) set ammoCount-1; 3) update ammoLabel.text! • set rocket’s zRotation to (pt - rocket.position).angle
 
 set emissionAngle to (rocket.position - pt).angle! • run scale action to 0.75 scale on rocket for 1 second! • run the following actions sequence on rocket:! ! ! ! • moveTo pt over duration of 1 second runBlock 1) create explosion at the position of rocket 2) if ammoCount > 0 call showRocket() removeFromParent ~10 min
  50. None
  51. Save #7

  52. Task #10 Create physics bodies ~ 8 min Continue from

    Save #7
  53. • in spawnEnemy(), create a body for the enemy and

    set its category! ! ! ! • in showRocket(), create a body for the rocket, and set its contact category! ! ! • in GameViewController.viewDidLoad() : ~8 min
  54. Task #11 Detect contact ~ 10 min

  55. • make the scene class adhere to the SKPhysicsContactDelegate protocol!

    • in didMoveToView() set the contact delegate: 
 
 physicsWorld.contactDelegate = self! • create a new method: didBeginContact(contact: SKPhysicsContact)! • remove the hit enemy:! ! ! • set score to score + 1! • update scoreLabel with the new score ~10 min
  56. None
  57. Save #8

  58. Break #2 Keep it tight please! 1 min 0

  59. None
  60. None
  61. None
  62. None
  63. Save #9

  64. Task #12 Detect when game is lost ~ 5 min

    Continue from Save #9
  65. • declare a new variable on the scene class, which

    is using dynamic dispatch:! ! ! • inside checkForCompletedLevel() check if health is less than 1! • if so set wavePaused to true, finished to “lost”, and return ~5 min
  66. None
  67. Task #13 Show end game ~ 10 min

  68. • in GameViewController after you present the scene on screen,

    
 
 start observing “finished”! ! ! • override observeValueForKeyPath(…) and inside add:! ! ! ! ! • ~10 min
  69. Task #14 Effects! ~ 3 min

  70. • inside observeValueForKeyPath(…), after presenting the alert, add:! ! !

    ! ! • ~3 min
  71. None
  72. Save #10

  73. Task #15 Check for win! ~ 10 min

  74. • in the game scene class, inside checkForCompleteLevel():! ! !

    ! ! • in GameViewController, inside observeValueForKeyPath():! ! ! ! • ~5 min
  75. Task #16 Integrate UIKit and SpriteKit ~ 10 min

  76. • in GameViewController add a gesture recognizer to the view:!

    ! ! ! ! ! ! • in GameScene add a new empty method swipe():! ! • ~10 min
  77. Save #11 The Complete project more sounds + swipe up

    superpower
  78. Demo

  79. Review • use SceneEditor (doh!) • create and run all

    kind of actions on sprites • effects for effect nodes • contact detection • game logic
  80. Epic loot www.spritekit101.info

  81. Wrap-up slides, source code, saves www.spritekit101.info

  82. www.spritekit101.info 6JCPM[QW