[Swift]SpriteKit實現類似畫素鳥的小遊戲 - Crashy Plane

_AriSwift發表於2019-05-04
Swift遊戲

畫素鳥曾經非常火爆,遊戲簡單,很有趣味性,仿寫一個叫 crashy plane 的遊戲,它的原理跟畫素鳥是一樣的,接下來用 SpriteKit 來實現它

同時推薦一個不錯的學習 Swift 的網站,這個 Crashy Plane 就是從那裡偷來的

hackingwithswift

demo 地址

目錄:

開始:

0.建立專案

  • a.建立專案 選擇 Game

    [Swift]SpriteKit實現類似畫素鳥的小遊戲 - Crashy Plane

  • b.找到 GameScene.sks,將 helloWorld 的 label刪除掉,然後將寬高調整為 W:375 H:667, 錨點設定為 X:0 Y:0,重力設定為X:0 Y:-5

    [Swift]SpriteKit實現類似畫素鳥的小遊戲 - Crashy Plane

  • c.開啟GameScene.swift 刪除多餘的程式碼,只留下 override func didMove(to view: SKView) ,override func update(_ currentTime: TimeInterval)和override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?)

1.生成 ui

  • 飛機
    func createPlayer() {
        let playerTexture = SKTexture(imageNamed: R.image.player1.name)
        player = SKSpriteNode(texture: playerTexture)
        player.position = CGPoint(x: frame.width / 6, y: frame.height * 0.75)
        player.zPosition = 10
        addChild(player)
    }
複製程式碼
  • 天空
    func createSky() {
        let topSky = SKSpriteNode(color: UIColor(hue: 0.55, saturation: 0.14, brightness: 0.97, alpha: 1), size: CGSize(width: frame.width , height: 0.67 * frame.height))
        topSky.anchorPoint = CGPoint(x: 0.5, y: 1)
        topSky.zPosition = -40
        topSky.position = CGPoint(x: frame.midX, y: frame.maxY)
        
        let bottomSky = SKSpriteNode(color: UIColor(hue: 0.55, saturation: 0.16, brightness: 0.96, alpha: 1), size: CGSize(width: frame.width , height: 0.33 * frame.height))
        bottomSky.anchorPoint = CGPoint(x: 0.5, y: 1)
        bottomSky.zPosition = -40
        bottomSky.position = CGPoint(x: frame.midX, y: 0.33 * frame.height)
        
        addChild(topSky)
        addChild(bottomSky)
    }
複製程式碼
  • 背景
    • 生成兩個首位相接的背景圖,方便後期無限運動的效果
    func createBackground() {
        let backgroundTexture = SKTexture(imageNamed: R.image.background.name)
        for i in 0 ... 1 {
            let background = SKSpriteNode(texture: backgroundTexture)
            background.zPosition = -30
            background.anchorPoint = .zero
            background.position = CGPoint(x: CGFloat(i) * backgroundTexture.size().width, y: 100)
            addChild(background)
        }
    }
複製程式碼
  • 地面
    • 同背景,也是生成兩個首尾相接的地面
    func createGround() {
        let groundTexture = SKTexture(imageNamed: R.image.ground.name)
        for i in 0...1{
            let ground = SKSpriteNode(texture: groundTexture)
            ground.zPosition = -10
            ground.position = CGPoint(x: (CGFloat(i) + 0.5) * groundTexture.size().width, y: groundTexture.size().height/2)
            addChild(ground)
        }
    }
