The tvOS version of the Story Tellers Starter Kit is ready!
Yearly subscribers and Lifetime Access buyers of the Story Tellers Kit can download the tvOS version right now! Here’s some of the fun features (so far)…
Easy to setup image selection.
Obviously users can’t just touch the screen, so we have to give them a way to navigate through images using the remote. Using a simple array property (seen below)…
… we define the selection order. This is just a list of the images/buttons in the order they appear from left-to-right in the page. Then in the page’s Settings dictionary, you’ll set a number of Columns (if you have enough buttons to require columns). By setting the Columns value, the kit will know that swiping up would jump from the 5th button to the 2nd, and so on. You can also set a property named WrapAroundSelection to NO or YES which will allow or disallow going from the first button to the 9th if the user swiped up.
So you might be wondering then, how do you tell the kit to select something in the up, down, left or right directions? Well that’s easy! Simply create a dictionary called SwipeUpEvents, SwipeDownEvents, SwipeLeftEvents or SwipeRightEvents, then add ANY events you want to occur when swiping. Keep in mind, in the SwipeUpEvents example below, it simply lists SelectUp (which would select a button in the up direction), but you can put anything in here. Play sounds, swipe to new pages, run animations, anything is possible!
Tap events are setup the same as swipe events. So you have 4 possible dictionaries, TapLeftEvents, TapRightEvents, TapUpEvents and TapDownEvents. Each of these can have an unlimited number of events. In the example, below, we are adding a little force to a physics object to move it around….
You can find this example, in the Starter Kit. Tapping around the remote will push the lady bug around the screen.
And keep in mind, these are gentle taps on the remote’s touch pad, not a full on press down. Those properties are next…
Pressing down on the Remote and pressing the Play/Pause button
Again, you can add as many event properties as you wish to these two dictionaries. In the example below, pressing the Remote touch pad, goes back to the Cover page.
Moving / Panning with the Remote
The iOS version of the kit includes a convenient option for panning (moving images based on the users touch across the screen). We wanted to keep this nice simple option, so its been adapted for the touch remote. Using the same properties as before, you can list items to pan on the x or y axis like so….
In this example, only a LadyBug image is moving, but you can list as many items as you want to pan (switch from String to Array to list more). Now if the user pans their finger around the remote’s surface it will move the LadyBug. If you want to change how much the image moves in relation to the fingers, we’ve added two new properties in the page’s Settings dictionary for that, PanMultiplierX and PanMultiplierY….
Increasing those values moves the images at a faster rated.
The Menu Button
The menu button in tvOS is reserved for stepping backward through your app. So for example, if the user was on Page 10, the menu button should probably take them back to the Cover page, and if they pressed it again, it should back them out to the main menu of the TV. Going back to the main Apple TV menu is what happens by default if you don’t specifically code the menu button to do something. And that is required by Apple, so users can leave your app. So you can set a property called PressingMenuOpensPage, and define the page to back out to. So in the example page Settings below, we are telling the app to go back to the Cover page if the Menu is pressed. But on the Cover page itself, we would not want to include this property.
You can also just exclude this property altogether and let the Menu button always back out to the main menu directly.