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
Stories with tapable overlays
How do I let readers move around the screen and make something happen when they press on something?
Very advanced choices
Discussion: Honest opinions of Episode
"Stupid" questions that never get answered? Get The Help Here!
Choice in a choice (tappables)
"Stupid" questions that never get answered? Get The Help Here!
Overlays as buttons
Is it possible to direct a pannable scene?
Rude’s Here to Help! Ask your questions babes 💙
How to do this new thing?
Need help with ADVANCED directing
Does anyone knows how to do tappable overlays?
Touch screen effect?
Press on the overlay thing?
Please review my unpublished story! (only episode 1)
Moveable Backgrounds?
How to make Tappable overlays
Get help and templates here!
Please HELP with this feature!
Using overlays as buttons? And user scrolling? HELP!
I need help: zones
Tappable overlay
HELP MEE: Tap-able backgrounds
Hey guys can anyone help with this please? :D
Question On Screen Changes
JemU776's Help Thread
Timed Questions and Scrolling page
I need help with the tappable overlay, plz help
I need help with special Coding
Tapping Background
How to create a video game
"Stupid" questions that never get answered? Get The Help Here!
Clicking on clothing
DARA’S GUIDE: Typed-in Choices
Words you put before a choice
Visual CC Help?
Clothes overlay help needed!
Someone help with outfit choices
How to Code a Dressing Game using Tappables?
Mini Game with tappable overlays!
How do you scroll an overlay up or down?
How to create an image choice like in The Wall?
I want to put like a game in my story for the new episode
How do I put clickable clothes?and how do I use them?
"Stupid" questions that never get answered? Get The Help Here!
How to let reader pick two overlay next to next in a tappable?
Makeing Overlays In To Buttons? Tappable Overlays
"Stupid" questions that never get answered? Get The Help Here!
Click things on episode
Dara Amarie's Official Help Thread! [closed]
How to make timed choices
Dara Amarie's Official Help Thread! [closed]
Rude’s Here to Help! Ask your questions babes 💙
Tappable Choices?
Directing Help and Assistance From a Purple Ghost For All Your Episode Needs
How do I make my splashes tappable?
JemU776's Help Thread
Tappable Overlays Error
How to do the thing where the reader can tap and drag to move around the screen?
Need help with command!
Help with outfits!
"Stupid" questions that never get answered? Get The Help Here!
HOW TO: Make Your Own Choice Bubbles
"Stupid" questions that never get answered? Get The Help Here!
How do I use overlays/nameless character in choice?
Anyone needs help with coding? I'll help!
Please help me? I want to learn how to code a movable object game!
!Mini game code wanted!
I need help with special Coding
How to change outfits with beauty marks
Does anybody know how to do the tappable phone overlay?
Need directing help! will give credit
HOW TO: Tappable choices
I need help from caitoriri
I am finally writing again! I need help
Help with mini game :slightly_smiling_face:
CHOICES! HELP!does anyone know it?
Paning your background in an episode game?
I need help w/ something
Game menu error: not a valid directing command
How can I make a dressing game more interesting?
Choice inside of a choice?
Heard Awards Official Help Thread
A horseshoe, up, right, down and left overlays
I need a specific code
How do you make mini-games in your story?
Pannable Minigame Help
HELP: Forum Ultimate Go-Tos 😊
Reader moving overlays
Can someone make me a tappable mini game?
Pannable, tappable & timed Mini Game
Can anyone make point buttons?
Reader Opinions?
How to do this on episode?
I want this mini game in a scene coded for me who wants to do it XD
How to add text and text effects like in these stories
Looking for a really creative person who I can credit in a writers competition
𝓤𝓼𝓮𝓯𝓾𝓵 𝓛𝓲𝓷𝓴 𝓜𝓪𝓼𝓽𝓮𝓻 𝓛𝓲𝓼𝓽 - every useful thread you could think of!
Helpful Links :blush:
Pannable Minigame Help
TIP: Rotating Overlays <(^.^)>
:sparkles: Ava's Help Thread! :sparkles:
HOW TO: let reader move background on tappable game
How do you code that sliding through zones with your finger feature?
Tal's Coding 101 - Questions & Help With Directing
"List" of Helpful Threads
Interacting with on screen things
"Stupid" questions that never get answered? Get The Help Here!
Tappable Overlays
DARA’S GUIDE: Overlays
How do I let the reader click an overlay?
New Directing Tips?
Scrolling/Touchscreen?

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.