Place UITextField behind SKNode

Question

igorland OP

Created Feb ’20

Replies 3

Boosts 0

Views 1.2k

Participants 2

Hi.

I am adding a UITextfield to my SKScene:

txtName = UITextField()
txtName.borderStyle = UITextField.BorderStyle.roundedRect
txtName.textColor = SKColor.black
txtName.backgroundColor = SKColor.white
txtName.text = appDelegate.playerName_old
txtName.delegate = self  // Textfield delegate
self.view?.addSubview(txtName)
txtName.alpha = 1.0

After, I am also adding an SKShapeNode to the same Scene:

tutorialNotification = TutorialNotification(text: text, position: position, isShiftedByHalf: isShiftedByHalf)
tutorialNotification?.alpha = 0
background.addChild(tutorialNotification)
tutorialNotification!.zPosition = 2000
tutorialNotification?.run(SKAction.fadeIn(withDuration: 0.25))

where TutorialNotification is a subclass of SKShapeNode. The problem I have is that the tutorialNotification node is located on top of other nodes but is always behind the UITextField.

Is there any way to place the UITextField behind the SKShapeNode?

Thanks a lot!

Boost

Answer 1

iniitamo OP

Feb ’20

Since tutorialNotification is being added to the SKScene itself while txtName actually adds an entirely new Subview, the latter would always be on top of the former. Essentially you're adding a new container on top of the container that includes the SKScene, which will give you a hard time trying to hack depth.

Is there a reason you're not using SKLabelNode for the text field? That would solve your issue right away and make it easier to control anyhow, as it would all be within the SKScene. I guess the overall question is: what is your reason for mixing UIKit and SpriteKit?

On a side note, I always advise against using SKShapeNode. I violently ripped out all SKShapeNodes from my apps years ago, after I found out a number of issues with them. I was going on a shape bender at some point, but now I'm fully a SKSpriteNode and image assets guy.

0

Answer 2

igorland OP

Feb ’20

iniitamo.

Thank you for the response.

Is it possible to use SKLabelNode to enter text a-la UITextField?

I have read a lot of negative stuff about SKShapeNodes. Thought, many issues had already been solved. I am trying to use rectangulars with rounded corners. How would I do that with SKSpriteNode? Just create a rounded png image and use it as a node texture? The main problem with this approach occurs when my node size changes, e.g. when the height is much smaller than width, the texture image gets disproprtionally squeezed/stretched. Something I do not have with SKShapeNode.

Cheers!

0

Answer 3

iniitamo OP

Feb ’20

Well, there are differences between SKLabelNode and UITextField for sure, but most of the functionality is there with SKLabelNode. Frankly, you would need some special reason to not use SKLabelNode if your app is primarily in SpriteKit. I would say there's really only two cases where you want to mix UIKit and SpriteKit:

You're making a UIKit app, which uses some element of SpriteKit almost like an embedded thing, for example a mini-game within a normal iPhone app.
You're making a SpriteKit app, but you need some functionality from UIKit that SpriteKit doesn't boast (such as a UIWebView, though nowadays even that is deprecated and you should use WKWebView instead, or the automatic scrolling of a UITextField, although I would even recommend programming your own scrolling).

Generally mixing should be done with some direct and thought-out goal in mind, because stuff can go wrong very quickly. For example UIKit and SpriteKit live on different times (SpriteKit has it's own game time that affects everything within the package, but wouldn't affect the UIKit elements) and xy-coordinate systems are different.

In short, you really should be using SKLabelNode unless you have some exceptional reason to do otherwise. Feel free to present your case.

About the rounded corners SKShapeNode issue, I would mainly recommend looking into 9-slice features of SKSpriteNode (https://developer.apple.com/library/archive/documentation/GraphicsAnimation/Conceptual/SpriteKit_PG/Sprites/Sprites.html#//apple_ref/doc/uid/TP40013043-CH9-SW10). Native 9-slice features in SpriteKit allow you to designate parts of an image as corners, sides and middle, so the whole element gets stretched dynamically.

That said, I would also recommend considering if you really need dynamic stretching. I've done this stuff for years and years now with a good amount of success too 🙂, so in my experience the simplest and most minimal solutions are usually the best. With apps and games users want understandable and simple, and you end up with a much easier workload yourself, too, with that approach. It's a win-win!

0