複製程式碼
  • 上下的兩個石頭(類似畫素鳥的兩個管道)
    • 上下兩個石頭是一樣的 texture,只是上面的石頭是旋轉後再鏡面翻轉
    • 兩個石頭起始位置在螢幕右側之外
    • 兩個石頭的距離固定,位置隨機
    • 兩個石頭後面新增一個得分檢測節點(SKNode),用於判斷飛機飛過石頭得分的
    func createRocks() {
        let rockTexture = SKTexture(imageNamed: R.image.rock.name)
        let topRock = SKSpriteNode(texture: rockTexture)
        
        topRock.zRotation = .pi
        topRock.xScale = -1
        topRock.zPosition = -20
        
        let bottomRock = SKSpriteNode(texture: rockTexture)
        bottomRock.zPosition = -20
        
        let rockCollision = SKSpriteNode(color: .red, size: CGSize(width: 32, height: frame.height))
        rockCollision.name = scoreDetect
        
        addChild(topRock)
        addChild(bottomRock)
        addChild(rockCollision)
        
        let xPosition = frame.width + topRock.frame.width
        
        let max = CGFloat(frame.width/3)
        let yPosition = CGFloat.random(in: -50...max)
        
        let rockDistance: CGFloat = 70
        
        topRock.position = CGPoint(x: xPosition, y: yPosition + topRock.size.height + rockDistance)
        bottomRock.position = CGPoint(x: xPosition, y: yPosition - rockDistance)
        rockCollision.position = CGPoint(x: xPosition + rockCollision.size.width * 2, y: frame.midY)
    }
複製程式碼
  • 得分 Lable
    func createScore() {
        scoreLabel = SKLabelNode(fontNamed: "Optima-ExtraBlack")
        scoreLabel.fontSize = 24
        
        scoreLabel.position = CGPoint(x: frame.midX, y: frame.maxY - 60)
        scoreLabel.text = "SCORE: 0"
        scoreLabel.fontColor = UIColor.black
        
        addChild(scoreLabel)
    }
複製程式碼
  • 效果圖:

[Swift]SpriteKit實現類似畫素鳥的小遊戲 - Crashy Plane

2.生成動態效果

飛機只是一張圖片,後面的山也沒用動起來,彆著急,接下來讓所有的節點都動起來

  • 飛機
    • 素材庫一共三張飛機的圖片,每0.1秒改變一張圖片,然後一直迴圈

createPlayer方法新增程式碼

    let frame2 = SKTexture(imageNamed: R.image.player2.name)
    let frame3 = SKTexture(imageNamed: R.image.player3.name)
    let animation = SKAction.animate(with: [playerTexture,frame2,frame3,frame2], timePerFrame: 0.1)
    let forever = SKAction.repeatForever(animation)
    player.run(forever)
複製程式碼
  • 背景
    • 每個 background 在20秒內移動一個 texture 寬度的距離
    • 在0秒內把每個 background 復位
    • 上面兩個動作重複 createBackground方法每個background 新增 如下action
let move = SKAction.moveBy(x: -backgroundTexture.size().width, y: 0, duration: 20)
let reset = SKAction.moveBy(x: backgroundTexture.size().width, y: 0, duration: 0)
let sequence = SKAction.sequence([move,reset])
let forever = SKAction.repeatForever(sequence)
background.run(forever)
複製程式碼
  • 地面
  • 同背景的步驟一樣
let move = SKAction.moveBy(x: -groundTexture.size().width, y: 0, duration: 5)
let reset = SKAction.moveBy(x: groundTexture.size().width, y: 0, duration: 0)
let sequence = SKAction.sequence([move,reset])
let forever = SKAction.repeatForever(sequence)
ground.run(forever)
複製程式碼
  • 石頭
    • 6.2秒內從螢幕右側移動到螢幕左側
    • 移除
    • 新增一個新方法迴圈新增新的石頭
let endPosition = frame.width + topRock.size.width * 2

let moveAction = SKAction.moveBy(x: -endPosition, y: 0, duration: 6.2)
let sequence = SKAction.sequence([moveAction,SKAction.removeFromParent()])
topRock.run(sequence)
bottomRock.run(sequence)
rockCollision.run(sequence)
複製程式碼
func startRocks() {
    let createRocksAction = SKAction.run { [unowned self] in
        self.createRocks()
    }
    let sequence = SKAction.sequence([createRocksAction,SKAction.wait(forDuration: 3)])
    let repeatAction = SKAction.repeatForever(sequence)
    run(repeatAction)
}
複製程式碼

