How to create a subview inside an SKScene? - sprite-kit

Question

Before "Buy Ship" is pressed So I am trying to create a shop where players can buy new ships. When the player hits the "buy button" image I want a combination of images and texts to become visible which acts as a sort of conformation screen. Hopefully you can see here what I mean. I would also greatly appreciate if you could tell me how to dim everything besides the conformation box. After "Buy Ship" is pressed.
This is what my code looks like so far:
import Foundation
import SpriteKit
class ShopPage1: SKScene{
override func didMove(to view: SKView) {
let background = SKSpriteNode(imageNamed: "background")
background.position = CGPoint(x: self.size.width/2, y: self.size.height/2)
background.zPosition = 0
self.addChild(background)
let balance = SKLabelNode(fontNamed: "The Bold Font")
balance.text = "$\(balanceAmount)"
balance.fontSize = 100
balance.fontColor = SKColor.green
balance.position = CGPoint(x: self.size.width/2, y: self.size.height*0.87)
balance.zPosition = 1
self.addChild(balance)
let backToMainMenuButton = SKSpriteNode(imageNamed: "backButton2")
backToMainMenuButton.position = CGPoint(x: self.size.width*0.25, y: self.size.height*0.89)
backToMainMenuButton.zPosition = 1
backToMainMenuButton.size = CGSize(width: 200, height: 200)
backToMainMenuButton.name = "backToMainMenuButton"
self.addChild(backToMainMenuButton)
let shipNameLabel = SKLabelNode(fontNamed: "The Bold Font")
shipNameLabel.text = "Stealth"
shipNameLabel.fontSize = 200
shipNameLabel.fontColor = SKColor.white
shipNameLabel.position = CGPoint(x: self.size.width/2, y: self.size.height*0.60)
shipNameLabel.zPosition = 1
shipNameLabel.name = "shipNameLabel"
self.addChild(shipNameLabel)
let nextShipButton = SKSpriteNode(imageNamed: "nextShipButton1")
nextShipButton.position = CGPoint(x: self.size.width*0.75, y: self.size.height*0.40)
nextShipButton.zPosition = 1
nextShipButton.size = CGSize(width: 300, height: 300)
nextShipButton.name = "nextShipButton"
self.addChild(nextShipButton)
let nextShipClick = SKLabelNode(fontNamed: "The Bold Font")
nextShipClick.text = "▲"
nextShipClick.fontSize = 300
nextShipClick.fontColor = UIColor.clear
nextShipClick.position = CGPoint(x: self.size.width*0.753, y: self.size.height*0.36)
nextShipClick.zPosition = 2
nextShipClick.name = "nextShipClick"
self.addChild(nextShipClick)
let shipForSale = SKSpriteNode(imageNamed: "playerShip4")
shipForSale.position = CGPoint(x: self.size.width/2, y: self.size.height*0.40)
shipForSale.zPosition = 1
shipForSale.size = CGSize(width: 150, height: 300)
self.addChild(shipForSale)
let shipPodium = SKSpriteNode(imageNamed: "shipPodium")
shipPodium.position = CGPoint(x: self.size.width*0.527, y: self.size.height*0.31)
shipPodium.zPosition = 1
shipPodium.size = CGSize(width: 1200, height: 70)
self.addChild(shipPodium)
let shipsCostLabel = SKLabelNode(fontNamed: "The Bold Font")
shipsCostLabel.text = "$500"
shipsCostLabel.fontSize = 200
shipsCostLabel.fontColor = SKColor.white
shipsCostLabel.position = CGPoint(x: self.size.width/2, y: self.size.height*0.20)
shipsCostLabel.zPosition = 1
self.addChild(shipsCostLabel)
let shipBuyButton = SKSpriteNode(imageNamed: "shipBuyButton")
shipBuyButton.position = CGPoint(x: self.size.width*0.54, y: self.size.height*0.15)
shipBuyButton.zPosition = 1
shipBuyButton.size = CGSize(width: 1500, height: 900)
shipBuyButton.name = "shipBuyButton"
self.addChild(shipBuyButton)
let conformationBackground = SKSpriteNode(imageNamed: "conformationBackground")
conformationBackground.position = CGPoint(x: self.size.width*0.51, y: self.size.height*0.40)
conformationBackground.zPosition = 2
conformationBackground.size = CGSize(width: 1300, height: 1400)
conformationBackground.name = "conformationBackground"
self.addChild(conformationBackground)
let conformationScreenTextTop = SKLabelNode(fontNamed: "The Bold Font")
conformationScreenTextTop.text = "Are you sure you wish to"
conformationScreenTextTop.fontSize = 80
conformationScreenTextTop.fontColor = SKColor.white
conformationScreenTextTop.position = CGPoint(x: self.size.width/2, y: self.size.height*0.46)
conformationScreenTextTop.zPosition = 3
self.addChild(conformationScreenTextTop)
let conformationScreenTextBottom = SKLabelNode(fontNamed: "The Bold Font")
conformationScreenTextBottom.text = "pruchase this ship?"
conformationScreenTextBottom.fontSize = 80
conformationScreenTextBottom.fontColor = SKColor.white
conformationScreenTextBottom.position = CGPoint(x: self.size.width/2, y: self.size.height*0.41)
conformationScreenTextBottom.zPosition = 3
self.addChild(conformationScreenTextBottom)
let conformationScreenTextYes = SKLabelNode(fontNamed: "The Bold Font")
conformationScreenTextYes.text = "Yes"
conformationScreenTextYes.fontSize = 150
conformationScreenTextYes.fontColor = SKColor.green
conformationScreenTextYes.position = CGPoint(x: self.size.width*0.30, y: self.size.height*0.30)
conformationScreenTextYes.zPosition = 3
self.addChild(conformationScreenTextYes)
let conformationScreenTextNo = SKLabelNode(fontNamed: "The Bold Font")
conformationScreenTextNo.text = "No"
conformationScreenTextNo.fontSize = 150
conformationScreenTextNo.fontColor = SKColor.red
conformationScreenTextNo.position = CGPoint(x: self.size.width*0.70, y: self.size.height*0.30)
conformationScreenTextNo.zPosition = 3
self.addChild(conformationScreenTextNo)
}
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
for touch: AnyObject in touches{
let pointOfTouch = touch.location(in: self)
let tappedNode = atPoint(pointOfTouch)
let tappedNodeName = tappedNode.name
if tappedNodeName == "nextShipClick"{
let sceneToMoveTo = ShopPage2(size: self.size)
sceneToMoveTo.scaleMode = self.scaleMode
let myTransition = SKTransition.fade(withDuration: 0.5)
self.view!.presentScene(sceneToMoveTo, transition: myTransition)
}
if tappedNodeName == "backToMainMenuButton"{
let sceneToMoveTo = MainMenuScene(size: self.size)
sceneToMoveTo.scaleMode = self.scaleMode
let myTransition = SKTransition.fade(withDuration: 0.5)
self.view!.presentScene(sceneToMoveTo, transition: myTransition)
}
}
}
}

