SpriteKit 中的滚动视图 [英] ScrollView in SpriteKit

问题描述

我发现了一些与此类似的其他问题和答案，但没有一个非常适合我.

I have found a few other questions and answers similar to this, but none of them quite work perfect for me.

我的愿景是在屏幕底部有一个水平滚动视图，我可以在其中滚动查看看起来像是手中的卡片的内容.理想情况下，我最终可以将中间的卡片放大一点，并使其突出显示以向用户显示选择了哪张卡片.如果我能弄清楚如何保持滚动视图调整大小以调整视图中精灵(卡片)的数量，那就更好了.

My vision is to have a horizontal scrollable view at the bottom of the screen where I can scroll through what will look like cards in a hand. Ideally, I could eventually make the card in the middle scaled up a bit and give it a highlighted look to show the user which card is selected. Even better would be if I could figure out how to keep the scroll view resizing to fir the number of sprites (cards) in the view.

无论如何，我对 XCode 和 Swift 还是很陌生，所以我很难接受我找到的东西并对其进行更改.但是，我希望能快点学习.

Anyways, I am still very new to XCode and Swift, so it is hard for me to take what I find and change it. But, I am hoping to learn fast.

到目前为止，我所了解的是 UIScrollView 可以覆盖场景，并且使用可移动的 spritenode 我可以滚动视图.然后视图会以某种方式将坐标转换为 SpriteKit 场景，以移动看起来像在视图中的精灵.我认为这就是它的工作原理.任何帮助都会很棒.我很困.<3

What I understand so far is that a UIScrollView could overlay the scene and with a moveable spritenode I could scroll through the view. The view would then translate the coordinates somehow to the SpriteKit Scene to move the sprites that will look like they are in the view. I think that's how it works. Any help would be great. I am pretty stuck. <3

推荐答案

您必须使用全局/成员变量在 touchesMoved() 中创建自己的逻辑.

You have to make your own logic that takes place in touchesMoved() using a global/member variable.

不幸的是，很多游戏开发和 SK 都是数学和逻辑.你必须提出自己的问题和解决方案.没有手册，因为编程和 Swift 的可能性是无穷无尽的 :)

Unfortunately, a lot of gamedev and SK is math and logic.. You have to come up with your own problems and solutions.. There is no manual because the possibilities in programming and Swift are endless :)

基本上，您将每个 touch 位置与最后一个位置进行比较，这将成为您可以用来执行操作的增量值".

Basically, you compare each touch location to the last one, and this becomes a "delta value" that you can use to perform actions.

例如，如果我触摸屏幕的中心，我的触摸位置是 0,0(或您的锚点设置的任何值).如果我向右移动手指，那么我现在是 25、0... 这会产生 +25x 的增量值".

Example, if I touch in the center of the screen, my touch location is 0,0 (or whatever your anchorpoint is set to). If I move my finger right, then I'm now at say 25, 0... This creates a "delta value" of +25x.

使用该 delta 值，您可以对所有卡片执行各种操作，例如 moveBy...所以如果我的 deltaX 为 +25，那么我需要移动所有卡片节点向右(一定数量，您将根据自己的喜好确定).如果我的 deltaX 为 -25，我将卡片向左移动一定量.

With that delta value, you can perform various actions such as moveBy for all the cards... so if I have a deltaX of +25, then I need to move all of the card nodes to the right (by a certain amount that you will determine according to your preferences). If I have a deltaX of -25, I move the cards to the left by a certain amount.

实际移动的位置由你决定——你可以在 update() 或 touchesMoved() 中放置一个函数，不断将卡片移动到某个方向以该 deltaX 值的一定比率..

Where you do the actual moving is up to you--you could put a function in update() or touchesMoved() that constantly moves the cards a certain direction at a certain rate of that deltaX value..

好吧，那是一口……也许这会有所帮助:

Ok that was a mouthful... Maybe this will help:

for touch in touches {
   myGlobalDeltaX = myDeltaXFunc(currentTouch: touch)
   myMoveFunc(cards: allTheCards, byDeltaX: myGlobalDeltaX)

- 您可以搜索如何制作 Delta 函数，但它实际上与代数中的相同.
- myMoveFunc 可以像遍历所有卡节点然后同时在它们上运行 .moveBy 一样简单.

- You can search on how to make a Delta function, but it really is just the same thing from Algebra.
- myMoveFunc can be something as simple as iterating through all of your card nodes then running .moveBy on them at the same time.

要检测哪张卡在中心，您可以在 touchesEnded() 或 update() 中调用以检查节点的名称/身份屏幕中心......就像

To detect which card is in the center, you would put in touchesEnded() or update() a call to check the name / identity of the node in the center of the screen... so something like

// `self` here refers to your GameScene class' instance, which is just an `SKScene` object
let centerX = self.frame.midX
let centerY = self.frame.midY
let center = CGPoint(x: centerX, y: centerY)

let centerNode = self.nodes(at: center)

您显然希望将 centerX 和 centerY 更改为您希望中间卡所在的位置 :) 现在，这只是在屏幕的中心位置.

You would obviously want to change centerX and centerY to wherever it is you want the middle card to be :) Right now, this is just in the dead-center of the screen.

一旦你有了一个centerNode，你只需要执行你创建的任何函数来选择"它.

Once you have a centerNode, you would then just need to do whatever function you have created to "select" it.

let selectedCard = centerNode
mySelectionFunc(middleCard: selectedCard)

这可能看起来很多，但我绘制了一些步骤以便更容易理解它.如果需要，您可以在一行中完成所有这些.

This may look like a lot, but I drew out the steps to make understanding it a bit easier.. You can do all of this in one line if desired.

mySelectionFunc(middleCard: self.nodes(at: CGPoint(x: self.frame.x, y: self.frame.y)))

希望对大家有所帮助！

这篇关于SpriteKit 中的滚动视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！