Menu system for Games in SpriteKit - swift

Question

I've looked at a few different post surrounding menu systems in SpriteKit and nothing really focusses on how to implement from start to finish (a basic play button starting the game, background and then sharing icons).
The reason I am looking is that I am a beginner and in the process of building my first basic game. I have used a few of these guides and none seem to give a proper walk through.
Thought it would be good to create a post for all beginners to start out. I have attempted some actual code but it hasn't been successful (quite a few errors though I can post if anyone is interested in seeing what NOT to do).
Anyway, here goes nothing😊 Thanks in advance all, lets see how we can get it done!

Answer 1

well, i believe this is a good question and setting up something as an answer here is not a bad idea. i've setup a starting menu with a title and three buttons in this very simple menu. that can be modified to the desired result later. first of all create a new file for starting menu by adding the file through project pane on the left. then create a spritekitScene also with the same name (startMenu or whatever you want to name it) then do the same for the settings and also credits or any other item you want to add to the start menu.
the next step is the change the entry point of the game from game scene to start menu in view controller swift. change the game scene to whatever you named your menu in this line if let scene = GameScene(fileNamed:"GameScene") to if let scene = StartMenu(fileNamed:"StartMenu") that will push the start menu rather than the game scene. go the start menu and add the following codes for creating a title and buttons to the view. i created the buttons and the text and added separate functions for each for the ease of following up, and then at the end you add the functions for the selector so when the buttons are pressed the new scene gets pushed. you can also add a return button to those scenes or do whatever else you want. so here is the complete start menu code:
import Foundation
import SpriteKit
class StartMenu : SKScene {
var btnPlay : UIButton!
var btnSettings : UIButton!
var btnCredits : UIButton!
var gameTitle : UILabel!
override func didMoveToView(view: SKView) {
// self.backgroundColor = UIColor.orangeColor()
setUpTitleText()
setupButtonPlay()
setupButtonSettings()
setupButtonCredits()
}
func setUpTitleText(){
gameTitle = UILabel(frame: CGRect(x: 0, y: 0, width: view!.frame.width, height: 300))
gameTitle.textColor = UIColor.blackColor()
gameTitle.font = UIFont(name: "Futura", size: 50)
gameTitle.textAlignment = NSTextAlignment.Center
gameTitle.text = "Game Title"
//gameTitle.backgroundColor = UIColor.whiteColor()
self.view?.addSubview(gameTitle)
}
func setupButtonPlay(){
btnPlay = UIButton(frame: CGRect(x: 100, y: 100, width: 200, height: 100))
btnPlay.center = CGPoint(x: view!.frame.size.width / 2, y: 250)
btnPlay.titleLabel?.font = UIFont(name: "Futura", size: 25)
btnPlay.setTitle("Play", forState: UIControlState.Normal)
btnPlay.setTitleColor(UIColor.blueColor(), forState: UIControlState.Normal)
//btnPlay.backgroundColor = UIColor.grayColor()
btnPlay.addTarget(self, action: #selector(StartMenu.playTheGame), forControlEvents: UIControlEvents.TouchUpInside)
self.view?.addSubview(btnPlay)
}
func setupButtonSettings(){
btnSettings = UIButton(frame: CGRect(x: 100, y: 100, width: 200, height: 100))
btnSettings.center = CGPoint(x: view!.frame.size.width / 2, y: 350)
btnSettings.titleLabel?.font = UIFont(name: "Futura", size: 25)
btnSettings.setTitle("Settings", forState: UIControlState.Normal)
btnSettings.setTitleColor(UIColor.blueColor(), forState: UIControlState.Normal)
//btnSettings.backgroundColor = UIColor.grayColor()
btnSettings.addTarget(self, action: #selector(StartMenu.pressTheSettings), forControlEvents: UIControlEvents.TouchUpInside)
self.view?.addSubview(btnSettings)
}
func setupButtonCredits(){
btnCredits = UIButton(frame: CGRect(x: 100, y: 100, width: 200, height: 100))
btnCredits.center = CGPoint(x: view!.frame.size.width / 2, y: 450)
btnCredits.titleLabel?.font = UIFont(name: "Futura", size: 25)
btnCredits.setTitle("Credits", forState: UIControlState.Normal)
btnCredits.setTitleColor(UIColor.blueColor(), forState: UIControlState.Normal)
//btnCredits.backgroundColor = UIColor.grayColor()
btnCredits.addTarget(self, action: #selector(StartMenu.pressTheCredits), forControlEvents: UIControlEvents.TouchUpInside)
self.view?.addSubview(btnCredits)
}
func playTheGame(){
self.view?.presentScene(GameScene(), transition: SKTransition.crossFadeWithDuration(1.0))
btnPlay.removeFromSuperview()
gameTitle.removeFromSuperview()
btnCredits.removeFromSuperview()
btnSettings.removeFromSuperview()
if let scene = GameScene(fileNamed: "GameScene"){
let skView = self.view! as SKView
skView.ignoresSiblingOrder = true
scene.scaleMode = .AspectFill
skView.presentScene(scene)
}
}
func pressTheSettings(){
self.view?.presentScene(TheSettings(), transition: SKTransition.crossFadeWithDuration(1.0))
btnPlay.removeFromSuperview()
gameTitle.removeFromSuperview()
btnCredits.removeFromSuperview()
btnSettings.removeFromSuperview()
if let scene = TheSettings(fileNamed: "TheSettings"){
let skView = self.view! as SKView
skView.ignoresSiblingOrder = true
scene.scaleMode = .AspectFill
skView.presentScene(scene)
}
}
func pressTheCredits(){
self.view?.presentScene(TheCredits(), transition: SKTransition.crossFadeWithDuration(1.0))
btnPlay.removeFromSuperview()
gameTitle.removeFromSuperview()
btnCredits.removeFromSuperview()
btnSettings.removeFromSuperview()
if let scene = TheCredits(fileNamed: "TheCredits"){
let skView = self.view! as SKView
skView.ignoresSiblingOrder = true
scene.scaleMode = .AspectFill
skView.presentScene(scene)
}
}
}
in this scenario i have hard coded the titles and the buttons, but you can add your own images if you want. this is just a simple way of creating a menu but there are many other ways to do this. as you go along you can build your own in anyway you like.
good luck.