Answer 1

As Whirlwind said in his comment you can create an SKNode to the center of your scene (position CGPoint.zero) prepare it with all your stuff and hide it with the alpha properties set to 0 and put it's zPosition to -1 (under all the other visible nodes of your scene).
So when you button will be pressed, you simply change the zPosition to an highest value and the alpha to 1. To make more realistic these action s you could use some animations like:
extension UIView {
func fadeIn(_ duration:TimeInterval=1.0) {
UIView.animate(withDuration: duration, delay: 0.0, options: UIViewAnimationOptions.curveEaseIn, animations: {
self.alpha = 1.0 // Instead of a specific instance of, say, birdTypeLabel, we simply set [thisInstance] (ie, self)'s alpha
}, completion: nil)
}
func fadeOut(_ duration:TimeInterval=1.0) {
UIView.animate(withDuration: duration, delay: 0.0, options: UIViewAnimationOptions.curveEaseOut, animations: {
self.alpha = 0.0
}, completion: nil)
}
}

Answer 2

I have figured out how to get the conformation screen to work. Thanks to #AlessandroOrnano for all the help! I have attached my code below for future reference. If anyone has a more efficient way of doing this I would greatly appreciate any suggestions.
import Foundation
import SpriteKit
class ShopPage1: SKScene{
override func didMove(to view: SKView) {
let background = SKSpriteNode(imageNamed: "background")
background.position = CGPoint(x: self.size.width/2, y: self.size.height/2)
background.zPosition = 0
self.addChild(background)
let balance = SKLabelNode(fontNamed: "The Bold Font")
balance.text = "$\(balanceAmount)"
balance.fontSize = 100
balance.fontColor = SKColor.green
balance.position = CGPoint(x: self.size.width/2, y: self.size.height*0.87)
balance.zPosition = 1
self.addChild(balance)
let backToMainMenuButton = SKSpriteNode(imageNamed: "backButton2")
backToMainMenuButton.position = CGPoint(x: self.size.width*0.25, y: self.size.height*0.89)
backToMainMenuButton.zPosition = 1
backToMainMenuButton.size = CGSize(width: 200, height: 200)
backToMainMenuButton.name = "backToMainMenuButton"
self.addChild(backToMainMenuButton)
let shipNameLabel = SKLabelNode(fontNamed: "The Bold Font")
shipNameLabel.text = "Stealth"
shipNameLabel.fontSize = 200
shipNameLabel.fontColor = SKColor.white
shipNameLabel.position = CGPoint(x: self.size.width/2, y: self.size.height*0.60)
shipNameLabel.zPosition = 1
shipNameLabel.name = "shipNameLabel"
self.addChild(shipNameLabel)
let nextShipButton = SKSpriteNode(imageNamed: "nextShipButton1")
nextShipButton.position = CGPoint(x: self.size.width*0.75, y: self.size.height*0.40)
nextShipButton.zPosition = 1
nextShipButton.size = CGSize(width: 300, height: 300)
nextShipButton.name = "nextShipButton"
self.addChild(nextShipButton)
let nextShipClick = SKLabelNode(fontNamed: "The Bold Font")
nextShipClick.text = "▲"
nextShipClick.fontSize = 300
nextShipClick.fontColor = UIColor.clear
nextShipClick.position = CGPoint(x: self.size.width*0.753, y: self.size.height*0.36)
nextShipClick.zPosition = 2
nextShipClick.name = "nextShipClick"
self.addChild(nextShipClick)
let shipForSale = SKSpriteNode(imageNamed: "playerShip4")
shipForSale.position = CGPoint(x: self.size.width/2, y: self.size.height*0.40)
shipForSale.zPosition = 1
shipForSale.size = CGSize(width: 150, height: 300)
self.addChild(shipForSale)
let shipPodium = SKSpriteNode(imageNamed: "shipPodium")
shipPodium.position = CGPoint(x: self.size.width*0.527, y: self.size.height*0.31)
shipPodium.zPosition = 1
shipPodium.size = CGSize(width: 1200, height: 70)
self.addChild(shipPodium)
let shipsCostLabel = SKLabelNode(fontNamed: "The Bold Font")
shipsCostLabel.text = "$500"
shipsCostLabel.fontSize = 200
shipsCostLabel.fontColor = SKColor.white
shipsCostLabel.position = CGPoint(x: self.size.width/2, y: self.size.height*0.20)
shipsCostLabel.zPosition = 1
self.addChild(shipsCostLabel)
let shipBuyButton = SKSpriteNode(imageNamed: "shipBuyButton")
shipBuyButton.position = CGPoint(x: self.size.width*0.54, y: self.size.height*0.15)
shipBuyButton.zPosition = 1
shipBuyButton.size = CGSize(width: 1500, height: 900)
shipBuyButton.name = "shipBuyButton"
self.addChild(shipBuyButton)
let shipBuyButtonClick = SKLabelNode(fontNamed: "The Bold Font")
shipBuyButtonClick.text = "▅▅"
shipBuyButtonClick.fontSize = 300
shipBuyButtonClick.fontColor = UIColor.clear
shipBuyButtonClick.position = CGPoint(x: self.size.width/2, y: self.size.height*0.05)
shipBuyButtonClick.zPosition = 2
shipBuyButtonClick.name = "shipBuyButtonClick"
self.addChild(shipBuyButtonClick)
}
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
for touch: AnyObject in touches{
let pointOfTouch = touch.location(in: self)
let tappedNode = atPoint(pointOfTouch)
let tappedNodeName = tappedNode.name
if tappedNodeName == "nextShipClick"{
let sceneToMoveTo = ShopPage2(size: self.size)
sceneToMoveTo.scaleMode = self.scaleMode
let myTransition = SKTransition.fade(withDuration: 0.5)
self.view!.presentScene(sceneToMoveTo, transition: myTransition)
}
if tappedNodeName == "backToMainMenuButton"{
let sceneToMoveTo = MainMenuScene(size: self.size)
sceneToMoveTo.scaleMode = self.scaleMode
let myTransition = SKTransition.fade(withDuration: 0.5)
self.view!.presentScene(sceneToMoveTo, transition: myTransition)
}
if tappedNodeName == "shipBuyButtonClick"{
let sceneToMoveTo = ShopPage1ConformationScreen(size: self.size)
sceneToMoveTo.scaleMode = self.scaleMode
let myTransition = SKTransition.fade(withDuration: 0.5)
self.view!.presentScene(sceneToMoveTo, transition: myTransition)
}
}
}
}
This is the code for ShopPage1ConformationScreen:
import Foundation
import SpriteKit
let shipForSale = SKSpriteNode(imageNamed: "playerShip4")
class ShopPage1ConformationScreen: SKScene{
override func didMove(to view: SKView) {
let background = SKSpriteNode(imageNamed: "background")
background.position = CGPoint(x: self.size.width/2, y: self.size.height/2)
background.zPosition = 0
self.addChild(background)
let balance = SKLabelNode(fontNamed: "The Bold Font")
balance.text = "$\(balanceAmount)"
balance.fontSize = 100
balance.fontColor = SKColor.green
balance.position = CGPoint(x: self.size.width/2, y: self.size.height*0.87)
balance.zPosition = 1
self.addChild(balance)
let backToMainMenuButton = SKSpriteNode(imageNamed: "backButton2")
backToMainMenuButton.position = CGPoint(x: self.size.width*0.25, y: self.size.height*0.89)
backToMainMenuButton.zPosition = 1
backToMainMenuButton.size = CGSize(width: 200, height: 200)
backToMainMenuButton.name = "backToMainMenuButton"
self.addChild(backToMainMenuButton)
let shipNameLabel = SKLabelNode(fontNamed: "The Bold Font")
shipNameLabel.text = "Stealth"
shipNameLabel.fontSize = 200
shipNameLabel.fontColor = SKColor.white
shipNameLabel.position = CGPoint(x: self.size.width/2, y: self.size.height*0.60)
shipNameLabel.zPosition = 1
shipNameLabel.name = "shipNameLabel"
self.addChild(shipNameLabel)
let nextShipButton = SKSpriteNode(imageNamed: "nextShipButton1")
nextShipButton.position = CGPoint(x: self.size.width*0.75, y: self.size.height*0.40)
nextShipButton.zPosition = 1
nextShipButton.size = CGSize(width: 300, height: 300)
nextShipButton.name = "nextShipButton"
self.addChild(nextShipButton)
let nextShipClick = SKLabelNode(fontNamed: "The Bold Font")
nextShipClick.text = "▲"
nextShipClick.fontSize = 300
nextShipClick.fontColor = UIColor.clear
nextShipClick.position = CGPoint(x: self.size.width*0.753, y: self.size.height*0.36)
nextShipClick.zPosition = 2
nextShipClick.name = "nextShipClick"
self.addChild(nextShipClick)
shipForSale.position = CGPoint(x: self.size.width/2, y: self.size.height*0.40)
shipForSale.zPosition = 1
shipForSale.size = CGSize(width: 150, height: 300)
self.addChild(shipForSale)
let shipPodium = SKSpriteNode(imageNamed: "shipPodium")
shipPodium.position = CGPoint(x: self.size.width*0.527, y: self.size.height*0.31)
shipPodium.zPosition = 1
shipPodium.size = CGSize(width: 1200, height: 70)
self.addChild(shipPodium)
let shipsCostLabel = SKLabelNode(fontNamed: "The Bold Font")
shipsCostLabel.text = "$500"
shipsCostLabel.fontSize = 200
shipsCostLabel.fontColor = SKColor.white
shipsCostLabel.position = CGPoint(x: self.size.width/2, y: self.size.height*0.20)
shipsCostLabel.zPosition = 1
self.addChild(shipsCostLabel)
let shipBuyButton = SKSpriteNode(imageNamed: "shipBuyButton")
shipBuyButton.position = CGPoint(x: self.size.width*0.54, y: self.size.height*0.15)
shipBuyButton.zPosition = 1
shipBuyButton.size = CGSize(width: 1500, height: 900)
shipBuyButton.name = "shipBuyButton"
self.addChild(shipBuyButton)
let conformationBackground = SKSpriteNode(imageNamed: "conformationBackground")
conformationBackground.position = CGPoint(x: self.size.width*0.51, y: self.size.height*0.40)
conformationBackground.zPosition = 2
conformationBackground.size = CGSize(width: 1300, height: 1400)
conformationBackground.name = "conformationBackground"
self.addChild(conformationBackground)
let conformationScreenTextTop = SKLabelNode(fontNamed: "The Bold Font")
conformationScreenTextTop.text = "Are you sure you wish to"
conformationScreenTextTop.fontSize = 80
conformationScreenTextTop.fontColor = SKColor.white
conformationScreenTextTop.position = CGPoint(x: self.size.width/2, y: self.size.height*0.46)
conformationScreenTextTop.zPosition = 3
conformationScreenTextTop.name = "comformationScreenTextTop"
self.addChild(conformationScreenTextTop)
let conformationScreenTextBottom = SKLabelNode(fontNamed: "The Bold Font")
conformationScreenTextBottom.text = "purchase this ship?"
conformationScreenTextBottom.fontSize = 80
conformationScreenTextBottom.fontColor = SKColor.white
conformationScreenTextBottom.position = CGPoint(x: self.size.width/2, y: self.size.height*0.41)
conformationScreenTextBottom.zPosition = 3
conformationScreenTextBottom.name = "conformationScreenTextBottom"
self.addChild(conformationScreenTextBottom)
let conformationScreenTextYes = SKLabelNode(fontNamed: "The Bold Font")
conformationScreenTextYes.text = "Yes"
conformationScreenTextYes.fontSize = 150
conformationScreenTextYes.fontColor = SKColor.green
conformationScreenTextYes.position = CGPoint(x: self.size.width*0.30, y: self.size.height*0.30)
conformationScreenTextYes.zPosition = 3
conformationScreenTextYes.name = "conformationScreenTextYes"
self.addChild(conformationScreenTextYes)
let conformationScreenTextNo = SKLabelNode(fontNamed: "The Bold Font")
conformationScreenTextNo.text = "No"
conformationScreenTextNo.fontSize = 150
conformationScreenTextNo.fontColor = SKColor.red
conformationScreenTextNo.position = CGPoint(x: self.size.width*0.70, y: self.size.height*0.30)
conformationScreenTextNo.zPosition = 3
conformationScreenTextNo.name = "conformationScreenTextNo"
self.addChild(conformationScreenTextNo)
}
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
for touch: AnyObject in touches{
let pointOfTouch = touch.location(in: self)
let tappedNode = atPoint(pointOfTouch)
let tappedNodeName = tappedNode.name
if(balanceAmount >= 500){
if tappedNodeName == "conformationScreenTextYes"{
player = shipForSale
balanceAmount -= 500
let sceneToMoveTo = ShopPage1(size: self.size)
sceneToMoveTo.scaleMode = self.scaleMode
let myTransition = SKTransition.fade(withDuration: 0.5)
self.view!.presentScene(sceneToMoveTo, transition: myTransition)
}
}
if tappedNodeName == "conformationScreenTextNo"{
let sceneToMoveTo = ShopPage1(size: self.size)
sceneToMoveTo.scaleMode = self.scaleMode
let myTransition = SKTransition.fade(withDuration: 0.5)
self.view!.presentScene(sceneToMoveTo, transition: myTransition)
}
}
}
}
For additional shop pages just copy and paste these sets of codes. With the exception of changing the the tapped nodes around to the correct order in which you wish to move from page to page.