为 SKSprite 游戏创建登录页面
Posted
技术标签:
【中文标题】为 SKSprite 游戏创建登录页面【英文标题】：Create a Login Page for SKSprite Game 【发布时间】：2017-04-29 12:06:58 【问题描述】：我正在使用许多 SKScene 和 Sprite 对象在 xcode 中创建游戏 (Swift)。我想创建一个捕捉玩家姓名、电子邮件、性别等的场景（设置场景）。我该怎么做？如何捕获用户的输入。 SKScenes 不允许在 UI 中输入字段/值？
谢谢
【问题讨论】：
您可以制作一个单独的 UIViewcontroller（所以没有 SKScene），将输入字段放入其中，然后只需对其进行自定义，使其看起来相同。 这可能是我第一次投票支持将 UIKit 元素与 SpriteKit 游戏混合 :) 好吧，它甚至不是真正的混合，因为它将是单独的 VC，这就是我为什么支持这个想法。当然，您可以在 SpriteKit 中创建自己的文本字段，但我想那将是重新发明***。 感谢您的回复。我怀疑这可能是实现（或最简单）的唯一方法。但是如何从 SKScene 中转换到 UIView？ 【参考方案1】：您可以构建与您的游戏布局一致的自定义登录页面，而无需尝试在 UIKit 中重建相同的图形资源。
几天前，我写了一个关于SKSceneDelegate 的answer，用于在场景（SpriteKit）和视图控制器（UIKit）之间进行通信，请看这个如果您想调用其他视图控制器，请回答，因为它与此答案的概念相同..
从GameViewController 开始，我们可以开发一些有用的方法来处理登录表单按钮并显示一些警报：
import UIKit
import SpriteKit
class GameViewController: UIViewController, TransitionDelegate
override func viewDidLoad()
super.viewDidLoad()
guard let view = self.view as! SKView? else return
view.ignoresSiblingOrder = true
view.showsFPS = true
view.showsNodeCount = true
let scene = GameScene(size:view.bounds.size)
scene.scaleMode = .fill
scene.delegate = self as TransitionDelegate
scene.anchorPoint = CGPoint.zero
view.presentScene(scene)
func showAlert(title:String,message:String)
let alertController = UIAlertController(title: title, message: message, preferredStyle: .alert)
alertController.addAction(UIAlertAction(title: "Ok", style: .default) action in
print("handle Ok action...")
)
alertController.addAction(UIAlertAction(title: "Cancel", style: UIAlertActionStyle.cancel, handler: nil))
self.present(alertController, animated: true)
func handleLoginBtn(username:String,password:String)
print("handleLoginBtn")
print("username is: \(username) and password: \(password)")
func handleFacebookBtn()
print("handleFacebookBtn")
func handleTwitterBtn()
print("handleTwitterBtn")
然后我们可以让我们的场景尝试利用 SpriteKit 元素：
import SpriteKit
import UIKit
protocol TransitionDelegate: SKSceneDelegate
func showAlert(title:String,message:String)
func handleLoginBtn(username:String,password:String)
func handleFacebookBtn()
func handleTwitterBtn()
class GameScene: SKScene,UITextFieldDelegate
var usernameTextField:UITextField!
var passwordTextField:UITextField!
var loginBtn:SKShapeNode!
var facebookBtn:SKShapeNode!
var twitterBtn:SKShapeNode!
override func didMove(to view: SKView)
//bg
let bg = SKSpriteNode(imageNamed: "appleWallpaper")
addChild(bg)
bg.position = CGPoint(x:self.size.width/2,y:self.size.height/2)
//title
let title = SKLabelNode.init(fontNamed: "AppleSDGothicNeo-Bold")
title.text = "xyzGame"; title.fontSize = 25
title.fontColor = .orange
addChild(title)
title.zPosition = 1
title.position = CGPoint(x:self.size.width/2,y:self.size.height-80)
//textfields
guard let view = self.view else return
let originX = (view.frame.size.width - view.frame.size.width/1.5)/2
usernameTextField = UITextField(frame: CGRect.init(x: originX, y: view.frame.size.height/4.5, width: view.frame.size.width/1.5, height: 30))
customize(textField: usernameTextField, placeholder: "Enter your username")
view.addSubview(usernameTextField)
usernameTextField.addTarget(self, action:#selector(GameScene.textFieldDidChange(textField:)), for: UIControlEvents.editingChanged)
passwordTextField = UITextField(frame: CGRect.init(x: originX, y: view.frame.size.height/4.5+60, width: view.frame.size.width/1.5, height: 30))
customize(textField: passwordTextField, placeholder: "Enter your password", isSecureTextEntry:true)
view.addSubview(passwordTextField)
//buttons
let myBlue = SKColor(colorLiteralRed: 59/255, green: 89/255, blue: 153/255, alpha: 1)
loginBtn = getButton(frame: CGRect(x:self.size.width/4,y:self.size.height/2,width:self.size.width/2,height:30),fillColor:myBlue,title:"Login",logo:nil,name:"loginBtn")
addChild(loginBtn)
loginBtn.zPosition = 1
let label = SKLabelNode.init(fontNamed: "AppleSDGothicNeo-Regular")
label.text = "or connect with"; label.fontSize = 15
label.fontColor = .gray
addChild(label)
label.zPosition = 1
label.position = CGPoint(x:self.size.width/2,y:self.size.height/2-30)
let logoFb = SKSpriteNode.init(imageNamed: "facebook-icon")
logoFb.setScale(0.5)
facebookBtn = getButton(frame: CGRect(x:self.size.width/4,y:self.size.height/2-80,width:self.size.width/4.5,height:30),fillColor:myBlue,logo:logoFb,name:"facebookBtn")
addChild(facebookBtn)
facebookBtn.zPosition = 1
let myCyan = SKColor(colorLiteralRed: 85/255, green: 172/255, blue: 239/255, alpha: 1)
let logoTw = SKSpriteNode.init(imageNamed: "twitter-icon")
logoTw.setScale(0.5)
twitterBtn = getButton(frame: CGRect(x:self.size.width/2,y:self.size.height/2-80,width:self.size.width/4.5,height:30),fillColor:myCyan,logo:logoTw,name:"twitterBtn")
addChild(twitterBtn)
twitterBtn.zPosition = 1
func customize(textField:UITextField, placeholder:String , isSecureTextEntry:Bool = false)
let paddingView = UIView(frame:CGRect(x:0,y: 0,width: 10,height: 30))
textField.leftView = paddingView
textField.keyboardType = UIKeyboardType.emailAddress
textField.leftViewMode = UITextFieldViewMode.always
textField.attributedPlaceholder = NSAttributedString(string: placeholder,attributes: [NSForegroundColorAttributeName: UIColor.gray])
textField.autocapitalizationType = .none
textField.autocorrectionType = .no
textField.layer.borderColor = UIColor.gray.cgColor
textField.layer.borderWidth = 0.5
textField.layer.cornerRadius = 4.0
textField.textColor = .white
textField.isSecureTextEntry = isSecureTextEntry
textField.delegate = self
func getButton(frame:CGRect,fillColor:SKColor,title:String = "",logo:SKSpriteNode!,name:String)->SKShapeNode
let btn = SKShapeNode(rect: frame, cornerRadius: 10)
btn.fillColor = fillColor
btn.strokeColor = fillColor
if let l = logo
btn.addChild(l)
l.zPosition = 2
l.position = CGPoint(x:frame.origin.x+(frame.size.width/2),y:frame.origin.y+(frame.size.height/2))
l.name = name
if !title.isEmpty
let label = SKLabelNode.init(fontNamed: "AppleSDGothicNeo-Regular")
label.text = title; label.fontSize = 15
label.fontColor = .white
btn.addChild(label)
label.zPosition = 3
label.position = CGPoint(x:frame.origin.x+(frame.size.width/2),y:frame.origin.y+(frame.size.height/4))
label.name = name
btn.name = name
return btn
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?)
let touch = touches.first
let positionInScene = touch!.location(in: self)
let touchedNode = self.atPoint(positionInScene)
if let name = touchedNode.name
switch name
case "loginBtn":
self.run(SKAction.wait(forDuration: 0.1),completion:[unowned self] in
guard let delegate = self.delegate else return
(delegate as! TransitionDelegate).handleLoginBtn(username:self.usernameTextField.text!,password: self.passwordTextField.text!)
)
case "facebookBtn":
self.run(SKAction.wait(forDuration: 0.1),completion:[unowned self] in
guard let delegate = self.delegate else return
(delegate as! TransitionDelegate).handleFacebookBtn()
)
case "twitterBtn":
self.run(SKAction.wait(forDuration: 0.1),completion:[unowned self] in
guard let delegate = self.delegate else return
(delegate as! TransitionDelegate).handleTwitterBtn()
)
default:break
func textFieldDidChange(textField: UITextField)
//print("everytime you type something this is fired..")
func textFieldShouldReturn(_ textField: UITextField) -> Bool
return true
func textFieldDidEndEditing(_ textField: UITextField)
if textField == usernameTextField // validate email syntax
let emailRegEx = "[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]2,"
let emailTest = NSPredicate(format:"SELF MATCHES %@", emailRegEx)
let result = emailTest.evaluate(with: textField.text)
let title = "Alert title"
let message = result ? "This is a correct email" : "Wrong email syntax"
if !result
self.run(SKAction.wait(forDuration: 0.01),completion:[unowned self] in
guard let delegate = self.delegate else return
(delegate as! TransitionDelegate).showAlert(title:title,message: message)
)
deinit
print("\n THE SCENE \((type(of: self))) WAS REMOVED FROM MEMORY (DEINIT) \n")
输出：
动画输出：
如您所见，我们可以使用它们的委托方法处理这两个框架，我已经用 iPhone 5 和 iPhone 7 plus 测试了这个页面。
【讨论】：
Here 我用这个项目构建了一个 GitHUB 存储库以上是关于为 SKSprite 游戏创建登录页面的主要内容，如果未能解决你的问题，请参考以下文章