How to guide tvOS focus items for curved SKNodes

Question

My tvOS app generates a game board using SKNodes that looks like the following:

Each shape, separated by lines, is an SKNode that is focusable (e.g. each colored wedge is composed of 5 SKNodes that gradually diminish in size closer to the center).

My problem is that the focus engine doesn't focus the next focus item (SKNode) that would feel like the logical, most natural next node to focus. This issue is because the focus engine logic is rectangular while my SKNodes are curved. As you can see below, there are inherent problems when trying to figure out the next focusable item when swiping down from the outermost yellow SKNode:

In the example above, the focus engine deducts that the currently focused area is the area within the red-shaded rectangle based on the node's edges. Due to this logic, the focused rectangle overlaps areas that are not part of the currently focused node, including the entire width of the second yellow SKNode. Therefore when swiping downward, the focus engine skips focus to the third (middle) yellow SKNode.

How would one go about solving this focus issue so that focus is more natural both vertically and horizontally for my circular game board of SKNodes without seeming so sporadic? Is this possible? Perhaps with UIFocusGuides?

Disable the sprites that you do not want to be focus-able, (Basically if it is not next to the sprite already in focus, then do not allow it to have focus — Knight0fDragon, Jun 06 '17 at 13:02
I think you're going to have to give up on using the focus system, and instead interpret the user input based on current selection, manually. No fun at all. — Confused, Jun 08 '17 at 21:09
@Confused, no he does not need to give it up, he just needs to put some work into making sure every node knows it's neighbors. It is 100% possible, just not worth the time to write all the code to make an answer. He can also break his slices into smaller chunks to ensure there is no overlapping. — Knight0fDragon, Jun 12 '17 at 19:35
@Knight0fDragon You're right. I opened a bounty on this but I've since decided to apply your suggestion. I just need to get creative with some coordinate logic to make sure certain nodes surrounding the currently selected node are focusable while the rest are not in an elegant and inexpensive way. — Aaron, Jun 12 '17 at 19:44
Aaron, just assign every slice a unique index, and have some kind of rule set up in your code like slice[3] = [1,2,4,8] meaning that only slices 1,2,4,and 8 can be touched by 3 — Knight0fDragon, Jun 12 '17 at 19:49
That would be a great idea for the example I posted above but there will have to be some dynamic focusable index generation involved as the number of wedges and rings will be able to vary. Your suggestion of determining which nodes should be focusable still stands though. I appreciate the feedback! — Aaron, Jun 12 '17 at 20:30
Dynamic objects can still be applied, you just need to adjust your rules to allow more indexes — Knight0fDragon, Jun 13 '17 at 11:50

score 0 · Answer 1 · edited Jun 30 '19 at 21:41

You have to handle the focus manually. Use the methods listed below to check for the next focused view from the context.

func shouldUpdateFocus(in context: UIFocusUpdateContext) -> Bool

In this method, you will get the focus heading direction (UIFocusHeading). Intercept the required direction and save your required next focused view in some property. Manually update the focus by calling below methods

setNeedsFocusUpdate()

updateFocusIfNeeded()

This will trigger the below

preferredFocusEnvironments: [UIFocusEnvironment] { get }

In this check for saved instance, and return the same. This will help you handle the focus manually as per your requirements.

How to guide tvOS focus items for curved SKNodes

1 Answers1