Please note: this is still in BETA testing. The code may change, which would cause issues with your script in the future.
A Guide to Tappable Overlays
Hello all! Today I am going to be giving a review and guide to a new feature Episode has added, called “tappable overlays”. If you are unsure what these are – don’t worry, I’ll get into that in just a little bit.
Before that, though, I must give credit to the templates that taught me how to use tappable overlays in the first place:
Advanced Directing Guide - Tappable Overlays
Go check out this document – there are a lot of templates and examples that can help you out as well. It was truly a lifesaver, as without it – I wouldn’t even know where to start.
Now, the last thing I’m going to say before I get into the guide is to stress the point that:
Tappable overlays are still in BETA. They may not be available to everyone. If an error occurs in your script – then it was probably not released for you, yet.
Now… onto the guide:
Section #1: What are tappable overlays?
Tappable overlays are a new type of overlay that Episode has added. The name is pretty self-explanatory. This new feature allows your readers to make choices by tapping on overlays if that makes sense. In fact – tappable overlays are very similarly built like choices. We’ll get into that later.
This is the most simple use of tappable overlays, however. There is more advanced code, that I’ll discuss and guide you about later. This advanced type of code allows the reader to drag across zones themselves. This type of advanced coding was seen in stories such as “The Dragons Tail” by Mette M. Peleikis.
Section #2: Basic tappable overlays
Here is a basic code that uses the tappable overlay system:
(please note that all of the overlays and backgrounds here are straight from Episode themselves – so you are free to use them without any sort of errors or approvals)
EXT. CAMPUS GARDEN - DAY with FANCY TOTE POMERANIAN BROWN IVORY BEIGE with FANCY TOTE CAT WHITE PINK PALE
@overlay FANCY TOTE POMERANIAN BROWN IVORY BEIGE shifts to 0 264
@overlay FANCY TOTE POMERANIAN BROWN IVORY BEIGE scales to 0.838 0.838
@overlay FANCY TOTE CAT WHITE PINK PALE shifts to 126 51
@overlay FANCY TOTE CAT WHITE PINK PALE scales to 0.838 0.838NARRATOR
Pick your favorite dog!tappable
“FANCY TOTE POMERANIAN BROWN IVORY BEIGE” {NARRATOR
You chose Fluffy!
} “FANCY TOTE CAT WHITE PINK PALE” {NARRATOR
You chose Missy!
}
As you can see, the layout of tappable choices are nearly identical to the choices layout. So this basic code should be a piece of cake for anyone familiar with the choices system.
The overlays I picked were “FANCY TOTE POMERANIAN BROWN IVORY BEIGE” and “FANCY TOTE CAT WHITE PINK PALE”. These overlays are both dogs in tote bags. So as an example – I’m letting my “reader” pick their favorite dog.
I shift and scaled the overlays to the designated spots I wished them to be in – and then begun the branches.
NARRATOR
Pick your favorite dog!
tappable
“FANCY TOTE POMERANIAN BROWN IVORY BEIGE” {NARRATOR
You chose Fluffy!
} “FANCY TOTE CAT WHITE PINK PALE” {NARRATOR
You chose Missy!
}
See, the layout is exactly like choices branches. All you have to do differently is replace the “choice” label as the beginning of the code to “tappable” – and the names between the quotations MUST be the exact names as the overlay – that is not open to interpretation.
Section #3: Pannable overlays
Pannable overlays are more advanced, but still relatively simple to figure out. Here is a basic code:
(note: all of the overlays and backgrounds are still from Episode themselves – so there will be no errors or approval necessary to use in a script)
EXT. CAMPUS GARDEN - DAY with FANCY TOTE POMERANIAN BROWN TAN with FANCY TOTE CHIHUAHUA BROWN TAN with FANCY TOTE TERRIER BROWN BLACK
@overlay FANCY TOTE POMERANIAN BROWN TAN shifts to 66 129 in zone 1
@overlay FANCY TOTE POMERANIAN BROWN TAN scales to 0.928 0.928 in zone 1@overlay FANCY TOTE CHIHUAHUA BROWN TAN shifts to 66 129 in zone 2
@overlay FANCY TOTE CHIHUAHUA BROWN TAN scales to 0.928 0.928 in zone 2@overlay FANCY TOTE TERRIER BROWN BLACK shifts to 66 129 in zone 3
@overlay FANCY TOTE TERRIER BROWN BLACK scales to 0.928 0.928 in zone 3tappable [pan:1:3]
“FANCY TOTE POMERANIAN BROWN TAN” {NARRATOR You chose a pomeranian!
} “FANCY TOTE CHIHUAHUA BROWN TAN” {
NARRATOR You chose a chihuahua!
} “FANCY TOTE TERRIER BROWN BLACK” {
NARRATOR You chose a terrier!
}
This works almost the exact same as the code used in section #2. Only, instead of adding just “tappable” before the rest of the code, you type, “tappable [pan:1:3]”. Keep in mind, that the “3” represents the max amount of zones the reader will be able to drag around the screen – and the “1” represents the minimum.
Please ignore all of the @overlay commands I used at the beginning of both of these templates – I was just placing the overlays in order to make the scene more professional and easier to tap on the overlays.
However, say you only want to let the reader drag horizontally or only vertically. Here is the code you would use before the choices:
Vertical:
tappable [pan:1:3:ver] “OVERLAY” {
}
Horizontal:
tappable [pan:1:3:hor] “OVERLAY” {
}
Section #4: Text overlays
Text overlays are a new easy way to create dialogue or text in a story. This can also be used as a reminder like the “readerMessage” command.
Here is an example of a text overlay through code:
(note: the text may appear slightly offscreen – at least for me, so I’ve adjusted the text slightly with the @overlay commands)
EXT. CAMPUS GARDEN - DAY
@overlay 6440731730903040_FANCY TOTE POMERANIAN BROWN TAN shifts to 27 282
@overlay 6440731730903040_FANCY TOTE POMERANIAN BROWN TAN scales to 3.198 3.198&overlay FANCY TOTE POMERANIAN BROWN TAN create text |color:white|This is a text overlay!
Here is how it looks on the web previewer:
Basically, as an example: I just used a dog tote bag overlay – as it doesn’t appear on the screen when the text is visible. For some reason, the text comes out quite blurred – on the web previewer at least, and I’m not really sure why. Keep in mind that this is still in beta, so this could very well be the reason.
Overall, this code is pretty simple. All you need to add is something along the lines of:
(feel free to change the overlay and the text color – but please don’t tamper with the code, or it will show an error)
&overlay FANCY TOTE POMERANIAN BROWN TAN create text |color:white|This is a text overlay!
Text overlays seem to work fine with a non-existing overlay as well. (thank you @EliseC for pointing this out!)
For example,
&overlay EXAMPLE_TEXT_OVERLAY create text |color:white|This is a text overlay!
Anyways, that’s it for the basic guide to tappable overlays.
Please note, that I am still new to this – as it is still in beta. If you don’t have full access to tappable overlays – please be patient, as I’m sure they’ll be released fully very soon.
If you have any questions or errors in your script – or even if you find an error in my code, please feel free to inform me via the comment section.
Also, if this guide helped you, please leave a like
(oof, now I sound like a YouTuber)
Also, may I say one last time,
Go check out this Google Docs document!
It goes into a lot of detail – and there is also a few features on there that I haven’t mentioned here on this thread.