如何使用自定义设计显示一串数字？

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中的得分

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