Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Creating Coding + Twine

edited June 2015 in Help! with 2.0
Hello Twine people!
I'm in the process of making my first game in Twine. I'm a pretty advanced dev and I teach creative coding. I'd really love to use p5js to visually illustrate my story and I'm just looking around to get my head around how Twine works. Just from a cursory read it looks like it's maybe (?) using require js and a few other scripts. (Just saw the require keyword in the docs - might be a false assumption. I've not torn it open yet under the hood)
1. Is there somewhere online where you explain how this tool is built and what the architecture is?
2. Is a not minified version out there on git? I'm going to look here in a second but that would be helpful. The way all of this gets slammed into one HTML file hurts my mind a bit. Is there a reason or can we break it into the logical structure with a folder for css and scripts so we can manage it with a bit more sanity?
3. Has anyone here integrated p5js? I'd love feedback.



  • Twine 2 consist of two major parts:

    1. Story Formats - (Harlowe, SugarCube, Snowman 2)
    Each story format file contains a Javascript engine which defines a story's default look and feel, the default feature set of the story, and the macro language (syntax and default list of macros) used by the Author

    2. The Twine editor
    This application allows the Author to edit the Passages (text, CSS, Javascript) that make up the Story, which they then combine with a Story Format to build a story HTML file.

    Which of these are you asking for more details about and which are you thinking about using p5js with?
  • I think the correct answer is option one. I want to take that giant generated twine file and inject a p5js canvas into it. When I tried, I got no results. It could live at the bottom or the top of the story text. It would be super if the text could be accessible by the js in p5js. I could get really creative with that.

    Would it just be easier for me to pull it out as a json object and link everything together myself? Maybe this is just bad planing but I really like the way Twine lets me rapidly write and linking it to p5js would be fun because I'm already really good at Processing. :)


  • Try using the View Proofing Copy option while editing your Story and see if the HTML generated, which contains only the passage data, is what you want.
  • If you want to use p5js with other libraries and frameworks (Twine 2 story formats include the former to some degree and can be thought of as the latter), then you probably need to read the Processing transition page, if you have not yet done so. In particular, you need to pay special attention to the following entry:
    By default, everything is in the global namespace, and you can create your sketches like you do with Processing. However, there is something we call "instance mode" for creating a p5 sketch that plays nice with the rest of the code running on your page. See this instance mode example and this global vs instance mode tutorial.
    To make p5js work within most story formats, you're probably going to have to use instance mode, which may or may not be palatable to you.

    Furthermore, if you are including p5js by placing it within the Story JavaScript, then you'll probably have to wrap it within a function so you can ensure that this is a reference to window, which is easily enough done. For example, place this in the Story JavaScript and follow the sole instruction therein:
    (function () {
    /* PASTE THE CONTENTS OF ps5.min.js HERE */
    Alternatively, you could edit the published HTML to add a <script> tag which would load it from an external source. For example:
    <!-- From a local source. -->
    <script src="js/p5.min.js"></script>
    <!-- From a CDN. (Disregard the spurious semi-colon added by the bbCode code block.) -->
    <script src=""></script>;
  • edited June 2015
    THANK YOU so much. Did you all see this thing just game out! Things just got so interesting in my head.
  • I just checked it out. It actually looks REALLY user-friendly to a beginner. Which, of course, I am.
Sign In or Register to comment.