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

Marin Todorov

October 03, 2014
Tweet

More Decks by Marin Todorov

Other Decks in Programming

Transcript

  1. Getting real with SK
    in Swift
    Please download the start project from www.spritekit101.info now!

    View full-size slide

  2. Marin Todorov
    Author at raywenderlich.com, iOS consultant
    www.touch-code-magazine.com

    View full-size slide

  3. iOS Games by
    Tutorials
    The first book on

    game development with Swift
    !
    !
    www.ios-games-by-tutorials.com

    View full-size slide

  4. Game workshop in Swift
    • SpriteKit had huge revamp in iOS8!
    • Completely in Swift
    • New Xcode ver. 6
    • New power tools

    View full-size slide

  5. almost
    • Xcode 6
    • Scene editor
    • Effects / lighting
    • Swift

    View full-size slide

  6. AlienAttack
    • iOS8 / SpriteKit
    • Swift

    View full-size slide

  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

    View full-size slide

  8. Epic loot
    www.spritekit101.info

    View full-size slide

  9. Introduction
    ~ 15 min

    View full-size slide

  10. SpriteKit project
    • SpriteKit.framework
    • integrated
    • built-in
    UIKit app (nav. controller, etc)
    view controller
    SKView

    View full-size slide

  11. Scene editor
    • Xcode 6 built-in
    • add objects
    • edit their properties

    View full-size slide

  12. Sprites
    position
    size
    opacity
    zRotation
    scale
    children

    View full-size slide

  13. Task #1
    Make chicken #2 eat
    Continue from Save #1
    ~ 5 min

    View full-size slide

  14. • 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

    View full-size slide

  15. Task #2
    Add two more labels
    ~ 5 min

    View full-size slide

  16. • 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

    View full-size slide

  17. Task #3
    Create an enemy
    ~ 10 min
    Continue from Save #2

    View full-size slide

  18. • 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

    View full-size slide

  19. Task #4
    Make the enemy run
    ~ 10 min
    Continue from Save #3

    View full-size slide

  20. • 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)

    View full-size slide

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

    View full-size slide

  22. • 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

    View full-size slide

  23. Task #6
    Flash screen
    ~ 8 min

    View full-size slide

  24. • 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

    View full-size slide

  25. Task #7
    Make some noise!
    ~ 5 min

    View full-size slide

  26. • in your scene class preload the explosion sound action:!
    !
    !
    !
    • at the bottom of takeHit() play the explosion sound:

    View full-size slide

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

    View full-size slide

  28. Task #8
    Handle touches to shoot rocket
    ~ 5 min
    Continue from Save #6

    View full-size slide

  29. !
    • 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

    View full-size slide

  30. Task #9
    Launch rocket!
    ~ 10 min

    View full-size slide

  31. • 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

    View full-size slide

  32. Task #10
    Create physics bodies
    ~ 8 min
    Continue from Save #7

    View full-size slide

  33. • 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

    View full-size slide

  34. Task #11
    Detect contact
    ~ 10 min

    View full-size slide

  35. • 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

    View full-size slide

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

    View full-size slide

  37. Task #12
    Detect when game is lost
    ~ 5 min
    Continue from Save #9

    View full-size slide

  38. • 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

    View full-size slide

  39. Task #13
    Show end game
    ~ 10 min

    View full-size slide

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


    start observing “finished”!
    !
    !
    • override observeValueForKeyPath(…) and inside add:!
    !
    !
    !
    !

    ~10 min

    View full-size slide

  41. Task #14
    Effects!
    ~ 3 min

    View full-size slide

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

    ~3 min

    View full-size slide

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

    View full-size slide

  44. • in the game scene class, inside checkForCompleteLevel():!
    !
    !
    !
    !
    • in GameViewController, inside observeValueForKeyPath():!
    !
    !
    !

    ~5 min

    View full-size slide

  45. Task #16
    Integrate UIKit and SpriteKit
    ~ 10 min

    View full-size slide

  46. • in GameViewController add a gesture recognizer to the view:!
    !
    !
    !
    !
    !
    !
    • in GameScene add a new empty method swipe():!
    !

    ~10 min

    View full-size slide

  47. Save #11
    The Complete project
    more sounds + swipe up superpower

    View full-size slide

  48. Review
    • use SceneEditor (doh!)
    • create and run all kind of actions on sprites
    • effects for effect nodes
    • contact detection
    • game logic

    View full-size slide

  49. Epic loot
    www.spritekit101.info

    View full-size slide

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

    View full-size slide

  51. www.spritekit101.info
    6JCPM[QW

    View full-size slide