Menu Template help?

I was wondering if anyone could make a menu template for me please? Including…

  • Story title: Always Here
  • Play
  • Customise
  • Points
  • Warning

And the background name is called INT. PURPLE - DAY
Thank you very much!

2 Likes

Here are the overlay buttons and background needed:

Story Title

ALWAYS HERE (2)

Play

Customise

Points

Warning

Background

1 Like

Here you go, let me know if you want me to change anything about it
I had to cut down the overlays because they were overlapping and they wouldn’t be tappable.

Template

INT. PURPLE - DAY
label mainmenu
@overlay TITLE create
@overlay TITLE shifts to 9 444 in zone 1
@overlay TITLE scales to 0.913 0.913
@overlay TITLE opacity 1
@overlay PLAY create
@overlay PLAY shifts to 46 331 in zone 1
@overlay PLAY scales to 0.710 0.710
@overlay PLAY opacity 1
@overlay CUSTOMIZATION create
@overlay CUSTOMIZATION shifts to 50 237 in zone 1
@overlay CUSTOMIZATION scales to 0.869 0.869
@overlay CUSTOMIZATION opacity 1
@overlay POINTS create
@overlay POINTS shifts to 45 36 in zone 1
@overlay POINTS scales to 0.721 0.721
@overlay POINTS opacity 1
@overlay WARNING create
@overlay WARNING shifts to 45 137 in zone 1
@overlay WARNING scales to 0.760 0.760
@overlay WARNING opacity 1
@transition fade in black 2

tappable
“PLAY” {
NARRATOR
Are you sure you want to start the story?
choice “No, take me back to the menu” {
goto mainmenu
} “Yes, I want to start” {

goto play
}
}
“CUSTOMIZATION” {
INT. BLACK - NIGHT
@CHARACTER stands screen center

#add template here and change the background if you want

goto mainmenu
}
“WARNING” {
#put your warning here

goto mainmenu
}
“POINTS” {
#add your point template here

goto mainmenu
}

label play
#continue with story here

Tappable overlays

pv1_back_ELLAPOINTS1_4834938235322368_92b8b43520e71773403c941ecad453d9

pv1_back_ELLAPLAY1_6037199405907968_92b8b43520e71773403c941ecad453d9
pv1_back_ELLAWARNING1_5140795506491392_92b8b43520e71773403c941ecad453d9
pv2_back_ELLACUSTOM1_5929102796587008_92b8b43520e71773403c941ecad453d9
pv1_back_ELLATITLE_5396311700865024_92b8b43520e71773403c941ecad453d9

:brown_heart:

If anyone is interested in making their own template, this is how I did mine.
If you prefer to read this more clearly in a document check it out in the templates folder of my google drive. Google drive linked below.

HOW TO: Create a Game Menu

The first thing we have to do is make a Game Menu Background.

The one I made is above, but you can personalise yours to look however you want.

I used the editing software GIMP 2.10 for (ios) because it’s easy to use and completely free.

If you want to download GIMP I will put the link here:

GIMP - GNU Image Manipulation Program

If your struggling to download it, use the videos from this channel: Parker Photographic

The link for the downloading GIMP on a Mac Video is:

How to Install GIMP on a MAC

But feel free to use whatever you want but please note my instructions will be in the GIMP format.

Any questions? DM me @storiesby_lia

Link to my instagram.

STEP 1: Open your chosen image background in GIMP

STEP 2: Adjust image size

Go to Image > Canvas Size

Adjust your canvas size to width:640 and height:1136

If your image is too big or small you can adjust that by going to Layer>Scale Layer to change the dimensions

OR hold down Shift and S at the same time to scale it up or down to make it fit on the canvas.

STEP 3: Customise

Now that our image is the right size, you can customise it to fit your story’s theme.

I added the title of my story and my name at the bottom to personalise it.

I did this by using online free font websites, writing my text then copying and pasting it into gimp. Finally, using the scale tool (SHIFT+S) to make it fit.

This is what mine looks like now.

STEP 4: Adding the buttons.

For this you need to find a button that you can add to your game menu.

I used the one above.

If you want to use this button, you can find it attached in this folder.

If you want to find your own I recommend using png websites like:

png tree

clean png

OR just using google images and typing in “png button”

Once you have got a button, then you will need to copy and paste it into GIMP.

I did this 3 times as I wanted 3 buttons: Start, Previously and Skip

You may choose to add less or more buttons (such as another for customisation), then paste the button in four times.

Scale them up or down so they fit neatly and move them so they are in a straight line.

Then add text on top of them so they say START, PREVIOUSLY and SKIP

You can do this by copying and pasting the writing from a free font website OR by adding a textbox over the button and typing it in.

I prefer to use free font websites as they have prettier fonts but that’s just my personal opinion.

This is my finished product!

Now we need to upload some things into episode

STEP 5: Uploading stuff into Episode.

Head to the Episode Interactive Portal.

And go to Art Catalogue.

Upload this background. (Size:One Panel)

Now we need to upload the button png as an overlay.

NOTE: YOU ONLY NEED TO UPLOAD A PLAIN BUTTON ONCE!

(Regardless of how many buttons are on your menu)

This will make more sense when coding later.

Remember if you are struggling with any of this DM me @storiesby_lia and I would be more than happy to help you out!

Let’s move onto coding our GAME MENU!!

CODING YOUR GAME MENU

