top of page

Tappable overlays are technically still in beta testing, but everyone is free to try them out.

​

  • Readers are now able to tap on the screen in the same way you would tap on a choice, but instead of choice bubble, you would tap on overlays.

  • In order to understand tappable overlays, you must first be very familiar with how overlays work. Click the button below to learn how to place and animate overlays.

Setting a Tappable

​

tappable

"OVERLAY_1" {

​

} "OVERLAY_2" {

​

}

​

  • To set a tappable, use the same exact coding as a choice, but replace the word "choice" with "tappable"

  • Instead of option titles, you will use the overlay names in all capital letters.

  • Unlike a choice, you do not need to have dialogue to set a tappable.

  • All overlays must be onscreen in order to be tapped.

  • Overlays cannot be stacked on top of each other. The top layered overlay will be the only available overlay to tap.

  • The overlay will darken once tapped.

  • Overlays can have an opacity of 0 (invisble onscreen) and still be available to tap. You can layer an invisible overlay over a character or a certain spot on a background and readers would be able to tap that character/spot.

  • The tappable area of an overlay is the rectangle around the entire overlay, which includes the transparent background of the overlay's PNG image.

  • You CANNOT invert the scale size of a tappable overlay. Doing this will result in the overlay being un-tappable.

​

​

​

Using Tappable "else"

​

  • If you'd like to set a condition where no overlays are tapped, you can use the "else" option.

 

tappable

"OVERLAY_1" {

NARRATOR

You tapped on option 1.

​

} "OVERLAY_2" {

NARRATOR

You tapped on option 2.

​

} else {

NARRATOR

You did not tap on either option.

}

​

​

​

Using "ui" to Pin-to-Camera

​

@ui OVERLAY_NAME create

@ui OVERLAY_NAME shifts to 50 100

@ui OVERLAY_NAME scales to 1.0 1.0

@ui OVERLAY_NAME opacity 1

​

  • You can pin an overlay to the "camera" where the overlay will stay on the screen in the same spot even in you pan to another zone or zoom into a spot.

  • To do this, use "ui" in place of the word "overlay"

  • A "ui" works in the exact same way as an overlay.

  • You can create it, shift it, scale it, change the opacity, clear it, and even duplicate it.

  • You can also use it for text overlays and for tappables.

  • Changing the background will remove the "ui" overlays just like with regular overlays.

  • "ui" overlays placed at top or bottom of screens will not be visible to readers using tablets.

  • You do not need to add a zone number to the "ui" shift command. ui's are defaulted to zone 1. Placing a ui in a different zone will make them be offscreen. Since ui's are "pinned" to the "camera", if you place a ui in a different zone, you will never see the overlay even if you pan or cut to the other zones.

​

​

​

Panning Tappables

​

tappable [pan:1:2]

"OVERLAY_NAME" {

}

​

  • You can now drag the screen around through the zones during a tappable choice.

  • Use the tappable "pan" command, where 1:2 means the reader can pan anywhere between zones 1 and 2. If you want readers to drag the screen between zones 2 and 3, you woud use [pan:2:3]

  • Once an overlay is tapped, the panning between zones will stop.

​

​

tappable [pan:1:2:hor]

​

tappable [pan:1:2:ver]

​

  • Add ":hor" or ":ver" to limit the reader to horizontal or vertical panning/scrolling.

  • You must be zoomed in to vertical scroll.

​

bottom of page