HOW TO: Tappable choices

Tappable choices are a choice but instead of clicking on the text choice you click on something on screen.
Most amazing stories use them e.g. College-ish, Something Wicked, Love On Fire and many more.

So how do I create them?

It’s actually quite simple.

All you need to do is create an overlay of what the readers will tap. For example, I made a code where the reader chooses where to hide a new outfit from her mum, so I made 3 “buttons”.
34 46 59

Then you just put them where you want them in your scene

Example

@overlay 5132039566458880_CUPBOARDBUTTON shifts to 193 172 in zone 2
@overlay 5132039566458880_CUPBOARDBUTTON scales to 0.383 0.383
@overlay 5132039566458880_BEDBUTTON shifts to 112 20 in zone 1
@overlay 5132039566458880_BEDBUTTON scales to 0.383 0.383
@overlay 5132039566458880_BOOKSBUTTON shifts to 94 196 in zone 3
@overlay 5132039566458880_BOOKSBUTTON scales to 0.383 0.383

Now to make it tappable

So you create a piece of code as you would normally create a normal choice but instead of the word choice you need to put tappable

Example

tappable
“BEDBUTTON” {
code here
}
“CUPBOARDBUTTON” {
code here
}
“BOOKSBUTTON” {
code here
}

REMEMBER

Remember to call the choices the overlay name or else it won’t work.

Dragging the screen around

In some stories you will have tappable choices but you drag the screen around to find the choices. Envy uses this. To create it simply add [pan:1:3] next to the word tappable

REMEMBER
The numbers mean where you can drag to, so if you put 1:3 the reader can drag the screen from zones 1 to 3. If you put 2:3 the reader can drag the screen from zones 2 to 3.

Complete example

INT. PHILADELPHIA BEDROOM - DAY with BOOKSBUTTON with CUPBOARDBUTTON with BEDBUTTON
@zoom reset
@CHARACTER spot 1.141 55 83 AND CHARACTER faces right
@overlay 5132039566458880_CUPBOARDBUTTON shifts to 193 172 in zone 2
@overlay 5132039566458880_CUPBOARDBUTTON scales to 0.383 0.383
@overlay 5132039566458880_BEDBUTTON shifts to 112 20 in zone 1
@overlay 5132039566458880_BEDBUTTON scales to 0.383 0.383
@overlay 5132039566458880_BOOKSBUTTON shifts to 94 196 in zone 3
@overlay 5132039566458880_BOOKSBUTTON scales to 0.383 0.383

@overlay 5132039566458880_CUPBOARDBUTTON moves to layer 9
@overlay 5132039566458880_BEDBUTTON moves to layer 9
@overlay 5132039566458880_BOOKSBUTTON moves to layer 9
@CHARACTER moves to layer 100

    NARRATOR
Drag the screen to find a place to hide your new outfit.

label tappable_choice_1

@zoom reset

@speechbubble is 0 0 to 0%.

    NARRATOR
This speech is hidden.

tappable [pan:1:3]
“BOOKSBUTTON”{
code here

@speechbubble reset

NARRATOR
Are you sure you want to hide it here?

“Yes, this place is perfect.”{
goto tappable_choice_end
}
“Actually, let me look again.”{
goto tappable_choice_1
}
}

“BEDBUTTON”{
your code here

@speechbubble reset

NARRATOR
Are you sure you want to hide it here?

“Yes, this place is perfect.”{
goto tappable_choice_end
}
“Actually, let me look again.”{
goto tappable_choice_1
}
}
“CUPBOARDBUTTON”{
code here

@speechbubble reset

NARRATOR
Are you sure you want to hide. it here?

“Yes, this place is perfect.”{
goto tappable_choice_end
}
“Actually, let me look again.”{
goto tappable_choice_1
}
}

Don’t forget that you can add zooms, spot directing and gains to make your story look even more professional.

7 Likes

There’s also a very detailed guide here on tappable overlays: A Basic Guide to Tappable Overlays :blob_sun:

3 Likes

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.