关于swift：如何在spritekit中创建垂直滚动菜单？


How to create a vertical scrolling menu in spritekit?

我希望在我的游戏(在 SpriteKit 中)中创建一个带有按钮和图像的商店，但我需要这些项目是可滚动的，以便玩家可以上下滚动商店(像 UITableView 但有多个 SKSpriteNodes和每个单元格中的 SKLabelNodes)。知道如何在 SpriteKit 中做到这一点吗？

相关讨论

第二个答案如约而至，我才发现问题。

我建议始终从我的 gitHub 项目中获取此代码的最新版本，以防我在此答案后进行了更改，链接在底部。

步骤 1：创建一个新的 swift 文件并粘贴此代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
import SpriteKit

/// Scroll direction
enum ScrollDirection {
    case vertical // cases start with small letters as I am following Swift 3 guildlines.
    case horizontal
}

class CustomScrollView: UIScrollView {

// MARK: - Static Properties

/// Touches allowed
static var disabledTouches = false

/// Scroll view
private static var scrollView: UIScrollView!

// MARK: - Properties

/// Current scene
private let currentScene: SKScene

/// Moveable node
private let moveableNode: SKNode

/// Scroll direction
private let scrollDirection: ScrollDirection

/// Touched nodes
private var nodesTouched = [AnyObject]()

// MARK: - Init
init(frame: CGRect, scene: SKScene, moveableNode: SKNode) {
    self.currentScene = scene
    self.moveableNode = moveableNode
    self.scrollDirection = scrollDirection
    super.init(frame: frame)

    CustomScrollView.scrollView = self
    self.frame = frame
    delegate = self
    indicatorStyle = .White
    scrollEnabled = true
    userInteractionEnabled = true
    //canCancelContentTouches = false
    //self.minimumZoomScale = 1
    //self.maximumZoomScale = 3

    if scrollDirection == .horizontal {
        let flip = CGAffineTransformMakeScale(-1,-1)
        transform = flip
    }
}

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

// MARK: - Touches
extension CustomScrollView {

/// Began
override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {

    for touch in touches {
        let location = touch.locationInNode(currentScene)

        guard !CustomScrollView.disabledTouches else { return }

        /// Call touches began in current scene
        currentScene.touchesBegan(touches, withEvent: event)

        /// Call touches began in all touched nodes in the current scene
        nodesTouched = currentScene.nodesAtPoint(location)
        for node in nodesTouched {
            node.touchesBegan(touches, withEvent: event)
        }
    }
}

/// Moved
override func touchesMoved(touches: Set<UITouch>, withEvent event: UIEvent?) {

    for touch in touches {
        let location = touch.locationInNode(currentScene)

        guard !CustomScrollView.disabledTouches else { return }

        /// Call touches moved in current scene
        currentScene.touchesMoved(touches, withEvent: event)

        /// Call touches moved in all touched nodes in the current scene
        nodesTouched = currentScene.nodesAtPoint(location)
        for node in nodesTouched {
            node.touchesMoved(touches, withEvent: event)
        }
    }
}

/// Ended
override func touchesEnded(touches: Set<UITouch>, withEvent event: UIEvent?) {

    for touch in touches {
        let location = touch.locationInNode(currentScene)

        guard !CustomScrollView.disabledTouches else { return }

        /// Call touches ended in current scene
        currentScene.touchesEnded(touches, withEvent: event)

        /// Call touches ended in all touched nodes in the current scene
        nodesTouched = currentScene.nodesAtPoint(location)
        for node in nodesTouched {
            node.touchesEnded(touches, withEvent: event)
        }
    }
}

/// Cancelled
override func touchesCancelled(touches: Set<UITouch>?, withEvent event: UIEvent?) {

    for touch in touches! {
        let location = touch.locationInNode(currentScene)

        guard !CustomScrollView.disabledTouches else { return }

        /// Call touches cancelled in current scene
        currentScene.touchesCancelled(touches, withEvent: event)

        /// Call touches cancelled in all touched nodes in the current scene
        nodesTouched = currentScene.nodesAtPoint(location)
        for node in nodesTouched {
            node.touchesCancelled(touches, withEvent: event)
        }
     }
   }
}

// MARK: - Touch Controls
extension CustomScrollView {

     /// Disable
    class func disable() {
        CustomScrollView.scrollView?.userInteractionEnabled = false
        CustomScrollView.disabledTouches = true
    }

    /// Enable
    class func enable() {
        CustomScrollView.scrollView?.userInteractionEnabled = true
        CustomScrollView.disabledTouches = false
    }
}

// MARK: - Delegates
extension CustomScrollView: UIScrollViewDelegate {

