如何使用自定義設計顯示一串數字？

Question

我不想使用SKLabelNode因為我想具有特殊效果，例如漸變填充，陰影和自定義字體，因此我創建了10個png圖像，每個數字一個，然后將它們添加為圖像圖集。 然后，在設置要顯示的數字時，我為每個數字創建一個新的SKSpriteNode並帶有來自圖集的數字紋理，然后將其添加到沒有紋理的父級SKSpriteNode 。 我遇到的問題是我試圖將錨點設置為添加的所有節點的中間，但是在設置錨點時，它只是相對於其自己的框架設置錨點，而不是添加子節點時更新。

我已經做了更多的工作，但我無法使子畫面居中。 這是我正在執行此操作的SKNode的子類： Gist 。 當我創建該節點的實例時，將位置設置為0,0，設置currentValue ，然后將該節點添加到游戲場景中，如下所示 。 它下面的框是一個SKShapeNode ，其框架包含數字節點的累積幀，並且與數字節點的位置相同。 黑點在游戲場景中為0,0。

有更好的方法嗎？ 或者我該怎么解決我的問題？

Answer 1

這是非常基本的UI內容，無論是用於游戲還是其他應用程序。 “說起來容易做起來難”更是一種心態。 說到構建游戲的復雜性，這很簡單。

無論如何，關鍵在於您需要知道如何獲得數字的寬度。 這個問題對於任何文本都是一樣的。 因此，如果您了解如何執行此操作，則實際上可以制作自己的自定義字體。

下面是一些“代碼”。 它不會編譯，我還沒有填寫方法。 原因是多方面的。 首先，您將從實踐中學到更多的利益。 此外，我不知道您的工作方式如何，並且為非我的項目輸入所有細節很繁瑣。

為此，我創建了一個虛擬類NumberLabel 。 這是組合的SKNode /“自定義字體”類。 實際上，我將兩者分開。 但是現在，這樣做是為了簡化（盡管作為一個副產品非常混亂 ，我不會在單個類中構建它）。

class NumberLabel {
    // Root for all digits. This is also the "center"
    var root:SKNode = SKNode()

    private var underlyingValue:UInt = 0

    // These will hold each digit, for example 1234 will be [1, 2, 3, 4]
    private var digits: Array<UInt>

    var value: UInt {
        get {
           return underlyingValue
        }

        set {
            // There is no optimization checks (ie. if underlyingValue != newValue, you can do that later WHEN you get this working properly)
            underlyingValue = newValue

            // Release old nodes

            // You will build your other nodes here
            buildDigits()

            let width = getWidth()
            let x = -width / 2
            let y = ??? // Determine what your y should be based on your anchoring policy for sprites

            // I now know that -width/2
            for (digit in digits) {
                // This is all pseudo code
                var digitNode = createDigitNodeForDigit(digit, x, y)

                // You need to determine any trailing spacing, this would be also accounted for in getWidth
                x += getWidthOfDigit(digit)

                root.addChild(digitNode)
            }
        }
    }
    // Initialization omitted

    // Build the digits array
    // For laziness this uses underlyingValue. Safer would be to take it as an argument, but this is just example code
    private func buildDigits() {
        // Populate array based on the number value
        // For example 1234 will be the array [1, 2, 3, 4]
    }

    // Get's width of underlyingValue (use float if you want)
    // For laziness of writing this, it assumes BOTH underlyingValue and digits are properly assigned
    public func getWidth() -> UInt {
        // Get the width of the number
        // Traverse your digits array, determine the width based on number, and insert any kerning (if appropropiate)
    }

    // Use float if you want
    public func getHeight() -> UInt {
        // Return height. While width may not be uniform, for digits, there should be uniform height
    }
}

以下是一些關鍵要點：

• 我不是從SKNode派生的。 您可以這樣做。 我從來沒有從SKNode派生SKNode類。 對於這些情況，我使用“具有”與“是”的方法。 如果需要子類，它不會改變太多。

• getWidth是您的朋友。 您正在構建的任何字體系統都需要將此作為基礎。 它不僅可以渲染，而且可以在UI中進行放置。

• 假設您知道寬度或將得出寬度。 你需要他們

• 假設您知道如何將數字轉換為單個數字。 您將用它來填充digits

• 所有這些都是一個快速的示例，因此我的界面很草率。 他們不爭論，而更清潔的界面會

• createDigitNodeForDigit是您采用數字值（0-9）並創建SKSpriteNode或“數字節點”對象的方法

• getWidthOfDigit將是您獲取該數字的寬度的方法。 大概您可以只查詢紋理的寬度。 由您決定如何處理數字間距

• 請注意，我們僅在值的設置上執行此操作。 因此，您不會在每一幀中都造成節點的破壞和構建。

我在這里回答了類似的問題： 將自定義“數字”圖像添加到SKLabelNode中，作為帶有Swift的SpriteKit中的得分

因此，也許還有一些其他信息可供您吸收。