Sugarcube Screenplay UI Template

Browser lacks capabilities required to play.

Upgrade or switch to another browser.

Loading…

<<set $header to "READY. SET. GO!">> <<loc>>Ext. - THE TRACK - TIME TO WIN<</loc>> <<act>>The smell of gasoline and rubber fills your senses. The grandstands rise like skyscrapers, painted in the colors of eager fans from around the world. You can see your flag waived in the air as the crowd starts to chant your name.<</act>> <<act>>The world stops.<</act>> <<act>>You're here.<</act>> <<act>>And no one is stopping you.<</act>> <<char 'Isabella Williams'>> <<wry>>over the radio<</wry>> <<dia>>Its time to go.<</dia>> <</char>> <div class='choice choicebtn'> <<button "Coming Soon">><<goto [[blank]]>><</button>> <<button "January 2025">><<goto [[blank]]>><</button>> </div>

// LOCATION  <<widget "loc" container>> <div class="loc"> _contents </div> <</widget>> // CHARACTER  <<widget "char" container>> <div class="unit"> <div class="char"> _args[0] </div> _contents </div> <</widget>> // WRYLY  <<widget "wry" container>> <div class="wry"> (_contents) </div> <</widget>> // DIALOGUE  <<widget "dia" container>> <div class="dia"> _contents </div> <</widget>> // TRANSITION  <<widget "trans" container>> <div class="trans"> <p>_contents</p> </div> <</widget>> // ACTION  <<widget "act" container>> <div class="act"> _contents </div> <</widget>>

<div id="interface"> <div id="header" data-passage="Header"></div> <div id="left" data-passage="Left"></div> <div id="passages"></div> <div id="right"></div> <div id="footer" data-passage="Footer">footer</div> </div>

$header

<<link '<i class="fa-solid fa-backward" title="Back"></i>'>> <<run Engine.backward()>> <</link>>  <div class="nav-container"> <ul class="navMenu" id="nav"> <input type="checkbox" id="nav-menu" class="navMenuToggle" name="navMenuToggle" /> <li class=" nav-li ms-li5 ms-li-last"> <<link '<i class="fa-regular fa-floppy-disk" title="Saves"></i>'>> <<run UI.saves();>> <</link>> </li> <li class=" nav-li ms-li4"> <<link '<i class="fa-solid fa-power-off" title="Restart"></i>'>> <<run UI.restart();>> <</link>> </li> <li class="nav-li ms-li3"> <<link '<i class="fa-solid fa-code" title="Credits"></i>'>> <<run Dialog.setup("Credits"); Dialog.wiki(Story.get("Credits").processText()); Dialog.open();>> <</link>> </li> <li class="nav-li ms-li2"> <<link '<i class="fa-solid fa-gears" title="Settings"></i>'>> <<run UI.settings();>> <</link>> </li> <li class="nav-li ms-li1 ms-li-first"> <<link '<i class="fa-solid fa-book-bookmark"></i>'>> <<if Dialog.isOpen("key")>> <<run Dialog.close()>> <<else>> <<run Dialog.setup("Quick Guide", "key");Dialog.wiki(Story.get("Key").processText());Dialog.open();>> <</if>> <</link>> </li> <li class="nav-main"> <a> <label class="navMenuToggle-lbl" for="nav-menu"> <span>Δ</span> </label> </a> </li> </ul> </div>  <<link '<i class="fa-solid fa-forward" title="Forward"></i>'>> <<run Engine.forward()>> <</link>>

<ul> <li> Sugarcube Screenplay UI Template & Screenplay Formatting Widgets by <a href="https://lapinlunaire-games.neocities.org">Lapin Lunaire Games</a>. </li> <hr>  <li> Add more credits here wrapped in {{{<li>}}} tags (you can copy/paste this one as many times as you need to). </li>  </ul>

