iOS-SpriteKit—— 场景的创建与切换

任何一款简单的游戏都不仅仅包含单一的界面，至少需要游戏场景界面、游戏开始界面、游戏设置界面等等，对多个页面进行切换是游戏开发中不可避免的问题之一。本文简要介绍如何创建页面和如何切换页面。

创建一个页面

在介绍多页面切换之前，首先介绍如何构建一个页面，在SpriteKit中，也可以称之为场景。当你创建一个空的SpriteKit工程时，会有一个GameScene.swift文件以及GameScene.sks文件，这两个文件就是用于构建一个场景，你可以选择只用代码来完成场景建设，也可以自定义sks文件，将一些静态的内容拖动到画布上，我更习惯前者用纯代码。下面以游戏开始界面为例，介绍构建一个简单的场景，声明MenuScene类，继承于SKScene，SKScene是SpriteKit中的场景基类，所有的场景类构造都需要继承。游戏的开始界面包括三个元素，一是背景图片，二是欢迎语，三是开始按钮。这三个元素由对应类型的节点对象来描述，SKNode是基础的节点类，包括SKSpriteNode，SKLabelNode等几种具体节点子类，由于背景和开始按钮都有图片，声明为SKSpriteNode对象，欢迎语声明为SKLabelNode对象，用于显示文字。在didMove函数中，初始化这三个Node的位置，其中背景图片大小与屏幕尺寸一致，且将背景图片的节点zPosition设为-1，置于底层。欢迎语的字体字号都可以修改，这里有一个查看iOS字体的网站 iOS Fonts，我找了心仪的漂亮字体作为欢迎语的字体。最后使用addChild函数分别将三个Node全部加入场景中，整体代码如下：

class MenuScene: SKScene {
    let startButton = SKSpriteNode.init(imageNamed: "startButton")
    let background = SKSpriteNode.init(imageNamed: "menuBackgroundImage.jpg")
    let welcomeText = SKLabelNode.init(text: "Welcome To My Game")

    override func didMove(to view: SKView) {
        startButton.position = CGPoint(x: frame.midX, y: frame.maxY / 3)
        background.zPosition = -1
        background.size = CGSize(width: size.width, height: size.height)
        background.position = CGPoint(x: size.width / 2, y: size.height / 2)
        welcomeText.fontSize = 40
        welcomeText.position = CGPoint(x: frame.midX, y: frame.maxY / 3 * 2)
        welcomeText.fontName = "Superclarendon-Bold"
        self.addChild(background)
        self.addChild(startButton)
        self.addChild(welcomeText)
    }
}

运行一下，好像没有显示出来跟上面一样的界面，因为没有添加创建场景对象的语句。需要在GameViewController.swift文件GameViewController类中，构造MenuScene的对象，然后调用presentScene显示该对象的场景。

override func viewDidLoad() {
    super.viewDidLoad()
        
    if let view = self.view as! SKView? {
        let scene = MenuScene(size: view.bounds.size)
        scene.scaleMode = .aspectFill    
            // Present the scene
        view.presentScene(scene)                      
        view.ignoresSiblingOrder = true
        view.showsDrawCount = true
        view.showsFPS = true
        view.showsNodeCount = true
    }
}

多场景切换

然后再构建一个游戏界面GameScene（略），这样才能在两个场景中切换。切换场景的动作由触摸StartGame触发，从开始界面切换到游戏界面，通过重写touchesBegan函数响应触摸动作，如果触摸位置在startButton内部，则触发切换，切换动画是原场景淡出，新场景GameScene出现，代码如下：

extension MenuScene {
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        if let touch = touches.first {
            let pos = touch.location(in: self)
            if startButton.contains(pos){
                let transition:SKTransition = SKTransition.fade(withDuration: 1)
                let scene: SKScene = GameScene(size: self.size)
                self.view?.presentScene(scene, transition: transition)
            }
        }
    }
}

当你运行程序，触摸StartGame按钮时，会看到像幻灯片切页一样进入到了你设计的游戏场景画面。