Creating a button using SKLabelNode as a parent in Swift SpriteKit - ios

I'm trying to create a subclass of SKLabelNode for a button in SpriteKit. I tried to create a button using SKLabelNode as a parent, so I can use everything I know about labels while creating my buttons (font, text size, text color, position, etc).
I've looked into Swift Spritekit Adding Button Programaticly and I'm using the basis of what that is saying, but rather I'm making a subclass instead of a variable, and I'm creating the button using a label's code. The subclass has the added function that will allow it to be tapped and trigger an action.
class StartScene: SKScene {
class myButton: SKLabelNode {
override func touchesEnded(touches: Set<NSObject>, withEvent event: UIEvent) {
for touch: AnyObject in touches {
let location = touch.locationInNode(self)
if myButton.containsPoint(location) {
// Action code here
}
}
}
}
override func didMoveToView(view: SKView) {
let startGameBtn = myButton(fontNamed: "Copperplate-Light")
startGameBtn.text = "Start Game"
startGameBtn.fontColor = SKColor.blackColor()
startGameBtn.fontSize = 42
startGameBtn.position = CGPointMake(frame.size.width/2, frame.size.height * 0.5)
addChild(startGameBtn)
}
}
My error is in: if myButton.containsPoint(location)
The error reads: Cannot invoke 'containsPoint' with an argument list of type '(CGPoint)'
I know it has to do something with my subclass, but I have no idea what it is specifically.
I also tried putting parentheses around myButton.containsPoint(location) like so:
if (myButton.containsPoint(location))
But then the error reads: 'CGPoint' is not convertible to 'SKNode'
Thanks

I have an alternative solution that would work the same way.
Change the following code
if myButton.containsPoint(location) {
To this and it should compile and have the same functionality
if self.position == location {

Related

How to stop button action if user moves their finger off the button in sprite kit?

override func touchesEnded(_ 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 {
if name == "leftbutton" {
print("left button stopped")
touchedNode.run(buttonStoppedPressAction)
player?.removeAllActions()
}
if name == "rightbutton" {
print("right button stopped")
touchedNode.run(buttonStoppedPressAction)
player?.removeAllActions()
}
}
}
Here I have code that when the user lifts off their finger from the buttons it stops the action but only if they lift of their finger inside the button. So if they press it and begin to move their finger somewhere else on the screen while continuously pressing down the button will not stop executing its code. Thank you for any help.
Essentially you should check for touch location at touch down and compare to the location at touch up. If the touch is no longer in the area of your button, you cancel all effects.
First, though, a point. It seems like you are handling button logic in the SKScene level, which is what tutorials often tell you to do. However, this may not be the best approach. The risks here, in addition to just a cluttered mess of a SKScene, emerge from handling multiple objects and how they react to touch events, and also additional complexity from multitouch (if allowed).
Years ago when I started with SpriteKit, I felt like this was a huge pain. So I made a button class that handles all the touch logic independently (and sends signals back to the parent when something needs to happen). Benefits: No needless clutter, no trouble distinguishing between objects, the ability to determine multitouch allowances per-node.
What I do in my class to see if the touch hasn't left the button before touch up is that I store the size of the button area (as a parameter of the object) and touch position within it. Simple simple.
In fact, it has baffled me forever that Apple didn't just provide a rudimentary SKButton class by default. Anyhow, I think you might want to think about it. At least for me it saves sooo much time every day. And I've shipped multiple successful apps with the same custom button class.
EDIT: Underneath is my barebones Button class.
import SpriteKit
class Button: SKNode {
private var background: SKSpriteNode?
private var icon: SKNode?
private var tapAction: () -> Void = {}
override init() {
super.init()
isUserInteractionEnabled = true
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
isUserInteractionEnabled = true
}
// MARK: Switches
public func switchButtonBackground(buttonBackgroundSize: CGSize, buttonBackgroundColor: SKColor) {
background = SKSpriteNode(color: buttonBackgroundColor, size: buttonBackgroundSize)
addChild(background!)
}
public func switchButtonIcon(_ buttonIcon: SKNode) {
if icon != nil {
icon = nil
}
icon = buttonIcon
addChild(icon!)
}
public func switchButtonTapAction(_ buttonTapAction: #escaping () -> Void) {
tapAction = buttonTapAction
}
// MARK: Touch events
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
tapAction()
}
}
And then you create the Button object by first initiating it, assigning it a background using a size and color, then assign it an icon, assign it a function to run when tapped and finally add it as a child to the scene.
let icon = SKNode()
let size = CGSize(width: 20.0, height: 20.0)
let button = Button()
button.switchButtonBackground(buttonBackgroundSize: size, buttonBackgroundColor: .clear)
button.switchButtonIcon(icon)
button.switchButtonTapAction(buttonPressed)
addChild(button)
The background defines the touch area for the button, and you can either have a color for it or determine it as .clear. The icon is sort of supposed to hold any text or images you want on top of the button. Just package them into an SKNode and you're good to go. If you want to run a function with a parameter as the tap action, you can just make a code block.
Hope that helps! Let me if you need any further help :).

Referencing the image being touched

In my viewDidLoad function I have a loop creating a 3x6 table of square images (blocks) . The idea is to move and match them eventually.
My question is, how do I assign the current image that is being touched or dragged, as a variable? Here's how I'm adding the image:
let squareImg = UIImageView(image:#imageLiteral(resourceName: "square"))
view.addSubview(squareImg)
And here is what I'm attempting to do:
#IBAction func handlePan(_ recognizer: UIPanGestureRecognizer) {
let translation = recognizer.translation(in: self.view)
if recognizer.state == UIGestureRecognizerState.began {
isDragging = true
let objectDragging = self.view //this is wrong and what I'm trying to correct
print("bg color of block being moved \(objectDragging?.backgroundColor)")
....
Store the images in an array, assign their index to the tag value, screw touchesBagan etc. and simply use gesture recognizers.
Adding images becomes:
var myImages = [UIImage]()
let squareImg = UIImageView(image:#imageLiteral(resourceName: "square"), tag: [//add a distinguished tag here])
view.addSubview(squareImg)
myImages.append(squareImg)
Now that your views are in an array (they don't need to be UIImageViews or even UIImages, just something unique), simply point to the correct thing in your array:
#IBAction func handlePan(_ recognizer: UIPanGestureRecognizer) {
let translation = recognizer.translation(in: self.view)
for view in self.subviews as [UIView] {
if let imageView = view as? UIImageView {
let image = myImages.tag
}
}
}
I'm aware this isn't exactly what you are asking for. But the technique is. I'll adjust my answer based on your feedback.
EDIT:
Based on the comments, it sounds like a good strategy going forward is to at least populate the tag property with "associated pairs in some kind of loop. Additionally, it sounds like some sort of build error is happening. Here's my take on that issue....
Tag properties are available to every object, be they a view or control. Also, they are of Int type. The last comment states the error references an incorrect argument in a function call, expecting an image. I think two separate things are going on.
(1) Populating the tag property for "associated" images in a loop.
If you are loading a "square" and a "circle" n number of times, instantiate things in a loop with an index and populate their tag property.
for index in 0...10 {
// instantiate your images
// associate these images by populating their tag values
imgSquare.tag = index
imgCircle.tag = index
// continue any other set here
}
Loop types in Swift are natively Int, so this is correct.
(2) The incorrect reference build error.
The build error is on line
let circleImg = UIImageView(image: circle, tag: [arrayCounter])
This is not a "canned" initializer for UIImageView, and from the build error it's not (yet) a coded extension to UIImageView. It sounds like there is a coded extension to UIImageView, one that expects two arguments, image and highlightedImage. If you want extend UIImageView for something like this, I'd create an extension with a convenience initializer:
extension UIImageView {
convenience init(image: UIImage, tag:Int) {
self.init()
self.image = image
self.tag = tag
}
}
This is a skeleton. You can add a guard statement and make it a bailable initializer. You can add frames, backgroundColor, whatever. The thing is - you currently do not have an initializer calling for 'image:tag:' but you are coding for one.
just try this
let objectDragging = recognizer.view
You could use the overrides provided by UIImageView.
For Example,
class DragImag: UIImageView {
var draggedView: UIView?
override init(frame: CGRect) {
super.init(frame: frame)
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
}
override func touchesMoved(touches: Set<UITouch>, withEvent event: UIEvent?){
//here you get your desired view
draggedView = touches.view
}
override func touchesEnded(touches: Set<UITouch>, withEvent event: UIEvent?){
}
}

SKSpriteNode does not let touches pass through when isUserInteractionEnabled false

I'm attempting to create an overlay in SpriteKit which by using an SKSpriteNode. However, I want the touches to pass through the overlay, so I set isUserInteractionEnabled to false. However, when I do this, the SKSpriteNode still seems to absorb all the touches and does not allow the underlying nodes to do anything.
Here's an example of what I'm talking about:
class
TouchableSprite: SKShapeNode {
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
print("Touch began")
}
}
class GameScene: SKScene {
override func sceneDidLoad() {
// Creat touchable
let touchable = TouchableSprite(circleOfRadius: 100)
touchable.zPosition = -1
touchable.fillColor = SKColor.red
touchable.isUserInteractionEnabled = true
addChild(touchable)
// Create overlay
let overlayNode = SKSpriteNode(imageNamed: "Fade")
overlayNode.zPosition = 1
overlayNode.isUserInteractionEnabled = false
addChild(overlayNode)
}
}
I've tried subclassing SKSpriteNode and manually delegating the touch events to the appropriate nodes, but that results in a lot of weird behavior.
Any help would be much appreciated. Thanks!
Reading the actual sources you find:
/**
Controls whether or not the node receives touch events
*/
open var isUserInteractionEnabled: Bool
but this refers to internal node methods of touches.
By default isUserInteractionEnabled is false then the touch on a child like your overlay SKSpriteNode is, by default, a simple touch handled to the main (or parent) class (the object is here, exist but if you don't implement any action, you simply touch it)
To go through your overlay with the touch you could implement a code like this below to your GameScene.Remember also to not using -1 as zPosition because means it's below your scene.
P.S. :I've added a name to your sprites to recall it to touchesBegan but you can create global variables to your GameScene:
override func sceneDidLoad() {
// Creat touchable
let touchable = TouchableSprite(circleOfRadius: 100)
touchable.zPosition = 0
touchable.fillColor = SKColor.red
touchable.isUserInteractionEnabled = true
touchable.name = "touchable"
addChild(touchable)
// Create overlay
let overlayNode = SKSpriteNode(imageNamed: "fade")
overlayNode.zPosition = 1
overlayNode.name = "overlayNode"
overlayNode.isUserInteractionEnabled = false
addChild(overlayNode)
}
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
print("GameScene Touch began")
for t in touches {
let touchLocation = t.location(in: self)
if let overlay = self.childNode(withName: "//overlayNode") as? SKSpriteNode {
if overlay.contains(touchLocation) {
print("overlay touched")
if let touchable = self.childNode(withName: "//touchable") as? TouchableSprite {
if touchable.contains(touchLocation) {
touchable.touchesBegan(touches, with: event)
}
}
}
}
}
}
}
You need to be careful with zPosition. It is possible to go behind the scene, making things complicated.
What is worse is the order of touch events. I remember reading that it is based on the node tree, not the zPosition. Disable the scene touch and you should be seeing results.
This is what it says now:
The Hit-Testing Order Is the Reverse of Drawing Order In a scene, when
SpriteKit processes touch or mouse events, it walks the scene to find
the closest node that wants to accept the event. If that node doesn’t
want the event, SpriteKit checks the next closest node, and so on. The
order in which hit-testing is processed is essentially the reverse of
drawing order.
For a node to be considered during hit-testing, its
userInteractionEnabled property must be set to YES. The default value
is NO for any node except a scene node. A node that wants to receive
events needs to implement the appropriate responder methods from its
parent class (UIResponder on iOS and NSResponder on OS X). This is one
of the few places where you must implement platform-specific code in
SpriteKit.
But this may not have always been the case, so you will need to check between 8 , 9, and 10 for consistency

How can I delegate a touchesbegan event to an entities component using swift?

I'm creating a game for ios using swift. I've implemented the component entity system from Apples GameplayKit, very similar to how shown in this tutorial.
I have added a grid of squares which I want to respond differently to tap gestures. I will change a game state using state machine when a UI element is tapped, but I also want to then change how each square reacts to a tap gesture. From my current limited understanding, the best way to do this is change the tap gesture delegate. However, I've not been able to find any simple examples of how this can be done. The sqaures are SKSpriteNodes.
Code is available on request; however, I'm looking for an out of context example of how this could be done in the simplest way.
Does anyone know how this can be done or can suggest a "better" way. To avoid subjectivness, I'm defining better as structured better in terms of architecture. (Multiple if statements in a single gesture handler seems like the wrong way to do this, for example.)
I have found a working solution to my problem based on various bits of help and ideas I've had, however I'm still very much open to alternative solutions.
The main issue this probleme presnted, is how to reference back to the entity from the spritenode.
Through reading the documentation on SKSpriteNode, I discovered that it's parent class SKNode has a userData attribute, which allows you to store data in that node.
Attaching the entity instance to the node needed to happen in the SpriteComponent, as that is where the node is constructed, however it cannot happen in the constructor,so it had to be in a function in the SpriteComponent.
func addToNodeKey() {
self.node.userData = NSMutableDictionary()
self.node.userData?.setObject(self.entity!, forKey: "entity")
}
Then the function is called in the Enity class construction after adding the compoennt to itself.
addComponent(spriteComponent)
spriteComponent.addToNodeKey()
Now the Enity instance can be accessed from the touch event, I needed a way to perform a function on that instance, however you don't know if the instance will be a subclass of GKEntity or not, nor which type.
Therefore, I created another component, TouchableSpriteComponent. After some trying, the init function took a single function as its argument, which is then called from the scenes touch event, which allows the entity which created the TouchableSpriteComponent to define how it handles the event.
I created a gist for this solution, as there's probably too much code to place here. It is a permilink.
I'd really love to know if this is a "good" solution, or if there's a much clearer route which would have the same effect (without looping through all the entities or nodes).
If I understod well, you should have something like:
func entityTouched(touches: Set<UITouch>, withEvent event: UIEvent?)
in your GKEntity subclass.
I do this in my game:
class Square: MainEntity {
override func entityTouched(touches: Set<UITouch>, withEvent event: UIEvent?) {
//DO something
}
}
GameScene:
override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
super.touchesBegan(touches, withEvent: event)
let touch = touches.first!
let viewTouchLocation = touch.locationInView(self.view)
let sceneTouchPoint = self.convertPointFromView(viewTouchLocation)
let touchedNode = self.nodeAtPoint(sceneTouchPoint)
let touchedEntity = (touchedNode as? EntityNode)?.entity
if let myVC = touchedEntity as? MainEntity {
myVC.entityTouched(touches, withEvent: event)
}
where:
EntityNode:
class EntityNode: SKSpriteNode {
// MARK: Properties
weak var entity: GKEntity!
}
SpriteComponent:
class SpriteComponent: GKComponent {
let node : EntityNode
init(entity: GKEntity, texture: SKTexture, size: CGSize) {
node = EntityNode(texture: texture, color: SKColor.whiteColor(), size: size)
node.entity = entity
}
}
MainEntity:
class MainEntity: GKEntity {
var entityManager : EntityManager!
var node : SKSpriteNode!
//MARK: INITIALIZE
init(position:CGPoint, entityManager: EntityManager) {
super.init()
self.entityManager = entityManager
let texture = SKTexture(imageNamed: "some image")
let spriteComponent = SpriteComponent(entity: self, texture: texture, size: texture.size())
node = spriteComponent.node
addComponent(spriteComponent)
}
func entityTouched (touches: Set<UITouch>, withEvent event: UIEvent?) {}
}
Let me know if was what you are looking for.

SKNode now shown from another class

I've two classes in separate files.
In the "main" file, where my scene is, I'm calling this function:
override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
/* Called when a touch begins */
for touch in touches {
character().spawnCharacter()
}
}
So, in my second file, character.swift I've this code:
import SpriteKit
public func spawnCharacter() -> SKSpriteNode{
let charNode = SKSpriteNode(imageNamed: "Hero")
charNode.name = "Hero"
charNode.postion = CGPointZero
charNode.zPosition = 3
addChild(charNode)
print("Node added")
return charNode
}
So, the print line is printed, but the node is never added.
I've been over my code a couple of times, but I can't crack it.
Any clues?
I am not entirely sure how your main file is organised, but I think the problem is here:
for touch in touches {
character().spawnCharacter() // <- SKSpriteNode is created but not added
}
You create sprite-node in spawnCharacter() but you do not use the returned object.
Potential fix would be:
for touch in touches {
let character = character().spawnCharacter()
scene.addChild(character)
}

Resources