周一. 12月 4th, 2023

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

创建一个页面

在介绍多页面切换之前,首先介绍如何构建一个页面,在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按钮时,会看到像幻灯片切页一样进入到了你设计的游戏场景画面。

   
 摸鱼堡版权所有丨如未注明,均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明转自:http://moyubao.net/coder/436/

发表评论

邮箱地址不会被公开。