@Sage
Hey thanks! Not sure why it won't import for you - if I save it locally and then import that file into Twine it works for me. I'll do a proper write-up later this week (ping me if I forget to link it), but in the meantime I can describe things a bit here.
What @Claretta described would be the sane way of accomplishing this. If you think of the page as a series of layers stacked up, the structure from bottom to top is:
Sky - opaque
Trees - silhouettes only, transparent
Interior - one big image with a transparent window
Content - the space the Harlowe story content is displayed in, sized to visually fit the train window.
Overlay - the part that fades in and out to cover up everything under it
Controls - the volume toggle and sidebar (though I ended up just removing the sidebar since the story didn't need it)
However, I was experimenting with having a more traditional "game" engine running alongside Harlowe, so there are actually three stacked static images of the trees being moved across the page repeatedly at staggered intervals. That way, if it worked, I would know that the engine was happily running alongside Harlowe without them interfering with each other. So this is not an efficient way to create this effect, but it proved the underlying concept works, which was the real goal here. (I also had the idea early on that being able to change the speed of the trees going by might be useful, but that didn't materialize.)
So what I did was create the whole page first, with the Content as an empty placeholder, then separately create my story in Harlowe without worrying about formatting. Once those were both done, I did some cut-and-paste stitching and experimentation to combine them into one file.
Most of the heavy lifting happens in this external Javascript file, which gets loaded along with my story file. If someone creating a story is comfortable working with Javascript, this seems to be the way to go to get more complex scripting working - once that's loaded, I can just add macros to my story like (set: $result to window.Engine.fadeCycle(2000)) to call functions from that file. Anyone who wants to can feel free to harvest whatever they want from that file - it's a little clunky in spots since I was writing it in a rush, but it's a pretty small game engine framework, running a tick() function, calculating loop timings and FPS, stuff like that.
Embedding Harlowe is not for the squeamish right now, but it looks like Harlowe 2.0 is making more of an effort to stay in its container and play nicely with others, so it may be more practical to do something like this in the future, and maybe even make a slightly-modified version of Harlowe that's designed to be embedded in an existing page.
Hopefully some of that is helpful - I told you I was horribly wordy.
@gnustoboz
It seems to "function," I suppose... but the images don't appear (and yes, I put them in a sub folder called images).... so it's odd. The background is just white.
Which actually does make me think of @Claretta 's example. Perhaps it all works well but my Z-layer is off... or it isn't transparent so, yeah maybe it's there... but I can't see it. Does that make sense?
Should you now go and put it all into a convenient .zip file for me? No way. I can understand the underlying structure of things and I was just trying to learn how to create something as cool as you did on my own. I don't think that means I need to copy your game outright.
Honestly it's helpful enough that you explained it. We've all got lives outside of Twine... even the creators, I'm sure.
@Sage - Okay, I get you now. Yeah all of the background images, animation, sound etc. won't work when you import it, since I plugged that stuff into the file manually after exporting it and just put in some (set:) macros to get them talking to each other.
That said, some of this stuff you can do from within Twine/Harlowe with just CSS and some one-line scripts, but other parts I think would require some post-export fiddling around - for example, the background sound loop needs to be loaded and running at all times, but Harlowe removes the current passage and creates a new one every time it renders a passage, so the <audio> element can't be part of a story passage.
You can view the source of the story itself to see how I stitched it together, and the external source files are just these two: Engine.js Engine.css
var body = document.getElementsByTagName("body")[0],
You're recursively iterating over all elements in the document searching for any named "body".
document.getElementsByTagName() returns an HTMLCollection, which is a live node list.
After going through the trouble of creating the HTMLCollection, you throw it away, caching the first result only.
Of all the worst things that could happen, this is the worst possible thing.
Unless you need to support IE6 (or something equally antediluvian), you'd be much better off using the <Element>.querySelector() method to retrieve the core document nodes. For example:
<html> element → document.querySelector("html")
<head> element → document.querySelector("head")
<body> element → document.querySelector("body")
However, you can do even better. The document object has convenience properties for the core document nodes. For example:
<html> element → document.documentElement
<head> element → document.head
<body> element → document.body
var body = document.getElementsByTagName("body")[0],
You're recursively iterating over all elements in the document searching for any named "body".
document.getElementsByTagName() returns an HTMLCollection, which is a live node list.
After going through the trouble of creating the HTMLCollection, you throw it away, caching the first result only.
Of all the worst things that could happen, this is the worst possible thing.
OK, thanks.
This was just code I copied from the forum here done by someone else. Good to know it needs refinement, though.
I don't actually use it in my story, as I just insert <divs> manually in the base HTML structure by editing the SugarCube header, so that when Twine assembles the story, it is in there already. I don't know if Harlowe allows that, though.
I don't actually use it in my story, as I just insert <divs> manually in the base HTML structure by editing the SugarCube header, so that when Twine assembles the story, it is in there already. I don't know if Harlowe allows that, though.
That is something I definitely miss moving from 1.x to 2.x. One good thing about Harlowe is that it at least seems to leave the rest of the page alone - it creates and destroys its own elements like <tw-story> and <tw-sidebar> whenever it wants, but any other content I added to the HTML export manually stayed put and rendered normally and everything. However, unlike Sugarcube there are no special passages that are always visible in the compiled page, and of course you can't directly edit the export template without forking Harlowe, which is impractical for most people, so as far as I can tell (and I'd love to be wrong about this so someone please tell me if I am), if you want to modify the page itself outside of the story passages you have to edit the HTML yourself after exporting, which is possible but makes for a pretty clunky workflow.
Once I missed the deadline—I fell asleep in my chair writing—I meant to come back and still make a submission, but I've let that slide. Still, I got what I wanted out of the challenge: basic knowledge of Harlowe and a renewal of interest in IF.
However, it's crappy of me to have started a challenge and then not make it! I'm seriously embarrassed!
The problem with the RPG is that I dove into the beta headfirst because it has a way to save progress in games. Then, I tore out all my combat and replaced it, monsters and all, with Dragon Warrior 1's. However, the bugs with the beta kept that game from working. I did so much work and the game was so much different that it just broke me down. I didn't want to go back to the way-old version without saves and without a working combat system. Release Harlowe didn't evaluate expressions correctly and Beta couldn't work with decimals, so I was just trapped either way. Neither release nor beta would work with my current edition!
I'm now focused more on finishing my basic RPG in Harlowe as a guide, like my one in Sugarcane and SugarCube. I'll link to it here, but otherwise, nothing I can write will top the submissions we had this SSSC!
Comments
Hey thanks! Not sure why it won't import for you - if I save it locally and then import that file into Twine it works for me. I'll do a proper write-up later this week (ping me if I forget to link it), but in the meantime I can describe things a bit here.
What @Claretta described would be the sane way of accomplishing this. If you think of the page as a series of layers stacked up, the structure from bottom to top is:
However, I was experimenting with having a more traditional "game" engine running alongside Harlowe, so there are actually three stacked static images of the trees being moved across the page repeatedly at staggered intervals. That way, if it worked, I would know that the engine was happily running alongside Harlowe without them interfering with each other. So this is not an efficient way to create this effect, but it proved the underlying concept works, which was the real goal here. (I also had the idea early on that being able to change the speed of the trees going by might be useful, but that didn't materialize.)
So what I did was create the whole page first, with the Content as an empty placeholder, then separately create my story in Harlowe without worrying about formatting. Once those were both done, I did some cut-and-paste stitching and experimentation to combine them into one file.
Most of the heavy lifting happens in this external Javascript file, which gets loaded along with my story file. If someone creating a story is comfortable working with Javascript, this seems to be the way to go to get more complex scripting working - once that's loaded, I can just add macros to my story like (set: $result to window.Engine.fadeCycle(2000)) to call functions from that file. Anyone who wants to can feel free to harvest whatever they want from that file - it's a little clunky in spots since I was writing it in a rush, but it's a pretty small game engine framework, running a tick() function, calculating loop timings and FPS, stuff like that.
Embedding Harlowe is not for the squeamish right now, but it looks like Harlowe 2.0 is making more of an effort to stay in its container and play nicely with others, so it may be more practical to do something like this in the future, and maybe even make a slightly-modified version of Harlowe that's designed to be embedded in an existing page.
Hopefully some of that is helpful - I told you I was horribly wordy.
It seems to "function," I suppose... but the images don't appear (and yes, I put them in a sub folder called images).... so it's odd. The background is just white.
Which actually does make me think of @Claretta 's example. Perhaps it all works well but my Z-layer is off... or it isn't transparent so, yeah maybe it's there... but I can't see it. Does that make sense?
Should you now go and put it all into a convenient .zip file for me? No way. I can understand the underlying structure of things and I was just trying to learn how to create something as cool as you did on my own. I don't think that means I need to copy your game outright.
Honestly it's helpful enough that you explained it. We've all got lives outside of Twine... even the creators, I'm sure.
Thank you again,
—Sage.
Damn
That said, some of this stuff you can do from within Twine/Harlowe with just CSS and some one-line scripts, but other parts I think would require some post-export fiddling around - for example, the background sound loop needs to be loaded and running at all times, but Harlowe removes the current passage and creates a new one every time it renders a passage, so the <audio> element can't be part of a story passage.
You can view the source of the story itself to see how I stitched it together, and the external source files are just these two:
Engine.js
Engine.css
- You're recursively iterating over all elements in the document searching for any named "body".
- document.getElementsByTagName() returns an HTMLCollection, which is a live node list.
- After going through the trouble of creating the HTMLCollection, you throw it away, caching the first result only.
Of all the worst things that could happen, this is the worst possible thing.Unless you need to support IE6 (or something equally antediluvian), you'd be much better off using the <Element>.querySelector() method to retrieve the core document nodes. For example:
<html> element → document.querySelector("html") <head> element → document.querySelector("head") <body> element → document.querySelector("body")However, you can do even better. The document object has convenience properties for the core document nodes. For example:This is probably the most impressive Twine I've seen.
OK, thanks.
This was just code I copied from the forum here done by someone else. Good to know it needs refinement, though.
I don't actually use it in my story, as I just insert <divs> manually in the base HTML structure by editing the SugarCube header, so that when Twine assembles the story, it is in there already. I don't know if Harlowe allows that, though.
Thank you kindly.
That is something I definitely miss moving from 1.x to 2.x. One good thing about Harlowe is that it at least seems to leave the rest of the page alone - it creates and destroys its own elements like <tw-story> and <tw-sidebar> whenever it wants, but any other content I added to the HTML export manually stayed put and rendered normally and everything. However, unlike Sugarcube there are no special passages that are always visible in the compiled page, and of course you can't directly edit the export template without forking Harlowe, which is impractical for most people, so as far as I can tell (and I'd love to be wrong about this so someone please tell me if I am), if you want to modify the page itself outside of the story passages you have to edit the HTML yourself after exporting, which is possible but makes for a pretty clunky workflow.
However, it's crappy of me to have started a challenge and then not make it! I'm seriously embarrassed!
The problem with the RPG is that I dove into the beta headfirst because it has a way to save progress in games. Then, I tore out all my combat and replaced it, monsters and all, with Dragon Warrior 1's. However, the bugs with the beta kept that game from working. I did so much work and the game was so much different that it just broke me down. I didn't want to go back to the way-old version without saves and without a working combat system. Release Harlowe didn't evaluate expressions correctly and Beta couldn't work with decimals, so I was just trapped either way. Neither release nor beta would work with my current edition!
I'm now focused more on finishing my basic RPG in Harlowe as a guide, like my one in Sugarcane and SugarCube. I'll link to it here, but otherwise, nothing I can write will top the submissions we had this SSSC!