    func scrollViewDidScroll(scrollView: UIScrollView) {

        if scrollDirection == .horizontal {
            moveableNode.position.x = scrollView.contentOffset.x
        } else {
            moveableNode.position.y = scrollView.contentOffset.y
        }
    }
}

这将创建一个 UIScrollView 的子类并设置它的基本属性。它有自己的 touches 方法，可以传递到相关场景。

步骤 2：在您想要使用它的相关场景中，您创建一个滚动视图和可移动节点属性，如下所示

1
2
weak var scrollView: CustomScrollView!
let moveableNode = SKNode()

并在 didMoveToView

中将它们添加到场景中

1
2
3
4
5
6
scrollView = CustomScrollView(frame: CGRect(x: 0, y: 0, width: self.frame.size.width, height: self.frame.size.height), scene: self, moveableNode: moveableNode, scrollDirection: .vertical)
scrollView.contentSize = CGSizeMake(self.frame.size.width, self.frame.size.height * 2)
view?.addSubview(scrollView)


addChild(moveableNode)

您在第 1 行中所做的是使用场景尺寸初始化滚动视图助手。您还可以传递场景以供参考以及在步骤 2 中创建的 moveableNode。
第 2 行是您设置滚动视图的内容大小的地方，在这种情况下，它是屏幕高度的两倍。

Step3: - 添加标签或节点等并定位它们。

1
2
label1.position.y = CGRectGetMidY(self.frame) - self.frame.size.height
moveableNode.addChild(label1)

在此示例中，标签将位于滚动视图的第二页。这是您必须使用标签和定位的地方。

如果您在滚动视图中有很多页面并且有很多标签，我建议您执行以下操作。为滚动视图中的每个页面创建一个 SKSpriteNode，并使每个页面的大小与屏幕相同。将它们称为 page1Node、page2Node 等。您可以将第二页上的所有标签添加到 page2Node。这里的好处是你基本上可以像往常一样在 page2Node 中放置所有东西，而不仅仅是在 scrollView 中放置 page2Node。

你也很幸运，因为垂直使用滚动视图(你说你想要的)你不需要做任何翻转和反向定位。

我做了一些类函数，所以如果你需要禁用你的滚动视图，以防你在滚动视图上覆盖另一个菜单。

1
2
CustomScrollView.enable()
CustomScrollView.disable()

最后不要忘记在过渡到新场景之前从场景中移除滚动视图。在 spritekit 中处理 UIKit 时的痛苦之一。

1
scrollView?.removeFromSuperView()

对于水平滚动，只需将 init 方法上的滚动方向更改为 .horizo??ntal(步骤 2)。

现在最大的痛苦是在放置东西时一切都颠倒了。所以滚动视图从右到左。所以你需要使用scrollView"contentOffset"方法来重新定位它，并且基本上从右到左以相反的顺序放置你的所有标签。一旦您了解发生了什么，再次使用 SkNodes 会使这变得容易得多。

希望这对这篇庞大的帖子有所帮助和抱歉，但正如我所说，这对 spritekit 来说有点痛苦。如果我错过了什么，请告诉我。

项目在 gitHub

https://github.com/crashoverride777/SwiftySKScrollView

相关讨论

你有两个选择

1) 使用 UIScrollView

在未来，这是更好的解决方案，因为您可以免费获得诸如动量滚动、分页、反弹效果等内容。但是，您必须使用大量 UIKit 东西或进行一些子类化以使其与 SKSpritenodes 或标签一起使用。

在 gitHub 上查看我的项目以获取示例

https://github.com/crashoverride777/SwiftySKScrollView

2) 使用 SpriteKit

1
2
3
4
Declare 3 class variables outside of functions(under where it says 'classname': SKScene):
var startY: CGFloat = 0.0
var lastY: CGFloat = 0.0
var moveableArea = SKNode()

设置您的 didMoveToView，将 SKNode 添加到场景并添加 2 个标签，一个用于顶部，一个用于底部以查看它的工作原理！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
override func didMoveToView(view: SKView) {
    // set position & add scrolling/moveable node to screen
    moveableArea.position = CGPointMake(0, 0)
    self.addChild(moveableArea)

    // Create Label node and add it to the scrolling node to see it
    let top = SKLabelNode(fontNamed:"Avenir-Black")
    top.text ="Top"
    top.fontSize = CGRectGetMaxY(self.frame)/15
    top.position = CGPoint(x:CGRectGetMidX(self.frame), y:CGRectGetMaxY(self.frame)*0.9)
    moveableArea.addChild(top)

    let bottom = SKLabelNode(fontNamed:"Avenir-Black")
    bottom.text ="Bottom"
    bottom.fontSize = CGRectGetMaxY(self.frame)/20
    bottom.position = CGPoint(x:CGRectGetMidX(self.frame), y:0-CGRectGetMaxY(self.frame)*0.5)
    moveableArea.addChild(bottom)
}

然后设置你的触摸开始存储你第一次触摸的位置：

1
2
3
4
5
6
7
override func touchesBegan(touches: NSSet, withEvent event: UIEvent) {
    // store the starting position of the touch
    let touch: AnyObject? = touches.anyObject();
    let location = touch?.locationInNode(self)
    startY = location!.y
    lastY = location!.y
}

