使用spritekit swift在swift中创建游戏主菜单

Question

I am new to swift, and have an SKScene in which I have created a game. I can not seem to figure out however, how to build the menu. If seen both solutions to create either another view controller or another SKScene but they were all quite confusing and complex. I am open to use either of these methods or any other, does anyone have any tricks to tackle this problem. Some code would be helpful. Thanks for the help.

Answer 1

There are many ways to obtain a menu in Sprite-Kit .

Usually people draw some SKLabelNode , or SKSpriteNode to build menu voices or make a specific SKNode that build this kind of structure.

But I want to follow a suggestion on comments about StackView . We know StackView is an UIKit element that:

Provides a streamlined interface for laying out a collection of views in either a column or a row.

So , we can build a vertical StackView that contains all the menu voices (PS the code below show a simple collection of labels, you can customize your StackView views as you wish):

import SpriteKit
import UIKit
protocol StackViewDelegate: class {
    func didTapOnView(at index: Int)
}
class GameMenuView: UIStackView {
    weak var delegate: StackViewDelegate?
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.axis = .vertical
        self.distribution = .fillEqually
        self.alignment = .fill
        self.spacing = 5
        self.isUserInteractionEnabled = true
        //set up a label
        for i in 1...5 {
            let label = UILabel()
            label.text = "Menu voice \(i)"
            label.textColor = UIColor.white
            label.backgroundColor = UIColor.blue
            label.textAlignment = .center
            label.tag = i
            self.addArrangedSubview(label)
        }
        configureTapGestures()
    }
    required init(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    private func configureTapGestures() {
        arrangedSubviews.forEach { view in
            view.isUserInteractionEnabled = true
            let tapGesture = UITapGestureRecognizer(target: self, action: #selector(didTapOnView))
            view.addGestureRecognizer(tapGesture)
        }
    }
    func didTapOnView(_ gestureRecognizer: UIGestureRecognizer) {
        if let index = arrangedSubviews.index(of: gestureRecognizer.view!) {
            delegate?.didTapOnView(at: index)
        }
    }
}
class GameScene: SKScene, StackViewDelegate {
    var gameMenuView = GameMenuView()
    private var label : SKLabelNode?
    override func didMove(to view: SKView) {
        self.label = self.childNode(withName: "//helloLabel") as? SKLabelNode
        if let label = self.label {
            label.alpha = 0.0
            label.run(SKAction.fadeIn(withDuration: 2.0))
        }
        // Menu setup with stackView
        gameMenuView.frame=CGRect(x:20,y:50,width:280,height:200)
        view.addSubview(gameMenuView)
        gameMenuView.delegate = self
    }
    func didTapOnView(at index: Int) {
        switch index {
        case 0: print("tapped voice 1")
        case 1: print("tapped voice 2")
        case 2: print("tapped voice 3")
        case 3: print("tapped voice 4")
        case 4: print("tapped voice 5")
        default:break
        }
    }
}

Output :

Answer 2

Approach:

The below mentioned code uses UIStackview to create 2 sections. You could use a similar approach.

Output:

Code:

class ViewController: UIViewController {

    private let baseSection = UIStackView()
    private let section1    = UIStackView()

    private let titleLabel  = UILabel()
    private let button1     = UIButton(type: .custom)
    private let button2     = UIButton(type: .custom)
    private let button3     = UIButton(type: .custom)


    //MARK: Load view
    override func viewDidLoad() {
        super.viewDidLoad()

        setupViews()
    }


    //MARK: Setup views
    private func setupViews() {

        setupBaseSection()
        setupTitleLabel()
        setupButton1()
        setupSection1()
        setupButton2()
        setupButton3()
    }

    private func setupTitleLabel() {

        titleLabel.text      = "Swirl"
        titleLabel.font      = UIFont.preferredFont(forTextStyle: .headline)
        titleLabel.textColor = #colorLiteral(red: 0.8156862745, green: 0.9137254902, blue: 0.1647058824, alpha: 1)

        baseSection.addArrangedSubview(titleLabel)
    }

    private func setupButton1() {

        button1.backgroundColor = #colorLiteral(red: 0.9098039216, green: 0.168627451, blue: 0.3921568627, alpha: 1)

        baseSection.addArrangedSubview(button1)

        button1.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.2).isActive = true
        button1.heightAnchor.constraint(equalToConstant: 50).isActive = true
    }

    private func setupButton2() {

        button2.backgroundColor = #colorLiteral(red: 0.8156862745, green: 0.9137254902, blue: 0.1647058824, alpha: 1)

        section1.addArrangedSubview(button2)

        button2.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.1).isActive = true
        button2.heightAnchor.constraint(equalToConstant: 50).isActive = true
    }

    private func setupButton3() {

        button3.backgroundColor = #colorLiteral(red: 0.8156862745, green: 0.9137254902, blue: 0.1647058824, alpha: 1)

        section1.addArrangedSubview(button3)

        button3.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.2).isActive = true
        button3.heightAnchor.constraint(equalToConstant: 50).isActive = true
    }

    //MARKL Set up stack views

    private func setupBaseSection() {

        baseSection.axis          = .vertical
        baseSection.distribution  = .fill
        baseSection.alignment     = .center
        baseSection.spacing       = 10


        baseSection.translatesAutoresizingMaskIntoConstraints = false

        view.addSubview(baseSection)

        baseSection.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
        baseSection.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
        baseSection.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
    }

    private func setupSection1() {

        section1.axis         = .horizontal
        section1.distribution = .equalSpacing
        section1.alignment    = .fill
        section1.spacing      = 20

        baseSection.addArrangedSubview(section1)
    }
}

