Episode Interactive: How to Use Overlays!

Published on 6 April 2020 by Kyla R.


Keep in mind that I do not own the Episode Interactive portal and the screenshots, while my own personal work, are not necessarily my property. They are used for educational purposes only.

Hey everyone! My first request for Episode Interactive help series was to explain how to use overlays and what they are! So here we go!

What are overlays?

Overlays work somewhat like characters in the way that they can cover other characters and overlays and must be added into a scene! You can either provide your own through the episode portal.

How do I pick out overlays?

Episode already has a large variety to choose from when it comes to both backgrounds and overlays, even though it’s something not exactly what you were looking for. All you need to do is log onto the episode interactive portal, hit “Art Catalog” and then “Overlays.” That’s it! You can search for specific overlays if you are searching for something specific, otherwise you can look through them all! Tags are also available for organization purposes.

Can I get/choose my own?

To provide your own personal overlay, be sure that it has no background (if that’s what’s desired). Just go to the art catalog, overlays, and then uploaded to your account.

From here, you will have the image below shown.

From here, you can hit the blue “Select Image” button and choose the overlay from your computer! I recommend having PDFs or PNGs because jpgs and jpegs do not work for the upload. “Your image must be PNG and below 1MB.” You can, however, change the type of file through converters online as well as the size if necessary!

The size, once already appeared on your screen doesn’t matter since you can scale it up or down in the actual portal. Just be sure it looks like you wanted it to! All you need to do from there is name it something, check the box that says you agree that the content is original to you (there cannot be any names or labels or else it will be denied!) and hit the red upload button! That’s it!

Okay but…how do I introduce them in my story?

Don’t fret! This is basically the easiest part…once you get used to coding. So listen carefully and always troubleshoot before asking questions! In this example, I will be showing a screenshot image of my own work. Below is a screenshot of my simple intro before every episode with the use of a cover background and overlays.

Key Notes: The only overlay I am using in this code is the one labeled “FILTHYROYALSNEW”. INT.NEWCOVER3 is simply a background.

You can introduce an overlay in several ways. First, I will go over the way I typically do it.

My way: When you are starting a scene that will be utilizing overlays, add it in the form of INT./EXT. BACKGROUNDNAME with OVERLAYNAME

An example of this is shown in the image above where it says “INT.NEWCOVER3 with FILTHYROYALSNEW” where FILTHYROYALSNEW is the overlay name and INT.NEWCOVER3 is my background name.

Another way: At any point of your coding simply write in the template of “@overlay OVERLAYNAME create” that’s it! Your overlay is now set in the scene.

Great! Now it’s introduced. Let’s continue onto the fun stuff!

What’s Opacity?

Opacity is the transparency of your overlay. Want it barely visible? You want your value closer to 0. Completely visible? You want the value at 1. The opacity scale ranges from 0-1. That’s it!

When I write in my overlays, I typically want them to already be set in the scene at full opacity or I will introduce them later. If I decide to introduce them later, I typically code @overlay OVERLAYNAME opacity 0 in 0, which tells the coding mechanism to make sure the overlay is invisible from the second it appears in the background. This is shown in my screenshot at &overlay FILTHYROYALSNEW opacity 0 in 0.

If you want the overlay to fade in from seemingly “nothing,” you may code @overlay OVERLAYNAME opacity 1 in 3, which will show up as the overlay fading in from nothing to the full opacity in 3 seconds. You can do the same for fade away as @overlay OVERLAYNAME opacity 0 in 3.

What about if I want to change the size? Where is it?

Want to change the size of your overlay? Is it too large or too small? My best tip is to use and utilize your preview screen to its maximum potential. The preview screen can be brought up by clicking on the “Preview” orange/yellow button on the top right of any episode chapter you open up, given that it has no errors.

See that “@overlay FILTHYROYALSNEW shifts to x y in zone 1”? Ignore all those funky numbers before my overlay name, it’s just due to the preview!

After selecting preview, your screen should appear. What now? On the right side you have several “buttons.” Click on spot directing! Next, be sure that you are focusing on the overlay by pressing “change overlay.” Below the preview screen, there should be some coding you are able to copy below, which should say your overlay name!

After this, the left bottom will have many different buttons. In regards to scaling, the top button from the bottom left should say Switch Tool: Move. This will be shown when you are scaling things. You can drag and drop on your actual overlay in this case, which for me was this table! It will get smaller and larger depending on which way you move your mouse.

Similarly, tap on the switch tool button and click it. It should now display, Switch Tool: Scale. Move your overlay around with your mouse!

Note: Be careful and be sure that your overlay is in the correct zone that you want it to be. If not, you may not see it and may have to watch the coding given under your preview screen to find it. Make sure that your characters are behind or in front of the layer you have placed your overlay in as well, as this will affect your scenes.

Remember, if you ever have any questions and requests, feel free to send me a DM on Instagram or leave a comment down below. Not all my article posts are to be Episode Interactive related.

As always, I recommend all of Joseph Evan’s tutorials and DaraMarie’s templates for starting help. Unless your question specifically asks for help regarding this article, please do not contact me about it!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s