然后设置使用以下代码移动的触摸，以设置的速度将节点滚动到设置的限制：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
override func touchesMoved(touches: NSSet, withEvent event: UIEvent) {
    let touch: AnyObject? = touches.anyObject();
    let location = touch?.locationInNode(self)
    // set the new location of touch
    var currentY = location!.y

    // Set Top and Bottom scroll distances, measured in screenlengths
    var topLimit:CGFloat = 0.0
    var bottomLimit:CGFloat = 0.6

    // Set scrolling speed - Higher number is faster speed
    var scrollSpeed:CGFloat = 1.0

    // calculate distance moved since last touch registered and add it to current position
    var newY = moveableArea.position.y + ((currentY - lastY)*scrollSpeed)

    // perform checks to see if new position will be over the limits, otherwise set as new position
    if newY < self.size.height*(-topLimit) {
        moveableArea.position = CGPointMake(moveableArea.position.x, self.size.height*(-topLimit))
    }
    else if newY > self.size.height*bottomLimit {
        moveableArea.position = CGPointMake(moveableArea.position.x, self.size.height*bottomLimit)
    }
    else {
        moveableArea.position = CGPointMake(moveableArea.position.x, newY)
    }

    // Set new last location for next time
    lastY = currentY
}

所有功劳归于这篇文章

http://greenwolfdevelopment.blogspot.co.uk/2014/11/scrolling-in-sprite-kit-swift.html

相关讨论

我喜欢添加一个 SKCameraNode 来滚动我的菜单场景的想法。我发现这篇文章真的很有用。您只需更改相机位置即可移动菜单。在 Swift 4

1
2
3
4
5
6
7
8
9
10
var boardCamera = SKCameraNode()

override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
    for touch in touches {
        let location = touch.location(in: self)
        let previousLocation = touch.previousLocation(in: self)
        let deltaY = location.y - previousLocation.y
        boardCamera.position.y += deltaY
    }
}

这是我们用来模拟 SpriteKit 菜单的 UIScrollView 行为的代码。

基本上，您需要使用与 SKScene 的高度匹配的虚拟 UIView，然后将 UIScrollView 滚动和点击事件提供给 SKScene 进行处理。

令人沮丧的是，Apple 本身并没有提供此功能，但希望其他人不必浪费时间重建此功能！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
class ScrollViewController: UIViewController, UIScrollViewDelegate {
    // IB Outlets
    @IBOutlet weak var scrollView: UIScrollView!

    // General Vars
    var scene = ScrollScene()

    // =======================================================================================================
    // MARK: Public Functions
    // =======================================================================================================
    override func viewDidLoad() {
        // Call super
        super.viewDidLoad()

        // Create scene
        scene = ScrollScene()

        // Allow other overlays to get presented
        definesPresentationContext = true

        // Create content view for scrolling since SKViews vanish with height > ~2048
        let contentHeight = scene.getScrollHeight()
        let contentFrame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.size.width, height: contentHeight)
        let contentView = UIView(frame: contentFrame)
        contentView.backgroundColor = UIColor.clear

        // Create SKView with same frame as <scrollView>, must manually compute because <scrollView> frame not ready at this point
        let scrollViewPosY = CGFloat(0)
        let scrollViewHeight = UIScreen.main.bounds.size.height - scrollViewPosY
        let scrollViewFrame = CGRect(x: 0, y: scrollViewPosY, width: UIScreen.main.bounds.size.width, height: scrollViewHeight)
        let skView = SKView(frame: scrollViewFrame)
        view.insertSubview(skView, at: 0)

        // Configure <scrollView>
        scrollView.addSubview(contentView)
        scrollView.delegate = self
        scrollView.contentSize = contentFrame.size

        // Present scene
        skView.presentScene(scene)

        // Handle taps on <scrollView>
        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(scrollViewDidTap))
        scrollView.addGestureRecognizer(tapGesture)
    }

    // =======================================================================================================
    // MARK: UIScrollViewDelegate Functions
    // =======================================================================================================
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        scene.scrollBy(contentOffset: scrollView.contentOffset.y)
    }


    // =======================================================================================================
    // MARK: Gesture Functions
    // =======================================================================================================
    @objc func scrollViewDidTap(_ sender: UITapGestureRecognizer) {
        let scrollViewPoint = sender.location(in: sender.view!)
        scene.viewDidTapPoint(viewPoint: scrollViewPoint, contentOffset: scrollView.contentOffset.y)
    }
}



class ScrollScene : SKScene {
    // Layer Vars
    let scrollLayer = SKNode()

    // General Vars
    var originalPosY = CGFloat(0)


    // ================================================================================================
    // MARK: Initializers
    // ================================================================================================
    override init() {
        super.init()
    }


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


    // ================================================================================================
    // MARK: Public Functions
    // ================================================================================================
    func scrollBy(contentOffset: CGFloat) {
        scrollLayer.position.y = originalPosY + contentOffset
    }


    func viewDidTapPoint(viewPoint: CGPoint, contentOffset: CGFloat) {
        let nodes = getNodesTouchedFromView(point: viewPoint, contentOffset: contentOffset)
    }


    func getScrollHeight() -> CGFloat {
        return scrollLayer.calculateAccumulatedFrame().height
    }


    fileprivate func getNodesTouchedFromView(point: CGPoint, contentOffset: CGFloat) -> [SKNode] {
        var scenePoint = convertPoint(fromView: point)
        scenePoint.y += contentOffset
        return scrollLayer.nodes(at: scenePoint)
    }
}