table-hockey-en

A SpriteKit game app

Code Together: Let's make iPhone app in an hour

Thank you for visiting our account. We are going to make a map app in an hour. If would you like to study yourself before hands-on, or review what you have learned in the session, please use the following material.

Meetup

We are providing free hands-on on a monthly basis

https://www.meetup.com/iOS-Development-Meetup-for-Beginner/

Do you need a tutor?

We also hold face-to-face or group lesson for individual interested in making iOS app themselves

http://ios-class-for-beginner.esy.es/

Development Environment

Xcode 8.3.2 / Swift 3

Full procedure

0, Create your project

0-1. Open Xcode 0-2. Select ^{Create a new Xcode project} or Go to File → New → Project...
0-3. Select ^Game and then tap ^Next
0-4. Fill ^{Product name}, select ^SpriteKit then click ^Next
0-5. Select the place for saving your project and then tap ^Create

View Gif

1, Design your app

🗂 Set up your Scene.

1-1. Remove helloLabel from GameScene.sks file.

View Gif

1-2. Set up the puck.

• Drag and drop a Color Sprite to your Scene.
• Set its Name to "puck".
• Fix its position to (0 , 0) and its width and height to 30.

View Gif

1-3. Add the 2x puck and player images to your assets and

View Gif

>

1-4. Set pucks Texture to "puck-2x" and lower the opacity for the Scene color for better appearance.

View Gif

>

1-5. Change the Body Type to "Bounding circle".

• Uncheck "Allows rotation"
• Uncheck "Affected By Gravity"
• Set "Friction" to 0
• Set "Restitution" to 0
• Set "Lin. Damping" to 0
• Set "Ang. Damping" to 0
• Set "Category Mask" to 2
• Set "Collision Mask" to 1
• Set "Field Mask" to 0
• Set "Contact Mask" to 1

View Gif

>

1-6. Make a bottomPlayer and a topPlayer similar to the puck. Use the video as an example.

View Gif

>

1-7. Create 2 nettings with height of 1, Collision Mask of 2 and contact mask of 2 and set category masks to 3, and 4 (for score counting). Place them where you want to count scores.

2, Add code blocks in GameScene.swift

🗂 GameScene.swift

★ It's preferable to write following code yourself. It will help you to understand code more.

import SpriteKit
import GameplayKit

class GameScene: SKScene, SKPhysicsContactDelegate {
    
    // Define SpriteNodes
    var puck = SKSpriteNode()
    var playerBottom = SKSpriteNode()
    var playerTop = SKSpriteNode()
    var bottomNet = SKSpriteNode()
    var topNet = SKSpriteNode()
    
    // Define Labels
    var topLable = SKLabelNode()
    var bottomLable = SKLabelNode()
    var pucksPhysics = SKPhysicsBody()
    
    var score = [Int]()
    
    override func sceneDidLoad() {
        
        score = [0,0]
        
        // Link up SpriteNodes
        puck = self.childNode(withName: "puck") as! SKSpriteNode
        playerBottom = self.childNode(withName: "playerBottom") as! SKSpriteNode
        playerTop = self.childNode(withName: "playerTop") as! SKSpriteNode
        bottomNet = self.childNode(withName: "bottomNet") as! SKSpriteNode
        topNet = self.childNode(withName: "topNet") as! SKSpriteNode
        
        // Link up Labels
        topLable = self.childNode(withName: "topLable") as! SKLabelNode
        bottomLable = self.childNode(withName: "bottomLable") as! SKLabelNode
        
        // Add directions to the puck as an impulse in movement
        pucksPhysics = puck.physicsBody!
        puck.physicsBody?.applyImpulse(CGVector(dx: 0, dy: -20))
        
        // Define the game bounderies
        let border = SKPhysicsBody(edgeLoopFrom: self.frame)
        border.friction = 0
        border.restitution = 1
        
        // Apply the boundaries
        self.physicsBody = border
        self.physicsWorld.contactDelegate = self
    }

    func addScore(playerWhoWon: SKSpriteNode) {
        
        // Reset the puck position and zero its velocity
        puck.physicsBody = nil
        puck.position = CGPoint(x: 0, y: 0)
        puck.physicsBody = pucksPhysics
        
        
        // Add the score for the right player and push the ball in opponents direction
        if playerWhoWon == playerBottom {
            score[0] += 1
            puck.physicsBody?.applyImpulse(CGVector(dx: 0, dy: 20))
        } else if playerWhoWon == playerTop {
            score[1] += 1
            puck.physicsBody?.applyImpulse(CGVector(dx: 0, dy: -20))
        }

        // Display the score
        topLable.text = "\(score[1])"
        bottomLable.text = "\(score[0])"
    }
    
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        for touch in touches {
            let location = touch.location(in: self)
            playerBottom.run(SKAction.moveTo(x: location.x, duration: 0.2))
        }
    }
    
    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
        for touch in touches {
            let location = touch.location(in: self)
            playerBottom.run(SKAction.moveTo(x: location.x, duration: 0.2))
        }
    }
    
    
    override func update(_ currentTime: TimeInterval) {
        
        playerTop.run(SKAction.moveTo(x: puck.position.x, duration: 1))
        
    }
    
    func didBegin(_ contact: SKPhysicsContact) {
        
        let firstBody = contact.bodyA
        let secondBody = contact.bodyB
        
        if(firstBody.categoryBitMask == 2 && secondBody.categoryBitMask == 3 ||
            firstBody.categoryBitMask == 3 && secondBody.categoryBitMask == 2)
        {
            addScore(playerWhoWon: playerTop)
           
        } else if(firstBody.categoryBitMask == 2 && secondBody.categoryBitMask == 4 ||
            firstBody.categoryBitMask == 4 && secondBody.categoryBitMask == 2)
        {
            addScore(playerWhoWon: playerBottom)
        }
    }
    
}