为SKSprite Game创建一个登录页面

Question

我正在使用许多SKScene和Sprite对象在xcode中创建游戏(Swift).我想创建一个场景(设置场景)来捕捉玩家的姓名,电子邮件,性别等.我该如何解决这个问题？如何捕获用户的输入.SKScenes不允许在UI中输入字段/值？

谢谢

Answer 1

您可以构建一个符合您的游戏布局的自定义登录页面,而无需尝试在UIKit中重建相同的图形资源.

几天前我写了一个关于SKSceneDelegate的回答,以便在场景(SpriteKit)和viewController(UIKit)之间进行通信,如果你想调用其他viewControllers,请提出这个答案,因为它的答案概念相同.

从这开始,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测试了此页面.