效果:

[Swift]SpriteKit實現類似畫素鳥的小遊戲 - Crashy Plane

3.新增 physicsBody

畫面已經動起來了,接下來我希望我的飛機可以自由落體,然後可以和石頭地面發生碰撞

///給飛機新增 physicsBody
player.physicsBody = SKPhysicsBody(texture: playerTexture, size: playerTexture.size())
player.physicsBody?.contactTestBitMask = player.physicsBody!.collisionBitMask
player.physicsBody?.isDynamic = true

///給地面新增 physicsBody
ground.physicsBody = SKPhysicsBody(texture: groundTexture, size: groundTexture.size())
ground.physicsBody?.isDynamic = false

///給石頭新增 physicsBody
///上面的石頭要在旋轉之前新增 physicsBody  要讓 physicsBody 跟著圖形一起翻轉過去
topRock.physicsBody = SKPhysicsBody(texture: rockTexture, size: rockTexture.size())
topRock.physicsBody?.isDynamic = false

bottomRock.physicsBody = SKPhysicsBody(texture: rockTexture, size: rockTexture.size())
bottomRock.physicsBody?.isDynamic = false

rockCollision.physicsBody = SKPhysicsBody(rectangleOf: CGSize(width: 32, height: frame.height))
rockCollision.physicsBody?.isDynamic = false
複製程式碼

4.新增互動

飛機已經可以自由落體了,接下來實現點選螢幕時,飛機向上飛起,當碰撞到紅色的區域時,獲得得分.

在 didMove(to view: SKView) 方法中新增如下程式碼

physicsWorld.contactDelegate = self
複製程式碼

GameScene 新增 score 屬性

var score = 0 {
    didSet {
        scoreLabel.text = "SCORE: \(score)"
    }
}
複製程式碼

實現SKPhysicsContactDelegate協議的didBegin(_ contact: SKPhysicsContact) 方法,判斷飛機碰撞到得分判定區來加分,實際上這段應該放到碰撞裡面講,放到這裡是為了更好的看飛機互動的效果

extension GameScene: SKPhysicsContactDelegate {
    func didBegin(_ contact: SKPhysicsContact) {
        guard let nodeA = contact.bodyA.node,let nodeB = contact.bodyB.node else { return }
        
        if nodeA.name == scoreDetect || nodeB.name == scoreDetect {
            if nodeA == player {
                nodeB.removeFromParent()
            }else if nodeB == player {
                nodeA.removeFromParent()
            }
            score += 1
            return
        }
    }
}
複製程式碼

每次點選螢幕時 飛機施加向上衝力

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    player.physicsBody?.velocity = CGVector.zero
    player.physicsBody?.applyImpulse(CGVector(dx: 0, dy: 20))
}
複製程式碼

為了飛機上升和下降的過程更真實,我們根據飛機 Y 方向的速度來調整飛機頭的朝向

override func update(_ currentTime: TimeInterval) {
    guard player != nil else { return }
    let rotate = SKAction.rotate(toAngle: player.physicsBody!.velocity.dy * 0.001, duration: 1)
    player.run(rotate)
}

複製程式碼

5.碰撞判斷

飛機的互動已經完成,接下來實現各種物體的碰撞判斷(得分判斷在4.新增互動已經實現)

在didBegin(_ contact: SKPhysicsContact)方法中 已經判斷的碰撞到得分點的情況,那麼其他的情況就是碰到了地面或者上下的兩個石頭,新增如下程式碼,當碰到地面或者石頭時,銷燬飛機,並新增飛機位置新增爆炸特效,同時將 scene 的 speed 設定為0,畫面就會停下了

guard let explosion = SKEmitterNode(fileNamed: R.file.playerExplosionSks.name) else {return}
explosion.position = player.position
addChild(explosion)
player.removeFromParent()
speed = 0
複製程式碼

效果:

[Swift]SpriteKit實現類似畫素鳥的小遊戲 - Crashy Plane

