在SKSpriteNode上疊加兩個紋理

Question

我想達到此gif所示的效果。

目前，我使用一系列帶有紅色背景和白線的〜7 png圖像來完成此操作，這些圖像使用SKAction通過子畫面進行動畫處理。

我想對精靈進行一些其他添加，這些添加可以根據情況而變化，並且我還要用多種顏色重復進行此操作。 結果是：6種顏色，7種發光效果，5種邊緣效果和4個角效果產生了我需要創建和存儲的136種紋理組合。

我覺得在設置精靈的紋理時，必須有一種方法可以將png與透明背景疊加在一起，但是我似乎找不到在任何地方進行此操作的方法。

這是否可能使我可以將資產數量減少到22個，或者我必須全部賺136個資產，並在類中建立邏輯來決定使用哪個資產？

Answer 1

我希望自己的游戲具有這種效果，我嘗試了很多選擇。 我嘗試使用粒子來提高性能，但是甚至無法接近。 我知道您可以使用Shaders來完成它，但是我沒有走那條路，在iOS 12中，Shaders無論如何都不支持Open GL。 最后，我選擇了使用CropNodes。

這是我的眩光圖像，很難看到，因為它略帶透明的白色圖像。

這是我使用CropNodes獲得的結果

class Glare: SKSpriteNode {

    var glare = SKSpriteNode()
    private var cropNode = SKCropNode()

    init(color: UIColor, size: CGSize) {

        super.init(texture: nil, color: color, size: size)

        alpha = 0.7
        zPosition = 10

        setupGlare()
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func setupGlare() {

        let buffer: CGFloat = 10

        let mask = SKSpriteNode(texture: nil, color: .black, size: self.size)

        let texture = SKTextureAtlas(named: "Sprites").textureNamed("glare")
        glare = SKSpriteNode(texture: texture)
        glare.position = CGPoint(x: 0 - (self.size.width / 2 + buffer), y: self.size.height / 2 + buffer)
        glare.setScale(3.50)
        glare.zPosition = 1

        cropNode.zPosition = 2
        cropNode.maskNode = mask
        cropNode.addChild(glare)

        let random = Double(CGFloat.random(min: 0, max: 1))

        let pause = SKAction.wait(forDuration: random)
        let move = SKAction.moveBy(x: self.size.width + buffer * 2, y: 0 - (self.size.height + buffer * 2), duration: 0.5)
        let wait = SKAction.wait(forDuration: 1.0)
        let reset = SKAction.moveBy(x: 0 - (self.size.width + buffer * 2), y: self.size.height + buffer * 2, duration: 0.0)
        let seq = SKAction.sequence([move, wait, reset])
        let repeater = SKAction.repeatForever(seq)
        let repeaterSeq = SKAction.sequence([pause, repeater])

        glare.run(repeaterSeq)
    }

    func showGlare(texture: SKTexture) {

        let mask = SKSpriteNode(texture: texture)

        cropNode.maskNode = mask
        glare.isHidden = false
        if cropNode.parent == nil { self.addChild(cropNode)}
    }

    func hideGlare() {

        glare.isHidden = true
        //remove cropnode from the node tree
        cropNode.removeFromParent()
    }
}

然后在我的GameScene中...

我將眩光添加到眩光層中，但這不是必需的。 我還會在游戲加載時進行檢查，並提前為所有15個插槽創建眩光並將它們排列成陣列。 這樣，我就不必立即創建它們，我可以隨時隨地打開插槽10，也可以將其關閉。

private var glares = [Glare]()

let glare = Glare(color: .clear, size: CGSize(width: kSymbolSize, height: kSymbolSize))
glare.position = CGPoint(x: (CGFloat(x - 1) * kSymbolSize) + (kSymbolSize / 2), y: 0 - (CGFloat(y) * kSymbolSize) + (kSymbolSize / 2))
glare.zPosition = 100
glareLayer.addChild(glare)
glares.append(glare)

當我想在插槽上顯示眩光時

在這里為您編輯紋理只是一個與瓷磚大小相同的空白正方形紋理。

glares[index].showGlare(texture: symbol.texture!)

當我想隱藏它時

glares[index].hideGlare()