Below is the code for the Game Menu.

You should be able to copy and paste it into Episode.

Follow the instructions in blue to make it fit for your story and avoid errors in the portal.

GAME MENU ##{

label GAME_MENU

EXT. GAME MENU ##Put the game background we made here##

&zoom reset

&reset hsl in 0

&speechbubble reset

@overlay START create from WHITE BUTTON AND overlay START shifts to 62 323 in zone 1

@overlay PREVIOUSLY create from WHITE BUTTON AND overlay PREVIOUSLY shifts to 61 261 in zone 1

@overlay SKIP create from WHITE BUTTON AND overlay SKIP shifts to 62 199 in zone 1

##Replace WHITE BUTTON with the name of the button overlay YOU uploaded##

##This is going to create new overlays from the white button overlay and name them different things so you can move them over the buttons on the game menu. They are supposed to be transparent so they don’t show up##

##If you have more or less buttons on your Game Menu then create more or less overlays accordingly##

##If any of this is confusing, DM me and I will help you out.##

##Line up the button overlays with the buttons on the game menu background##

tappable

“START”{

goto START

}“PREVIOUSLY”{

goto PREVIOUSLY

}“SKIP”{

goto SKIP

}

#PREVIOUSLY{

label PREVIOUSLY

INT. BLACK - NIGHT

NARRATOR

Previously…

##Here add the scene(s) you want to remind the reader of.##

INT. BLACK - NIGHT

NARRATOR

Go back to the Game Menu and press START.

choice

“BACK”{

goto GAME_MENU

}

#}

#SKIP{

label SKIP

EXT. ANTI-HEROES INTRO

NARRATOR

Only skip this episode if you have already seen it | bold |OR | reset |episode is making you rewatch it.

@pause for .2

NARRATOR

Are you sure you still want to skip?

choice

“YES, I want to skip this episode”{

NARRATOR

Last Chance!

choice

“YES, just let me skip it already!”{

goto END

}“NO, I made a mistake, take me back!”{

goto GAME_MENU

}}

"NO, take me back to the Game Menu. "{

goto GAME_MENU

}

#}

#START{

label START

##Here you can begin your story. An example is below.##

EXT.WARNING-NIGHT ##Put your warning card here, if you have one##

&zoom reset

&set hsl 0 65 -3 no_colorize with blendMode Overlay to 100% in 0

@pause for 2

@speechbubble reset

NARRATOR

| bold |Watch at your own discretion.

@pause for a beat

@transition iris out black 2

#}

##}

##Put this part at the end of your story##

#END{

label END

EXT.PRETTYBKG

@zoom reset

@cut to zone 1

@speechbubble reset

NARRATOR

End of Episode 1.

#}

Thanks so much! Although, when I preview it, it comes up as this:

Why is it doing this?

Thank you so much for this! I’ll definitely be using this in the future, it was super helpful!

I saw you were struggling so I made you your own Game Menu and wrote code so you won’t have the problem you’re having above.

Just upload these onto Episode. In the script, the Game menu Background is called EXT. ALWAYS HERE GAME MENU and the overlay is called GAMEMENUBUTTON
I recommend using these names to avoid confusion in the code.
Also, you only need to upload the button overlay ONCE!


GAMEMENUBUTTON

You can copy and paste this code, I made it just for this BG

GAME MENU ##{

label GAMEMENU

EXT. ALWAYS HERE GAME MENU
&zoom reset
&reset hsl in 0
&speechbubble reset
@overlay PLAY create from GAMEMENUBUTTON AND overlay PLAY shifts to 65 363 in zone 1
@overlay PLAY scales to 0.963 0.963
@overlay CUSTOMISE create from GAMEMENUBUTTON AND overlay CUSTOMISE shifts to 68 264 in zone 1
@overlay CUSTOMISE scales to 0.938 0.938
@overlay POINTS create from GAMEMENUBUTTON AND overlay POINTS shifts to 69 159 in zone 1
@overlay POINTS scales to 0.938 0.938
@overlay WARNING create from GAMEMENUBUTTON AND overlay WARNING shifts to 66 59 in zone 1
@overlay WARNING scales to 0.963 0.963

tappable
“PLAY”{
goto PLAY
}“CUSTOMISE”{
goto CUSTOMISE
}“POINTS”{
goto POINTS
}“WARNING”{
goto WARNING
}

#CUSTOMISE{
label CUSTOMISE
INT. BLACK - NIGHT
NARRATOR
Which character would you like to customise?
choice
“Main Character”{
NARRATOR
Let’s customise the MC.
@MC enters from right to screen center AND MC faces left
#insert MC customisation template
}“Love Interest”{
NARRATOR
Let’s customise the LI.
@LI enters from right to screen center AND LI faces left

#insert LI customisation template
}
goto GAMEMENU
#}

#POINTS{
label POINTS
INT. BLACK - NIGHT

#add your point template here
goto GAMEMENU
#}

#WARNING{
label WARNING
INT. BLACK - NIGHT
NARRATOR
WARNING.
#put your warning here
goto GAMEMENU
#}

#PLAY{
label PLAY
INT. BLACK - NIGHT
NARRATOR
Are you sure you want to begin the story?
choice
“YES!”{
goto START
}
“NO.”{
goto GAMEMENU
}
#}
##}

label START
##Here you can begin your story.

Thank you so much, this was super helpful! :grinning_face_with_smiling_eyes: