A Basic Guide to Tappable Overlays

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 :point_up:

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.838

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!
}

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 3

tappable [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 :heart:

(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.

Thanks so much for stopping by – and I hope this helped you out~

272 Likes

Brooke, you just gave me an unexpected surprise. I would have never known I was in beta testing for these tappable overlays if you had never posted this thread. You’re so helpful. :sleepy:

13 Likes

Awe, tysm! I’m so glad this helped :eyes:

3 Likes

HOLY SHIT I’M A BETA TESTER FOR THIS! I thought they emailed you about beta testing a new feature! They should really tell people they are a part of beta testing!

5 Likes

They do.
This wasn’t a completely closed beta and you were allowed to share the documents, but some people were sent an official email about it.
I believe everyone can technically test this feature but not everyone got sent the guide.

Not sure that this is something that should be shared before it’s released to everyone officially?

Aw, now I feel less special, but I don’t know if OP posting the code is breaking any rules or not though.

Neither do I, but I figure if Episode wanted it released to everyone they would have done that themselves :woman_shrugging:.

1 Like

Hm. Thank you for the feedback. My original intention for the post was to give a guide to all of the people who have this feature. I wasn’t aware of the guide that stated you had to email the team personally to be included. I’ll ask Jeremy or Sydney personally, and if it’s not okay for a post like this to be up – I’ll delete it / ask it to be removed, and save it for another time when beta testing is over :slightly_smiling_face:

1 Like

let me just screenshot this before/if it gets removed :eyes:

14 Likes

At the very least, maybe you should add a big disclaimer that they don’t recommend you publishing as the code may change (and then everything can break). If you’re not officially a beta tester then you won’t get the follow up communications so you wouldn’t even be aware if things were to change.

2 Likes

Question: Then why not post this in the official beta testing forum group instead?

Hm. I was not aware that existed. Can I have a link, please? :slightly_smiling_face:

Ah it’s a private group so I don’t think I can link it. I just assumed you were a beta tester?
The original email tells you to email Episode if you’d like to join the beta test and then you’re invited to the group.

I didn’t receive an email confirming that I was a beta tester – but I can use these commands in my script (not sure if I could publish them atm).

I’ve messaged Jeremy about it – and he says that he and the team are looking into it – and will delete the post if it goes against the guidelines, so I guess all that’s left for me is to wait :joy: :sweat_smile:

Yeah, anyone can use the commands but the benefit to joining is that you get the follow up emails and everything so you know if they change the code and also so you can give feedback which is the main point of a beta tester.
You should be able to publish, they just state in the email that they advise against it (but some people have) as there’s a chance that the code (and the guide) could change.

3 Likes

Oh by the way, if you’re allowed to keep the guide I just want to clarify something. You make it sound like you need to use an existing overlay for the text overlays? It seems to work fine if you just create a new one from scratch (e.g @overlay ELISESTEXTOVERLAY create text This is a text overlay! ). :slight_smile:

2 Likes

Ah, I didn’t get the chance to try that out :thinking:
Thanks for the info – I’ll add it to the thread (with credit, for pointing that out :grimacing:)

You may not have gotten it, because some emails are full, like mine is. So, I’d never if I had never tested this out… Thank you, Jesus.

same haha

1 Like

Thanks this is soooo cool.