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

_AriSwift發表於2019-05-04

Swift遊戲

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

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

hackingwithswift

demo 地址

開始:

0.建立專案

a.建立專案選擇 Game
b.找到 GameScene.sks,將 helloWorld 的 label刪除掉,然後將寬高調整為 W:375 H:667, 錨點設定為 X:0 Y:0,重力設定為X:0 Y:-5
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)
}
複製程式碼

效果:

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
複製程式碼

效果:

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 了

實現SLIC演算法生成畫素畫
2021-06-24
演算法
【Swift】類似於微博、微信的ActionSheet
2017-12-13
Swift
PostgreSQL類似OracleMERGE功能的實現
2018-12-20
SQLOracle
簡單實現類似Spring的Aop原理實現
2017-04-23
Spring
裝置畫素、獨立畫素和css畫素
2018-01-19
CSS
retina屏中1物理畫素border的實現
2017-11-20
MySQL的字首索引及Oracle的類似實現
2018-01-29
MySql索引Oracle
用Swift和SpriteKit開發iOS遊戲
2014-10-28
SwiftiOS遊戲
類似咻一咻，水波紋實現
2016-10-19
SQLite中中實現 if not exist 類似功能
2016-12-23
SQLite
go如何實現類似java的動態代理
2016-10-16
GoJava
實現類似IE的列印網頁功能 (轉)
2008-05-24
網頁
手機實現1畫素邊框顯示
2017-07-10
類似憤怒的小鳥關卡中雞的設定
2012-08-24
用 golang 去實現類似 swoole 的 websocket 服務 ?
2020-05-11
GolangWeb
教你如何用SQLite 實現if not exist 類似功能的操作
2022-01-12
SQLite
Blazor如何實現類似於微信的Tab切換？
2023-01-23
Blazor
JS實現類似於微博秀的GitHub掛件
2016-08-29
JSGithub
實現類似Pinterest 的圖片預載入功能
2016-09-11
REST
實現類似QQ的即時通訊程式(十一)
2013-06-26
在Asp.Net中實現類似DWR的功能
2009-10-23
ASP.NET
MySQL 06 mysql 如何實現類似 oracle 的 merge into
2024-04-11
MySqlOracle
Flutter 實現類似TabPicker省市區選擇
2020-07-20
Flutter
flutter實現類似優惠券樣式
2019-10-22
Flutter
在鴻蒙中實現類似瀑布流效果
2021-05-27
鴻蒙
【移動適配】一個畫素的border怎麼實現
2016-03-04
類似這樣的連結是如何實現的呢?
2005-02-22
PHP - 實現類似於百度的實時搜尋
2016-09-22
PHP
【Swift】類似於微博、微信的多圖瀏覽檢視
2017-12-13
Swift
canvas畫素畫板
2018-11-12
Canvas
樸素貝葉斯實現文件分類
2019-10-07
掌握web開發基礎系列--物理畫素、邏輯畫素、css畫素
2019-05-07
WebCSS
實現謠傳QQ中的手段——“1畫素頁面保活”
2017-11-07
Laravel 小技巧 - 讓路由實現類似 Model::query 的效果
2019-12-29
Laravel路由
如何實現類似 lodash 的 get 與 merge 函式
2019-05-13
函式
採用 SwiftNIO 實現一個類似 Express 的 Web 框架
2018-08-09
SwiftExpressWeb框架
兩步實現類似格瓦拉的轉場動畫
2016-10-31
動畫
Android中實現類似iOS的SwitchButton控制元件
2014-10-09
AndroidiOS控制元件

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

目錄:

0. 建立專案

1. 生成 UI

2. 生成動態效果

3. 新增 physicsBody

4. 新增互動

5. 碰撞判斷

6. 新增音效

7. 完善遊戲週期

開始: