The tvOS version of the Story Tellers Starter Kit is ready!

The tvOS version of the Story Tellers Starter Kit is ready!
November 6, 2015 Justin at CartoonSmart

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)…

tvOS Starter Kit Image 3

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)…

tvOS Array Property

… 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.

tvOS starter kit initial selection


Swipe Events

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!

Swipe events in the tvOS starter kit


Tap Events

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….

Tap Events in the tvOS Starter Kit

You can find this example, in the Starter Kit. Tapping around the remote will push the lady bug around the screen.

tvOS Starter Kit Image 2

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.

Press Events in the tvOS Starter Kit


 

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….

Panning Example in the tvOS Starter Kit2

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….

Screen Shot 2015-11-06 at 10.30.20 AM

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.

Menu Button on tvOS

You can also just exclude this property altogether and let the Menu button always back out to the main menu directly.

Never lose your place.

Sign up for the newsletter to get a free CartoonSmart account and track your progress in every course.

I'm cool. Sign me up!