Tutorial 12 – Building a Book with the Story Tellers Kit – Using Camera Roll Images and Generating Elements at Runtime

Build a Book with the Story Tellers Kit

Tutorial 12 – Using Camera Roll Images and Generating Elements at Runtime

In this video we’ll discuss how to use photos from the device’s Camera Roll or take new photos to replace a placeholder image on the page. This allows readers the option to include their own images as part of the book. These photos can be masked, so only part of the image is showing (like the face), and will stay on the page until replaced by a different image or the app is deleted. And the photo can appear on multiple pages, or the entire book.

This video will only discuss adding buttons to pick a photo or take a new one, then add it to the page. We cover ALL the properties to adjust the masked image in a previously recorded video here.  It is possible to squash and stretch the image, move it within the mask, and even save a screenshot of the page to the camera roll, but for this demo, we wanted to save some time to discuss generating Elements at runtime.

As you can see in the video, you can generate (or clone) any Element in the scene. This includes all the Element’s properties setup via the Property List and Attribute Inspector, as well as any SKActions applied via the Scene Editor’s timeline. In our example, the Element is a draggable wrench floating around in space. Once the initial element is created, we can begin generating duplicates. The duplicates are positioned offset from the original (which is offscreen) and float past the astronaut. If the user drags the wrench to the astronaut, it disappears and the spaceman does a little animation. This part is setup via an Event Listener, which detects the intersection of any wrench and an invisible Element named Trash.