Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Twine2 for Screenplays?
Hi, I'm new here, and I'm working on a twine2 project that at this point is kind of an outline for an interactive screenplay that I'm working on. At this point, I'm using Sugarcube with some css. It's nice, but a pain in the ass. I tried looking for an existing format that allows you to easily format things as a screenplay, and either my google-fu is weak or it doesn't exist. I also tried to look for a way to make my own format. The most I could find on that is "you can totally do it."
So my questions are two-fold:
Is there a place I can go that tells you what's required to make a story format?
Is there a way built in to make custom HTML tags that doesn't involve using the built in javascript engine? I'd like to front-load the amount of work I have to do now so I can come in later and hit the ground running if I wanted to make a second episode or something.
My end goal is to be able to use Twine to create interactive screenplays that are formatted similarly to how Final Draft formats its screenplays. I want the screenwriter to be able to just go into twine and start writing simply using some basic, custom HTML tags that correctly format the page to industry standards, like so:
So my questions are two-fold:
Is there a place I can go that tells you what's required to make a story format?
Is there a way built in to make custom HTML tags that doesn't involve using the built in javascript engine? I'd like to front-load the amount of work I have to do now so I can come in later and hit the ground running if I wanted to make a second episode or something.
My end goal is to be able to use Twine to create interactive screenplays that are formatted similarly to how Final Draft formats its screenplays. I want the screenwriter to be able to just go into twine and start writing simply using some basic, custom HTML tags that correctly format the page to industry standards, like so:
<scehe>Scene heading goes here. It auto-caps it for you.</scehe>
<actn>Guy does something</actn>
<char>Character name goes in the page center, auto-spaced properly.</char>
<paren>Parenthetical goes here. It auto-adds parentheses</paren>
<dia>Dialogue goes here</dia>
<trans>Transition goes here, auto-aligned right, auto-capped</trans>
et cetera...
Comments
But basically a Story Format is a self contained web-application the does whatever you want it to.
You package the Story Format within a format.js file which can be imported into Twine, the basic format/contents of this files is:
window.storyFormat({ "name": "The Story Format's Name", "version": "1.0.0", "description": "The Story Format's Description", "image": "icon.svg", "url": "http://your-story-format-hoster.com/", "license": "The Story Format's License", "proofing": false, "source": "The HTML contents of the Story Format Web-application goes here" });When the Twine application generates the story HTML it takes a copy of the "source" part of your format.js file, parses it looking for some keywords, inserting the relevent information from the Author's Story Project. The two keywords I know about are:1. {{STORY_NAME}} which is the Name of the Story Project.
2. {{STORY_DATA}} which is a collection containing the Story Javascript, the Story Stylesheet, and all the Story's Passages. The basic format of this collection is: Your Story Format web-application does whatever it wants with the {{STORY_DATA}} contents.
I guess at this point my only real options are to fire off some emails and try to interpret nightmares like this.
Chris Klimas's blog also mentions to try to contact him by contact form on his webpage, and I shot a message off to him today about it. Anywho, thanks for the info, it gives me a place to start!
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title>{{STORY_NAME}}</title> <style role="stylesheet" id="screenplay-stylesheet"> scehe, actn, char, paren, dia, trans { display: block; } scehe { text-transform: uppercase; } char { text-align: center; } paren::before, paren::after { content: '"'; } trans { text-transform: uppercase; text-align: right; } </style> </head> <body> {{STORY_DATA}} </body> </html>Attached is a sample of what the generated HTML would potentially look like.Is that so? Then in that case, based off those basic parameters, the format.js should look something like this:
window.storyFormat({ "name":"Screentastic", "version":"0.1", "author":'Testing', "description":"Screenwriting format for Twine 2.", "image":"icon.svg", "url":"", "license":'tbd', "proofing":false, "source":"<html>\r\n<head>\r\n<meta charset=\"UTF-8\" />\r\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\" />\r\n<title>{{STORY_NAME}}</title>\r\n<style role=\"stylesheet\" id=\"screenplay-stylesheet\">\r\nscehe, actn, char, paren, dia, trans { display: block; }\r\n scehe { text-transform: uppercase; }\r\n char { text-align: center; } \r\n paren::before, paren::after { content: '"'; }\r\n trans { text-transform: uppercase; text-align: right; } \r\n</style>\r\n</head>\r\n<body>{{STORY_DATA}}</body>\r\n</html>" });However, when I import the format into Twine, I get this:By the way, thank you for the help. I plan to add more features and be specific, but if I can get the basics working, that would go a long way because everything after that is pure coding.
Thanks for everything. I can begin development now.
paren::before, paren::after { content: '\"'; }notes:a. You may need to first delete unsuccessful instances of Screentastic from the Story Format List before trying to import the fixed version.
b. For some reason the loading message does not go away even for successful imports, when using the installable version of the Twine 2 application. You need to close the Twine application down and restart it, your story foomat should now appear in the list.
This leads into the next issue, which I don't have an answer for.
For some unknown reason when you generate a story HTML (Test, Play, Publish to File) using the new story format it is wrapping the contents of the generated tw-passagedata elements in double quotes.
I checked and it does not do this for the other story formats and I don't know why this is happening, it even happens if the Passage contents is standard HTML elements instead of your customer HTML.
Maybe one of the Twine/Story Format developers will know why this is happening.
1) When Twine sees {{STORY_DATA}}, it just makes a dump of all of the current story data that's being held in the HTML file in the library.
2) The story format's purpose is to catch the information provided from this dump that's organized with some custom HTML tags that Twine generates and convert the data inside those tags into something useful and pretty (but first unescaping the special characters because Twine escapes them for some... reason). It does this by prototyping the twine-generated tags, Twine doesn't do that, because it CAN'T do that, because if it did, we would be locked down to a single story format (which defeats the whole purpose of Twine), which is why it was programmed this way in the first place, and why Story Formats exist in the first place. A Story Format is also an extension of that line of thinking, allowing the format writer to be able to create their own markup.
4) A Story Format's existence and thus, formatting depends on it being an application that isn't called until runtime. So basically, the hard work is done behind the scenes, once the file has been loaded on the end user's browser.
5) Regular expressions are your best friend. Here's a great tutorial that'll help you learn regular expressions if you don't know them already. http://regexone.com/ And once you learn how to make one, here's the reference on everything about Javascript regexes, specifically. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions