html5实现像素鸟,[Swift]SpriteKit实现类似像素鸟的小游戏 - Crashy Plane

像素鸟曾经非常火爆,游戏简单,很有趣味性,仿写一个叫 crashy plane 的游戏,它的原理跟像素鸟是一样的,接下来用 SpriteKit 来实现它

同时推荐一个不错的学习 Swift 的网站,这个 Crashy Plane 就是从那里偷来的

目录:

开始:

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, 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)

}

复制代码效果图:

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, 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, with event: UIEvent?)的逻辑

当游戏处于 showingLogo 状态点击屏幕执行隐藏 logo,恢复飞机的isDynamic属性,开始生成石头,将 gameState 改为 playing

处于playing状态时给飞机增加向上冲力

处于死亡状态时 重新生成 GameScene ,这样比把所有的节点恢复到初始状态要简单的多,重新生成 Scene

override func touchesBegan(_ touches: Set, 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 了