Answer 3

I experienced adding UIButtons and UILabels to a SpriteKit Scene can get very technical with the problem of positioning them. Due to the fact that the UI Objects are positioned on the view and not on the SpriteKit Scene directly. You can use a SKSpriteNode as a Button and the SKLabelNode as a Title, For a menu scene.

A Sprite kit scene is placed on the UIView and is scaled depending on the scale mode you define. Apples default scale mode .aspectFill requires no adjustment to Sprite kit objects positioning on different Phone device screen sizes.

This is a Custom Class of a SKSpriteNode with the same functionality as a button.

 import Foundation
 import SpriteKit

 class ButtonLabelNode : SKSpriteNode {

let buttonPressed: () -> ()

init(texture: SKTexture?, color: UIColor, size: CGSize, text: String, buttonPressed: @escaping () -> ()) {

    self.buttonPressed = buttonPressed

    super.init(texture: texture, color: color, size: size)

    let label = SKLabelNode(fontNamed: "Futura")
    label.fontSize = 50
    label.fontColor = SKColor.red
    label.position = CGPoint.init(x: 0.0, y: 0.0)
    label.zPosition = 1
    label.verticalAlignmentMode = .center
    label.text = text
    self.addChild(label)

    self.isUserInteractionEnabled = true

}

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {

    self.alpha = 0.8

}

override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {

    self.alpha = 1.0

  buttonPressed()
}

required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

 }

When a touch begins on the SpriteNode the alpha decreases to 0.8 and back to 1.0 as the touch ends, Giving it the same visual affect of a UIButton. In the overridden function 'touchesEnded' there is a function that will be called every time the button is pressed, that function is added in the initializer and can be initialized in your game scene.

override func didMove(to view: SKView) {

    let labelNode = LabelNode(texture: nil, color: .white, size: CGSize.init(width: 200, height: 100), text: "Play", buttonPressed: playButton)
    labelNode.position = CGPoint(x: self.frame.midX, y: self.frame.midY)

    self.addChild(labelNode)

    }

    func playButton() 
    {
    print("play")
     }

You can make as many instances of this class as you like, giving them their own functionality as the added initialised function is unique to its own instance. Unlike having a required protocol method for the class as that will affect all instances of the class.