2017-04-06 77 views
4

要在SpriteKit中創建一個按鈕,我用SKShapeNode創建了一個圓角矩形,然後在其上放置一個SKLabel。用SKLabel文本剪裁SKTexture

它看起來像這樣: enter image description here

我想有一個正在與任何正在它的標籤,更改背景。因此,在圖片中,T,E和A的一半是紫色的。

是否有某種方法可以中途着色字體?或者以某種方式使用放置在其上的SKLabel裁剪白色矩形紋理。這樣就沒有標籤,而是從紋理中切出標籤。基本上,我希望字體顏色是它背後的任何東西。

我必須這樣做,而無需導入圖像和代碼。

+2

可以做減法混合。使你的標籤變白,使你的盒子變白,將'blendMode'設置爲'.subtract',然後使用'view.textureFromNode'提取紋理以在SKSpriteNode上使用。 – Knight0fDragon

回答

4

Knight0fDragon在他的評論中有理由,這是一個很好的建議。還有另一種解決方案,您可以不用textureFromNode。 您準備cropNode的背景和標籤,然後進行與按鈕的另一個背景克隆和你cropNode在所有:

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) 
    } 
} 

圖片使用enter image description here

輸出

enter image description here

另一項後臺測試:

enter image description here

輸出2:

enter image description here

+0

這是靜態背景的完美解決方案。如果背景非常動態,或者blendMode是更好的選擇,我仍然可以使用此方法嗎?例如,在原始圖片中,紫色圓圈可以隨意生長,縮小和移動。我希望這些翻譯能不斷更新字體,就好像這個按鈕實際上是一個白色的紋理,其中有「RATE」字樣,所以你可以看到背景背後的單詞。我不知道如果我必須不斷地更新裁剪節點(除非更改自動生效),效率會有多高? – Nicholas714

+0

對於動態目的,我建議實現包含標籤和按鈕而不是帶透明度的sklabelnodes的png圖像效果和skshapenode:動態背景可以連續更改,並強制每次更改cropnode,這可能會變得非常複雜。 –

+0

根據[Apple的文檔](https://developer.apple.com/reference/spritekit/它說:「一組節點可以動態地生成一個複雜的掩碼,每次渲染幀都會發生變化。」所以它有可能更新自己?否則將blendMode會更好?(試圖避免PNG圖像作爲按鈕) – Nicholas714