iOS Sprite Kit教程之滾動場景

時間 2019-11-06

標籤 ios sprite kit 教程滾動場景欄目 iOS 简体版

原文原文鏈接

iOS Sprite Kit教程之滾動場景

滾動場景

在不少的遊戲中，場景都不是靜止的，而是滾動的，如在植物大戰殭屍的遊戲中，它的場景如圖2.26所示。node

圖2.26 植物大戰殭屍
swift

在圖2.26中，用黑色框框住的部分是在屏幕上顯示的，即玩家是能夠看到的。右邊的這些內容玩家就看不到了，爲了讓玩家能夠熟悉場景中的內容，此遊戲在開始時，首先對屏幕中的場景進行滾動。本節將爲開發者實現場景滾動的功能。框架

Sprite Kit中讓場景進行滾動

如下是如何讓一個場景進行滾動的具體實現方法。ide

1.建立項目以及添加圖像spa

從上文的內容中能夠看到場景的背景顏色具備單一性，即場景的背景顏色是紅色，場景就爲紅色。通常所說的滾動場景其實就是滾動背景，因此在滾動場景時，場景的滾動效果是看不出來的。爲了能夠看到滾動效果，背景須要使用圖像實現。首先咱們須要添加圖像background1.png和background2.png到建立的項目中。添加圖像的具體步驟以下：scala

（1）建立一個Game類型的項目，命名爲2-2。orm

（2）右擊2-2項目中的Supporting Files文件夾，彈出快捷菜單，如圖2.27所示。對象

圖2.27 添加圖像1
教程

（3）選擇Add Files to "2-2"…命令，彈出選擇文件對話框，如圖2.28所示。遊戲

圖2.28 添加圖像2

（4）選擇須要添加的圖像後，單擊Add按鈕，實現圖像的添加。添加後的圖像就會顯示在Supporting Files文件夾中。

2.修改設備的方向

單擊項目名稱，打開目標窗口，選擇General選項，打開General面板，在其中找到Device Orientation，選擇其中的Landscape Left和Landscape Right單選框。讓運行的模擬器方向變爲橫向，如圖2.29所示。

圖2.29 修改設備方向

3.刪除多餘的代碼

打開GameScene.swift文件，刪除多餘代碼，剩餘的代碼以下：

import SpriteKit
class GameScene: SKScene {
override func didMoveToView(view: SKView) {
}
override func update(currentTime: CFTimeInterval) {
}
}

打開GameViewController.swift文件，刪除多餘代碼，剩餘的代碼以下：

import UIKit
import SpriteKit
class GameViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
}
}

4.編寫實現滾動場景的代碼

（1）打開GameScene.swift文件，添加一個新的框架，以及實現運算符的重載，使其能夠實現兩個點的加法賦值運算以及乘法運算。代碼以下：

import CoreGraphics
//「+」加法運算符的重載
func + (left: CGPoint, right: CGPoint) -> CGPoint {
return CGPoint(x: left.x + right.x, y: left.y + right.y)
}
//「+=」賦值加法運算符的重載
func += (inout left: CGPoint, right: CGPoint) {
left = left + right
}
//「*」乘法運算符的重載
func * (point: CGPoint, scalar: CGFloat) -> CGPoint {
return CGPoint(x: point.x * scalar, y: point.y * scalar)
}

（2）添加一個backgroundNode()方法，此方法實現的功能是將兩個圖像做爲場景中的背景，如圖2.30所示。代碼以下：

func backgroundNode() -> SKSpriteNode {
//建立並設置backgroundNode對象
let backgroundNode = SKSpriteNode()
backgroundNode.anchorPoint = CGPointZero
backgroundNode.name = "background"
//建立並設置backgroundNode1對象
let background1 = SKSpriteNode(imageNamed: "background1")
background1.anchorPoint = CGPointZero
background1.position = CGPoint(x: 0, y: 0)
backgroundNode.addChild(background1)
//建立並設置backgroundNode2對象
let background2 = SKSpriteNode(imageNamed: "background2")
background2.anchorPoint = CGPointZero
background2.position = CGPoint(x: background1.size.width, y: 0)
backgroundNode.addChild(background2)
//設置backgroundNode對象的尺寸
backgroundNode.size = CGSize(
width: background1.size.width + background2.size.width,
height: background1.size.height)
return backgroundNode
}