Press ''"Q"'' at any time to open/close this! ''M'' expands/collapses the menu discs and ''ESC'' closes an open dialog. <hr>  <p> ''**LOCATION**'' <br>Use to define a location for your scene. <pre>{{{ <<loc>> [Int./Ext.] - [Location Name] - [Time of Day] <</loc>> }}}</pre> </p>  <p>''**CHARACTER**'' <br>This sets the indents and capitalization for a speaking Character's name. It takes a Character's name as an argument and should wrap their dialogue and any parentheticals (wrylies) in those lines. ''Note:'' Make sure you wrap the Character's name in <u>straight</u> quotes, not curly quotes! The name can contain spaces.<br> <pre>{{{ <<char "[Name]">> [Dialogue and/or wrylies] <</char>> }}}</pre> </p> <p>''**WRYLY**'' <br>This is a wrapper for parenthetical notes on a particular line's delivery, commonly known as a "wryly". Screenwriting rule of legend and thumb advises using them sparingly, but I prefer to think of them as salt!<br> <pre>{{{ <<wry>> [delivery instruction] <</wry>> }}}</pre> </p> <p>''**DIALOGUE**'' <br>This is a wrapper for a Character's spoken lines.<br> <pre>{{{ <<dia>> [Dialogue] <</dia>> }}}</pre> </p> <p>''**TRANSITION**'' <br>This is a wrapper for transitions, used to mark a shift from one scene to another. This can be a shift in time or place or the change of one camera setup to another. Dutch angle, Dutch angle, Dutch angle!<br> <pre>{{{ <<trans>> [Transition instruction] <</trans>> }}}</pre> </p> <p>''**ACTION**'' <br>This is a wrapper for descriptions of the setting, a character's expression/behaviour, or something happening within either/both, known as action content.<br> <pre>{{{ <<act>> [Action description] <</act>> }}}</pre> </p>

<<set $header to "do not distribute">>  <<set $take to "Curtain Up">>

<div id="titleCont">''<<include "Title">>'' <br><span id="tagline"><<include "Tagline">></span> <p>By <<include "Author">></p> <div id="splashLinks"> <<link "Start" "Start">><</link>> <span>✦</span> <<if (Save.autosave.ok() and Save.autosave.has()) or (Save.slots.count() gte 1)>> <<link "Load">><<script>>UI.saves()<</script>><</link>> <span>✦</span> <</if>> <<link "Settings">><<run UI.settings()>><</link>> <span>✦</span> <<link "Credits">> <<run Dialog.setup("Credits");Dialog.wiki(Story.get("Credits").processText());Dialog.open();>> <</link>> </div> </div>

Remeber the Past, Conquer the Track, Redefine Victory

Velocity's Edge

Amelia

<<set $header to "sugarcube screenplay template | widgets">><<set $take to 'Widgets'>> <<loc>>Int./ext. - Scene Location Detail - Time of Day<</loc>> <<act>>The header above is wrapped in {{{<<loc>>}}} tags to define where a scene takes place: interior/exterior; location name; day/night. You can also use them as headings. This section is wrapped in <<{{{act}}}>> tags. Use them for a description of the scene or introduction of a character. (Or both!)<</act>> <<loc>>Int. - jinx’s room - day<</loc>> <<act>>We close in on a woman in a pinstriped blouse at a desk, ink-spattered fingers darting between the keyboard of her laptop and a mug of tea beside it. She types rapidly and with the hammering force shared by string musicians, mechanical typewriter enthusiasts, and angels in the habit of smiting. This is JINX, our narrator and guide. Without looking away from her screen, she speaks.<</act>> <<char 'jinx'>> <<dia>>Hi there. Thought I felt someone come in. ''Location'' and ''action'' widgets got explained up top, so I’ll start in on the rest.<</dia>> <</char>> <<act>>She waves a hand in the air around her head.<</act>> <<char 'jinx'>> <<dia>>See that indent before my name and the space above it? That’s thanks to the ''character'' widget. Every Character’s lines get wrapped in <<{{{char}}}>> tags to space them out properly. <</dia>> <</char>> <<act>>Jinx waves a hand over her head again, palm flat this time to indicate the space where her name might float.<</act>> <<char 'jinx'>> <<dia>>The ''character'' widget also defines the name of a speaking character. It takes the name as an argument and acts as a container for a Character's dialogue, so you write it like this: {{{<<char "name">> <</char>>}}}. The widget takes care of all the formatting and capitalization, so as long as it’s between a set of straight quotes, you’re good to go! Spaces included.<</dia>> <</char>> <<act>>Jinx types out a quick demonstration on her screen. She taps the final key with a flourish.<</act>> <<char 'jinx'>> <<dia>>As for what a Character says, that’s where the ''dialogue'' widget comes in. All their lines get wrapped in <<{{{dia}}}>> tags. Think of it like those Russian nesting dolls, or lunch: you sandwich the dialogue, put a character wrapper around the sandwich, and label the wrapper with the name it belongs to.<</dia>> <</char>> <<act>>Jinx leans back in her chair and stretches. An assortment of joints pop loudly.<</act>> <<char 'jinx'>> <<wry>>muttering<</wry>> <<dia>>Ugh. Shrimping again.<</dia>> <</char>> <<act>>Jinx takes a sip of tea, careful to maintain good posture. Halfway through, she remembers something and makes a sound of sudden acknowledgement. She sets the mug down hurriedly and motions with both hands over her head again.<</act>> <<char 'jinx'>> <<dia>>Almost forgot! We have a widget for ''wrylies'' too, so if you want to include a parenthetical statement about //how// someone says something, just pop a set of <<{{{wry}}}>> around whatever instructions you have, after the <<{{{char}}}>> and before the start of the <<{{{dia}}}>>. See that //(muttering)// on my last line up there? That looks like {{{<<wry>>muttering<</wry>>}}}, no parentheses needed. The widget will add them on for you. <</dia>> <</char>> <<act>>An alarm sounds from Jinx’s laptop. She taps out a quick command and the chime stops. Quick shot of Jinx glancing directly at the camera with an apologetic smile before standing and shrugging on a jacket to leave.<</act>> <<char 'jinx'>> <<dia>>Sorry, I’ve got to run. But one last thing: if you need a quick reference for what each widget does and how to use it, hit <b>Q</b> or click the delta (Δ) at the bottom of the page to open the menu, then the clapperboard disc on the left.<</dia>><</char>> <<act>>She salutes the camera before heading out the door and down the stairwell.<</act>> <<trans>>match cut of jinx skipping off the last step to:<</trans>> <<loc>>ext. - city street - afternoon<</loc>> <<char 'jinx (v.o.)'>><<dia>>Can’t believe I forgot about voiceovers—perfect example here of how you can use the ''transition'' widget to explicitly cut between scenes and locations. It’s a wrapper of {{{<<trans>>}}} tags.<</dia>><</char>> <<act>>We follow Jinx down the street. The day is sunny and color-graded to give Wes Anderson a run for his money.<</act>> <<char 'jinx'>> <<dia>>Anyway, I had a couple friends set up some scenes for you to look at as examples. This whole template deal comes with pre-styled links and buttons too. Check out the Template Styles passage. That’s my ride—talk to you later, for real this time!<</dia>><</char>> <hr> <div class="choice choicebtn"> <<link "First Page" "Start">><</link>> <<link "Template Styles" "Styles">><</link>> </div>

