2017-04-06 2 views
4

Um eine Schaltfläche in SpriteKit zu erstellen, habe ich ein abgerundetes Rechteck mit einem SKShapeNode erstellt und dann ein SKLabel darauf platziert.Crop SKTexture mit SKLabel text

Es sieht wie folgt aus: enter image description here

ich den Hintergrund haben wollen, die mit unter dem Label ändern ist, was unter ihm ist. Also wären das T, E und die Hälfte des A im Bild lila.

Gibt es einen Weg, um die Schrift zur Hälfte zu färben? Oder beschneiden Sie die Textur des weißen Rechtecks ​​mit dem SKLabel, das darauf platziert ist. Auf diese Weise gibt es kein Etikett, sondern einen Ausschnitt aus einem Etikett aus der Textur. Grundsätzlich möchte ich die Schriftfarbe, was auch immer dahinter steht.

Ich muss dies tun, ohne Bilder und durch Code irgendwie zu importieren.

+2

können Sie Subtraktive Mischung tun. Machen Sie Ihr Label weiß, machen Sie Ihre Box weiß, setzen Sie Ihren 'blendMode' auf' .subtract', extrahieren Sie dann die Textur mit 'view.textureFromNode' zur Verwendung auf einem SKSpriteNode – Knight0fDragon

Antwort

4

Knight0fDragon haben Grund in seinem Kommentar, das ist ein guter Vorschlag. Es gibt eine andere Lösung, die Sie ohne textureFromNode machen können.

import SpriteKit 
class GameScene: SKScene { 
    override func didMove(to view: SKView) { 
     let background = SKSpriteNode.init(imageNamed: "background.png") 
     background.zPosition = 1 
     let background2 = background.copy() as! SKSpriteNode 
     //label 
     let titleLabel = SKLabelNode(fontNamed: "AvenirNext-Bold") 
     titleLabel.fontSize = 150 
     titleLabel.fontColor = SKColor.black 
     titleLabel.text = "RATE" 
     titleLabel.horizontalAlignmentMode = .center 
     titleLabel.zPosition = 5 
     titleLabel.blendMode = .subtract 
     //cropNode 
     let cropNode = SKCropNode() 
     cropNode.addChild(background) 
     cropNode.maskNode = titleLabel 
     self.addChild(cropNode) 
     cropNode.zPosition = 5 
     //button 
     let button = SKShapeNode(rect: CGRect(x: -300, y: -50, width: 600, height: 200), cornerRadius: 100) 
     button.zPosition = 4 
     button.fillColor = SKColor.white 
     self.addChild(background2) 
     self.addChild(button) 
    } 
} 

Bild verwendet: enter image description here

Ausgang: Sie können Ihre cropNode mit dem Hintergrund und dem Etikett, dann machen Sie einen anderen Hintergrund Klon mit der Schaltfläche und Ihre cropNode über alle vorbereiten

Ein weiterer Hintergrund-Test:

enter image description here

Ausgang 2:

enter image description here

+0

Dies ist eine perfekte Lösung für statische Hintergründe. Kann ich diese Methode immer noch verwenden, wenn der Hintergrund sehr dynamisch ist oder wäre blendMode die bessere Option? Zum Beispiel kann der violette Kreis innerhalb des ursprünglichen Bildes wachsen, schrumpfen und sich zufällig bewegen. Ich möchte, dass diese Übersetzungen die Schriftart ständig aktualisieren, als ob die Schaltfläche tatsächlich eine weiße Textur wäre, aus der das Wort "RATE" ausgeschnitten wäre, so dass Sie den Hintergrund hinter den Wörtern sehen können. Ich bin nicht sicher, wie effizient es wäre, wenn ich den Crop-Knoten ständig aktualisieren müsste (außer die Änderungen werden automatisch wirksam?) – Nicholas714

+0

Für dynamische Zwecke schlage ich vor, PNG-Bilder zu erstellen, die sowohl Label als auch Button anstelle von sklabelnodes mit Transparenz enthalten effect und skshapenode: Der dynamische Hintergrund kann sich ständig ändern und zwingt dich jedes Mal zu wechseln, wenn der Cropnode wirklich kompliziert zu handhaben ist. –

+0

Laut [Apples Dokumentation] (https://developer.apple.com/reference/spritekit/ skcopnode), heißt es "Eine Sammlung von Knoten kann dynamisch eine komplexe Maske erzeugen, die sich jedes Mal ändert, wenn der Rahmen gerendert wird." Also ist es möglich, dass es sich selbst aktualisiert? Sonst wäre blendMode besser?(Versuchen, PNG-Bilder als Tasten zu vermeiden) – Nicholas714