圖2.30 場景的背景

注意，在此代碼中的背景添加使用的是SKSpriteNode類實現的，對於此類，咱們會在後面進行講解。

（3）在didMoveToView(view: SKView方法中編寫代碼，將設置的背景添加到場景中，代碼以下：

override func didMoveToView(view: SKView) {
let background = backgroundNode() //實例化對象
background.anchorPoint = CGPointZero //設置描點
background.position = CGPointZero //設置位置
background.name = "background"
addChild(background)
}

（4）添加變量到GameScene.swift文件中，代碼以下：

let backgroundMovePointsPerSec: CGFloat = 200.0 //背景在每秒中移動的點
var dt: NSTimeInterval = 0 //時間間距
var lastUpdateTime: NSTimeInterval = 0 //上一次更新的時間

（5）添加一個moveBackground()的方法，在此方法中編寫代碼，使其實現背景的移動，代碼以下：

func moveBackground() {
enumerateChildNodesWithName("background") { node, _ in
let background = node as SKSpriteNode //將node轉換爲SKSpriteNode
let backgroundVelocity =CGPoint(x: -self.backgroundMovePointsPerSec, y: 0) //背景的速度
let amountToMove = backgroundVelocity * CGFloat(self.dt) //偏移量
background.position += amountToMove //背景的位置
}
}

（6）在update(currentTime: NSTimeInterval)方法中編寫代碼，實現數據的更新，進而實現場景的滾動，代碼以下：

override func update(currentTime: NSTimeInterval) {
//判斷lastUpdateTime是否大於0
if lastUpdateTime > 0 {
dt = currentTime - lastUpdateTime
} else {
dt = 0
}
lastUpdateTime = currentTime
moveBackground() //調用
}

（7）打開GameViewController.swift文件，編寫代碼，實現場景的顯示，代碼以下：

override func viewDidLoad() {
super.viewDidLoad()
let scene = GameScene(size:CGSize(width: 2048, height: 1536))
let skView = self.view as SKView
skView.showsFPS = true
skView.showsNodeCount = true
skView.ignoresSiblingOrder = true
scene.scaleMode = .AspectFill
skView.presentScene(scene)
}

此時運行程序，會看到如圖2.31所示的效果。

圖2.31 運行效果

Sprite Kit中的永無休止的滾動場景

在2.5.1小節中，當單擊運行按鈕後，能夠看到場景中的背景圖像實現了滾動，進而實現了場景的滾動，可是，將這兩個圖像都滾動完畢後，場景還在進行滾動，此時背景圖像就慢慢的退出了場景，如圖2.32所示。本小節將爲開發者解決在上一小節中的不足。實現一個永無休止的滾動場景功能，即背景循環滾動。具體的操做步驟以下：

圖2.32 滾動場景

（1）打開GameScene.swift文件，添加一個變量，代碼以下：

let backgroundLayer = SKNode() //實例化一個節點

（2）修改didMoveToView(view: SKView)方法中的代碼，修改後的代碼以下「

override func didMoveToView(view: SKView) {
//變量0到1的範圍
for i in 0...1 {
//設置並添加背景
let background = backgroundNode()
background.anchorPoint = CGPointZero
background.position =CGPoint(x: CGFloat(i)*background.size.width, y: 0)
background.name = "background"
addChild(background)
}
}

（3）修改moveBackground()方法中的代碼，修改後的代碼以下：

func moveBackground() {
enumerateChildNodesWithName("background") { node, _ in
let background = node as SKSpriteNode
let backgroundVelocity =CGPoint(x: -self.backgroundMovePointsPerSec, y: 0)
let amountToMove = backgroundVelocity * CGFloat(self.dt)
background.position += amountToMove
let backgroundScreenPos = self.backgroundLayer.convertPoint(background.position, toNode: self)
//判斷x的值是否小於背景的-width的值
if backgroundScreenPos.x <= -background.size.width {
//設置背景的位置
background.position = CGPoint(
x: background.position.x + background.size.width*2,
y: background.position.y)
}
}
}

此時運行程序，會看到如圖2.33所示的效果。

圖2.33 運行效果

本文選自：iOS遊戲框架Sprite Kit基礎教程——Swift版大學霸內部資料，轉載請註明出處，尊重技術尊重IT人！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。