How to Create an Interactive Children’s Book for the iPad

With the iPad, it’s never been a better time to be a kid!

The iPad allows developers to create beautiful interactive children’s books that simply cannot be replicated in any other medium. For some examples, check out The Monster at the End of This Book, Bobo Explores Light, and Wild Fables.

In the old days, developers had to use third party frameworks like Cocos2d to get the job done. But now, Apple has provided their own 2D framework called Sprite Kit, which is perfect for creating these types of books.

In this tutorial, you’ll create an interactive children’s book using the Sprite Kit framework, where you’ll learn how to add objects to scenes, create animation sequences, allow the reader to interact with the book and even how to add sound and music to your book!

This tutorial assumes you are familiar with at least the basics of Sprite Kit. If you are new to Sprite Kit, please check out our Sprite Kit Tutorial for Beginners first.

Getting Started

First download the starter project for this tutorial. Extract the project to a convenient location on your drive, then open it up in Xcode for a quick look at how it’s structured.

The project’s contents are collected in four main folders, as shown below:

1. Other Resources: this contains all resources from third-party sources.
2. Sounds: this contains most of the project’s sound files.
3. Art: this contains all of the creative image assets.
4. Scenes: as you may have guessed, this contains all the classes that control the various scenes of the project.

This tutorial also uses music from Kevin MacLeod and sound effects from FreeSound. These are both great resources for your project, but you must provide attribution. See attribution.txt for more details.

Remember, kids… only you can prevent copyright theft. Oh, and forest fires too, according to Smokey the Bear.

Close the Other Resources, Sounds, and Art groups; you won’t be making any changes in those areas. You’ll only be working with the “Scene*” files located in the Scenes group.

Like any good book, it’s best to start at the beginning. The next section will walk you through the “title” scene for your book.

Adding the Title Page

The starter project provides stub versions of the methods used in this scene — it’s your job to add the code. Your first steps will be to initialize the scene and add a background image.

Open the Scene00.m file and add the following block of code to initWithSize: just after the comment that reads /* add setup here */:

SKSpriteNode *background = [SKSpriteNode spriteNodeWithImageNamed:@"bg_title_page"];
background.anchorPoint = CGPointZero;
background.position = CGPointZero;
        
[self addChild:background];

The code above creates an SKSpriteNode object and initializes it using the spriteNodeWithImageNamed: class method. It then sets the background‘s anchorPoint to CGPointZero which is the lower left corner of the scene.

Next, it sets the background‘s position to CGPointZero, which is the lower left corner of the screen. Finally, it uses the addChild: class method to add the newly created node as a child of the SKScene.

Still working in the same file, add the following two lines of code to initWithSize: immediately after the call to addChild::

[self setUpBookTitle];
[self setUpSoundButton];

The two methods called here are only shells at the moment; you’ll flesh them out in the next section.

Build and run your project; you should see the title page as illustrated below:

Adding the Book Title

As you saw in the code above, it’s a straightforward operation to add an SKSpriteNode to your scene. With just a few lines of code, you can add a textured sprite to any scene.

Now that the background image has been added, you’ll need to add the book title. You could use an SKLabelNode to add your title, or even a UIView, but instead I’ve opted to use a graphic.

Still working in the Scene00.m file, add the following block of code to setUpBookTitle:

SKSpriteNode *bookTitle = [SKSpriteNode spriteNodeWithImageNamed:@"title_text"];
bookTitle.name = @"bookTitle";

bookTitle.position = CGPointMake(421,595);
[self addChild:bookTitle];

In the above code, you first create an SKSpriteNode and then initialize it using spriteNodeWithImageNamed:. You then name the node “bookTitle” for ease of reference later, and set the node’s position to something other than CGPointZero.

Why? Since the background image takes up the entire view, you can get away with positioning it in the bottom-left corner of the screen. The title image, on the other hand, must be positioned precisely where you want it.

Build and run your project; you’ll see your background image with the graphic title superimposed over it, as shown below:

That looks pretty neat. But wouldn’t it be great if you could add a little bit of action to your title screen?

Adding Animation to Objects

Sprite Kit makes it easy to add animation to the objects in your scene. Instead of simply having the title appear on the screen, you can make it slide on to the screen and bounce a little bit before it comes to rest.

To do this, you’ll use SKAction objects with predefined sequences.

Head back to Scene00.m and add the following code to the end of setUpBookTitle:

SKAction *actionMoveDown = [SKAction moveToY:600 duration:3.0];
SKAction *actionMoveUp = [SKAction moveToY:603 duration:0.25];
SKAction *actionMoveDownFast = [SKAction moveToY:600 duration:0.25];

[bookTitle runAction:[SKAction sequence:@[actionMoveDown, actionMoveUp, actionMoveDownFast]]];

The above code creates three actions using SKAction‘s class method moveToY:duration:; this specifies an action that moves a node vertically from its original position to the specified y position. Next, it creates a new sequence action using SKAction‘s sequence: class method; this instructs bookTitle to run the specified array of actions in order.

The net result of these actions is that the sprite will move the sprite down, then up, and then down again before it comes to rest.

Next, modify the line in setUpBookTitle that sets bookTitle‘s position property as shown below:

bookTitle.position = CGPointMake(425,900);

This simply modifies the start position of the title image so that it starts off-screen.

Build and run your project; the title now slides in slowly and bounces a little before it comes to rest at the position specified in actionMoveDownFast.

Actions are great, but sounds are an integral part of any interactive children’s book. Sprite Kit makes this tremendously easy as well!