SpriteKit with Swift workshop

First presented at Pragma Mark 2014

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
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
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
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)
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
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
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
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
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
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
57. Save #8
58. Break #2 Keep it tight please! 1 min 0
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
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
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