时间戳

首页 > 解决方案 > 在 SpriteKit 中管理 UI 的最佳实践

sprite-kit - 在 SpriteKit 中管理 UI 的最佳实践

问题描述

在 SpriteKit 中，我的所有 UI 都使用 SKNodes、SKShapeNodes 和 SKLabelNodes。它适用于我制作的小游戏，但是，一个小界面（例如“游戏结束”提示）可能包含超过 100 行代码，而这仅仅是声明和定义节点属性。所有这些提示和其他 UI 都在各自独立的函数中声明，并在整个游戏场景中需要时调用，但我无法摆脱管理 UI 有更好实践的感觉。也许是我可以调用“getGameOverPromptUI”或“getScoreLabel”函数的类？我会将这样的课程限制在游戏场景中吗？或者包括菜单场景的用户界面？

编辑：

澄清一下，游戏结束提示包括覆盖场景的褪色背景、文本后面作为提示框的矩形、游戏结束标题的标签、当前分数、最高分数、再次播放按钮、返回菜单等。

代码如此之大的原因是每个组件几乎都是这样创建的

let gameOverNode = SKNode()
    gameOverNode.position = CGPoint(x: 0, y: screenSize.height / 16)
addChild(gameOverNode)

// Faded Background    
let fadedBackgroundNode = SKShapeNode(rectOf: screenSize)
    fadedBackgroundNode.fillColor = UIColor(red: 0/255, green: 0/255, blue: 0/255, alpha: 0.6)
    fadedBackgroundNode.zPosition = 1
    fadedBackgroundNode.position = CGPoint(x: -gameOverNode.position.x, y: -gameOverNode.position.y)
gameOverNode.addChild(fadedBackgroundNode)

// Prompt Background
let gameOverGradientNode = SKShapeNode(rectOf: gameOverGradientNodeSize, cornerRadius: gameOverGradientCornerRadius)
    gameOverGradientNode.fillColor = .white
    gameOverGradientNode.strokeColor = .clear
            
let gameOverCropNode = SKCropNode()
    gameOverCropNode.maskNode = gameOverGradientNode
    gameOverCropNode.addChild(helper.getBackgroundNode2(nodeSize: gameOverGradientNode.frame.size))
    gameOverCropNode.zPosition = 2
gameOverNode.addChild(gameOverCropNode)

// Title Label
let gameOverLabel = SKLabelNode(fontNamed: "")
    gameOverLabel.name = "gameOverLabel"
    gameOverLabel.text = "Game Over"
    gameOverLabel.position = CGPoint(x: 0, y: gameOverGradientNode.frame.height / 4 + gameOverGradientNode.frame.height / 8)
    gameOverLabel.fontSize = 160
    gameOverLabel.fontColor = .white
    gameOverLabel.zPosition = 3
    gameOverLabel.numberOfLines = 2
    gameOverLabel.horizontalAlignmentMode = .center
gameOverNode.addChild(gameOverLabel)

标签： sprite-kit

解决方案

推荐阅读