Howdy, Stranger!

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

Creating the HTML, Javascript and CSS from scratch and use Twine's engine.js

This is something I have been looking into recently, as I do like working with Twine to create interactive stories. Firstly, I prefer to know EXACTLY how the HTML structure works, what the CSS is, and apply javascript where necessary. I would hate to write everything from scratch, rendering all those variables and special syntax that Twine uses.

Ideally, I would use Twine to do the following:

1) Take advantage of its wealthy macro system to speed up the process of development massively.
2) Still be able to fully customise the UI without the fear of losing functionality, in addition to the Javascript code I already have.

I do have a few questions relating to Twine and how much it will affect the current state of my game, which currently looks like this:

9eOyXQ2.png

So the first one is: what JS files would I need to include into my HTML document (although frankly I could just look at a generated HTML file from Twine and see what that says, so perhaps not as important)

Secondly, while I can of course back-up my game first before testing, I would just like a heads up on what kind of pitfalls I would get into. Now I do understand that the engine will manipulate certain parts of the HTML document to do certain things, like when the passage is changed it will fade into the next passage (#passage and .passage, depending on format). In a way, this would be my own story format, so I won't be using any existing formats.

In the aforementioned statement, I would finally ask: Is there any good places to look up documentation or an API on the Twine engine and how it works? (emphasis on `how`)

I do love Twine, and taking advantage of its macro system in particular would take away a lot of the burden. I could strip away a lot of the Twine code and just use its macro system, applying that to my passages I am not 100% sure. The version of Twine I was thinking of using was the original, since I prefer that syntax over Twine 2.0. I also prefer Github over Bitbucket's UI to navigate code.

Thank you for any suggestions.

Comments

  • I think that the easier way to approach this would be to create a new Story Format based on your HTML/CSS.
  • re: the Twine engine

    Each of the main 1.x story formats (Sugarcane, Jonah, Responsive, SugarCube, and Snowman) contain their own javascript engines.

    The built-in story formats (Sugarcane, Jonah, and Responsive) share an engine which consists of two files.
    The first file is engine.js which contains the basic utility functions shared by all three formats.
    The second file is code.js and both Jonah and Sugarcane have their own version of this file.

    SugarCube and Snowman have their own javascript engines.
  • greyelf wrote: »
    re: the Twine engine

    Each of the main 1.x story formats (Sugarcane, Jonah, Responsive, SugarCube, and Snowman) contain their own javascript engines.

    The built-in story formats (Sugarcane, Jonah, and Responsive) share an engine which consists of two files.
    The first file is engine.js which contains the basic utility functions shared by all three formats.
    The second file is code.js and both Jonah and Sugarcane have their own version of this file.

    SugarCube and Snowman have their own javascript engines.

    Hmm... So in theory, I could just include a <script src="Twine/engine.js"> and just call whatever function renders passages whenever a new passage is loaded? Hopefully I won't need to tweak too much to get it working. Thanks for the info.
  • The engines know about the structure of specific parts of the HTML DOM (where story data is found, where the passage contents get shown, etc...) and expect those parts to exist.

    I have never looked at the engine from the point of view of using it like an API so I am not sure how well that will work.
  • The Snowman story format is close to a blank slate.
  • You might also check out Protagonist:

    https://github.com/massivedanger/protagonist

Sign In or Register to comment.