6.新增音效

得分時爆炸時有音效,同時遊戲還要有背景音.

GameScene 新增一個 audio 節點 var backgroundMusic: SKAudioNode!

在 didMove 方法中 新增如下程式碼

if let url = R.file.musicM4a() {
    backgroundMusic = SKAudioNode(url: url)
    addChild(backgroundMusic)
}
複製程式碼

爆炸和得分的音效程式碼加到相應的位置

///得分
let sound = SKAction.playSoundFileNamed(R.file.coinWav.name, waitForCompletion: false)
run(sound)

///爆炸
let sound = SKAction.playSoundFileNamed(R.file.explosionWav.name, waitForCompletion: false)
run(sound)

複製程式碼

7.完善遊戲週期

現在遊戲已經可以玩了,但是死亡後,沒有辦法重新開始,接下來,我們為遊戲新增 logo 和 game over 和重新開始遊戲的操作

宣告一個 GameState 的列舉

enum GameState {
    case showingLogo
    case playing
    case dead
}
複製程式碼

GameScene 新增一個 gameState 的屬性,預設值為showingLogo

var gameState = GameState.showingLogo

新增 logo 和 gameOver 的節點屬性

var logo: SKSpriteNode!
var gameOver: SKSpriteNode!
複製程式碼

生成 logo和 gameOver

func createLogo() {
    logo = SKSpriteNode(imageNamed: R.image.logo.name)
    logo.position = CGPoint(x: frame.midX, y: frame.midY)
    addChild(logo)
    
    gameOver = SKSpriteNode(imageNamed: R.image.gameover.name)
    gameOver.position = CGPoint(x: frame.midX, y: frame.midY)
    gameOver.alpha = 0
    addChild(gameOver)
}
複製程式碼

修改touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?)的邏輯

當遊戲處於 showingLogo 狀態點選螢幕執行隱藏 logo,恢復飛機的isDynamic屬性,開始生成石頭,將 gameState 改為 playing

處於playing狀態時給飛機增加向上衝力

處於死亡狀態時 重新生成 GameScene ,這樣比把所有的節點恢復到初始狀態要簡單的多,重新生成 Scene

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    switch gameState {
    case .showingLogo:
        gameState = .playing
        let fadeOut = SKAction.fadeOut(withDuration: 0.5)
        let wait = SKAction.wait(forDuration: 0.5)
        let activePlayer = SKAction.run { [weak self] in
            self?.player.physicsBody?.isDynamic = true
            self?.startRocks()
        }
        let sequence = SKAction.sequence([fadeOut,wait,activePlayer,SKAction.removeFromParent()])
        logo.run(sequence)
    case .playing:
        player.physicsBody?.velocity = CGVector.zero
        player.physicsBody?.applyImpulse(CGVector(dx: 0, dy: 20))
    case .dead:
        let scene = GameScene(fileNamed: R.file.gameSceneSks.name)!
        let transition = SKTransition.moveIn(with: .left, duration: 1)
        self.view?.presentScene(scene, transition: transition)
    }
}
複製程式碼

碰撞到地面和石頭時 顯示 gameOver,同時gameState改為 dead

gameOver.alpha = 1
gameState = .dead
複製程式碼

最後,別忘更改了一些細節

createPlayer方法中player.physicsBody.isDynamic要改為 false player.physicsBody?.isDynamic = false

didMove 方法中移出 startRocks()的呼叫,因為生成石頭是在遊戲開始後

createRock方法中,得分判斷區的顏色要改為透明的

let rockCollision = SKSpriteNode(color: .clear, size: CGSize(width: 32, height: frame.height))
複製程式碼

回到GameViewController中

把這3項設為 false
view.showsFPS = false //是否顯示 FPS
view.showsNodeCount = false//是否顯示節點數量
view.showsPhysics = false /// 是否顯示物理區域()
複製程式碼

這樣 一個簡單的遊戲就完成了,接下來就可以 enjoy your game 了

相關文章