<<set $header to "sugarcube screenplay template | styles">><<set $take to 'Styles'>> <h1>This is an h1 heading.</h1> <h2>This is an h2 heading.</h2> <h3>This is an h3 heading.</h3> <h4>This is an h4 heading.</h4> <h5>This is an h5 heading.</h5> <p>This is ''bold text'', //italic text//, and __underlined text__. <<link "Here is an example of an inline (non-choice) link.">><</link>> Directly below this sentence is an <nowiki><hr></nowiki>.</p> <hr> <p>This template comes with default monospace (Courier Prime) font as well as serif (Benne), sans serif (Montserrat Alternates), and Open Dyslexic options. To preview these options, open the menu (‘''M''’) or click the delta at the bottom of the page) and change the font style in the Settings Menu (<i class="fa-solid fa-gears"></i>).</p> <p>You can also change the UI display theme in the Settings Menu. This minimalist screenplay-inspired template comes with two display themes (“Day” and “Night”). The colors for each are easily customizable through the CSS stylesheet’s variables (look for the section labeled with 🐇🌙🌸🌸🌸🌙🐇 emojis).</p> <<act>>This template also comes with pre-styled choice links and two styling options for choice buttons. The buttons will resize/wrap automatically to fit. Simply create a div with the class “choice” and your links/buttons inside. If using buttons, you must also add the appropriate styling class (.choicebtn or .stack).<</act>> <hr> <<act>>You can use links to direct players...<</act>> <div class="choice"> [[First Page|Start]] [[Widget Explanation]] </div> <<act>>Or buttons...<</act>> <div class="choice choicebtn"> <<button 'First Page'>><<goto [[Start]]>><</button>> <<button 'Widget Explanation'>><<goto [[Widget Explanation]]>><</button>> </div> <<act>>Or another style of buttons...<</act>> <div class="choice choicebtn stack"> <<button "First Page" Start">><</button>> <<button 'Widget Explanation'>><<goto [[Widget Explanation]]>><</button>> </div>

Hi! Thanks for downloading my Sugarcube Screenplay Template. Below is a key to the colour-coded tags I've used to identify which passages should be edited with your own text, which are guides/references for the template's screenplay format widgets, and which should not be edited without deeper HTML/CSS/Twinescript familiarity. I've tried to make the template as plug-and-play friendly as possible, but please don't hesitate to leave a comment on itch or contact me (https://lapinlunaire-games.neocities.org/contact/) if you have any questions and the code comments aren't quite getting you the info you need. Happy Twining! -Jinx //--------------- TAG KEY ----------------- "Guide" (BLUE) Reference passage. "Edit-This!" (GREEN) Passages tagged "Edit-This!" contain text meant for you to change to your own project's information. "No-Touchy!" (RED) Editing not recommended without advanced HTML/CSS/Twinescript knowledge.

<<set $header to "WELCOME TO THE BRITISH GRAND PRIX!">> <<act>>Are you ready?........<</act>>