Connaissez-vous le jeu de puzzle "voi"? C'est un jeu qui fonctionne avec la couleur-XOR-logique. Cela signifie: noir + noir = blanc.Sprite-Kit: couleur xor logique avec deux sprites. noir + noir = blanc
https://www.youtube.com/watch?v=Aw5BdVcAtII
Est-il possible de faire la même logique de couleur avec deux noeuds de sprite dans le kit de Sprit?
Merci.
Bien sûr, il est possible de le faire dans Sprite Kit.
Problème:
Disons que vous avez 2 carrés noirs, squareA et squareB. L'utilisateur peut faire glisser ces deux carrés partout où il veut. Il ne peut faire glisser qu'une case à la fois. Vous voulez colorer la zone d'intersection en blanc chaque fois que les deux carrés se croisent.
Configuration initiale:
En haut de la scène, il y a quelques variables dont nous avons besoin pour créer:
private var squareA: SKSpriteNode?
private var squareB: SKSpriteNode?
private var squares = [SKSpriteNode]()
private var selectedShape: SKSpriteNode?
private var intersectionSquare: SKShapeNode?
squareA et squareB sont juste les 2 places que nous initialement sur l'écran.squares est un tableau et il va stocker tous les carrés qui apparaissent à l'écran.selectedShape nous aidera à garder une trace du carré qui est en train d'être traîné.intersectionSquare est un carré blanc qui représente la zone d'intersection entre les deux carrés noirs.ensuite initialiser squareA et squareB et les ajouter au tableau squares comme ceci:
squareA = SKSpriteNode(color: .black, size: CGSize(width: 190.0, height: 190.0))
if let squareA = self.squareA {
squareA.position = CGPoint(x: -200, y: 200)
squareA.name = "Square A"
squares.append(squareA)
self.addChild(squareA)
}
// Do the same for squareB or any other squares that you have on screen..
Note: Comme vous pouvez le voir, je lui ai donné un nom ici juste pour le rendre plus facile de différencier eux pendant la phase de test.
lorsque l'utilisateur est Détecte traîne un carré:
Maintenant, vous devez détecter lorsque l'utilisateur fait glisser un carré. Pour ce faire, vous pouvez utiliser:
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
for t in touches { self.touchDown(atPoint: t.location(in: self)) }
}
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
for t in touches { self.touchMoved(toPoint: t.location(in: self)) }
}
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
for t in touches { self.touchUp(atPoint: t.location(in: self)) }
}
override func touchesCancelled(_ touches: Set<UITouch>, with event: UIEvent?) {
for t in touches { self.touchUp(atPoint: t.location(in: self)) }
}
Ce ne sont que des méthodes d'assistance qui vont nous faciliter la vie.
, vous devez ensuite configurer touchDown, touchMoved et touchUp méthodes:
func touchDown(atPoint pos : CGPoint) {
let touchedNode = self.nodes(at: pos)
guard let selectedSquare = touchedNode.first as? SKSpriteNode else {
return
}
selectedShape = selectedSquare
}
func touchMoved(toPoint pos : CGPoint) {
guard let selectedSquare = self.selectedShape else {
return
}
selectedSquare.position = pos
checkIntersectionsWith(selectedSquare)
}
func touchUp(atPoint pos : CGPoint) {
selectedShape = nil
}
vous expliquer plus en détail ce qui se passe ici:
touchDown:Eh bien, nous avons besoin de l'utilisateur pour pouvoir faire glisser seulement un carré à la fois. En utilisant la méthode nodes(at:), il est facile de savoir quel carré a été touché, et nous pouvons savoir que notre variable selectedShape doit être égale au carré touché.
touchMoved:Ici, nous sommes fondamentalement juste déplaçons la selectedShape à la position de l'utilisateur déplace son doigt. Nous appelons également la méthode checkIntersectionsWith() que nous allons configurer dans une seconde.
touchUp:L'utilisateur sort son doigt de l'écran, afin que nous puissions régler le selectedShape à zéro.
Modifier la couleur du cadre d'intersection:
Maintenant, la partie la plus importante pour rendre votre jeu ressemblent vraiment à celui que vous voulez faire, comment changer la couleur du cadre d'intersection au blanc quand deux carrés noirs se croisent?
Eh bien, vous avez différentes possibilités ici, et voici une façon possible de le faire:
private func checkIntersectionsWith(_ selectedSquare: SKSpriteNode) {
for square in squares {
if selectedSquare != square && square.intersects(selectedSquare) {
let intersectionFrame = square.frame.intersection(selectedSquare.frame)
intersectionSquare?.removeFromParent()
intersectionSquare = nil
intersectionSquare = SKShapeNode(rect: intersectionFrame)
guard let interSquare = self.intersectionSquare else {
return
}
interSquare.fillColor = .white
interSquare.strokeColor = .clear
self.addChild(interSquare)
} else if selectedSquare != square {
intersectionSquare?.removeFromParent()
intersectionSquare = nil
}
}
}
Chaque fois que la méthode checkIntersectionsWith() est appelée, nous itérer à travers les nœuds qui sont dans notre gamme squares, et nous vérifions, en utilisant la méthode intersection() du cadre, si le carré sélectionné croise l'un de ceux-ci (sauf lui-même). Si c'est le cas, alors nous créons un carré blanc, nommé intersectionSquare, et définissons son cadre pour être égal à l'image d'intersection. Pour économiser votre mémoire, vous pouvez supprimer le carré de la scène et régler intersectionSquare sur nil s'il n'y a aucune intersection.
Résultat final:
Le résultat final ressemblera à ceci:
C'est juste un projet rapide que je vous ai faite montrer sur vous pouvez aborder le problème, et évidemment il y a beaucoup de choses que vous pourriez ajouter ou améliorer (appliquez ceci à une situation où vous avez non seulement 2 mais beaucoup de carrés à l'écran, ou créez une sorte d'effet de magnétisme lorsque votre utilisateur sort son doigt de l'écran, etc.) espérons au moins, il vous mettra sur le bonne piste pour votre projet :)
Super! Merci beaucoup – Yann