Howdy, Stranger!

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

"Re-entering" story? (resolved)

edited February 2015 in Help! with 1.x
Hi all! I'm new to Twine, forgive me if there's an answer to this somewhere (although I did take a look at the wiki and old google group to no avail). Essentially, the goal is to have the player reach a certain point in the story when they're given a link to a game to play (which is simple enough achieve with a hyperlink in Twine). Once the game is complete, the game can use whatever link I give it to "re-enter" the Twine story. I'm not sure if what I'm attempting is outside the scope of Twine, since I'd need a link to a passage that is not accessible any other way. There's no way to get the link since there's no "natural" way to play to the isolated passage (step 3 in the pic). Here's a pic to try and illustrate what I'm attempting:


The only other side note would be that the game I'm linking to is an html5 game. I haven't seen anything that would imply Twine could support it (hence the linking) but let me know if I missed something. Is there a way to make a system like this work? Thanks for reading! :)


  • Hello lazybraingames,

    As far as I know, the easiest way to achieve this is with the StorySettings passage. This is a special passage which sits in your Twine game and lets you control certain aspects of your game.

    To create one in your game, go to Story -> Special Passages -> StorySettings. This will create the Storysettings passage and when opened will show you a list of checkboxes.

    To do what you require, you will need the following two settings checked:

    - Let the player undo moves
    - Automatic URL hash updates

    The first one allows players to move BACK through the story using the browser's back button, and while not important to what you want to do, it is necessary to enable the second setting. The Automatic URL hash updates means that the URL of your twine game is unique depending on which passage you are on.

    So, your Step 1 passage might be and your Step 3 passage might be

    So, you will need to enable this, and play through your game to find the unique URL for your 'Step 3' passage. You may have to create a way to get to the Step 3 passage the 'natural' way, so that you can generate the URL, but there are ways to hide this from the player - i.e. playing through yourself, and then putting the link in a css class with display:none set, or something similar.

    Once you have done this, you should be able to hyperlink from your HTML 5 game back into the Twine game at Step 3 using the unique URL. Also, because the unique URL will be long and random, it would be hard for somebody to guess it. It would be *possible*, but unlikely, unless somebody is making a conscious effort to cheat. And that's hard to stop. :)

    I hope this helped.
  • Thanks for the reply Bonfire Dog!

    I get the concept of what you're saying although I lack any real CSS knowledge :( If I understand correctly, in order to play through naturally I'd have to upload the game, play to step 3 & retrieve the link, and then edit said link? Wouldn't that involve uploading a new version with the hidden/edited link? Quite a paradox!

    Thanks again for your help :)
  • Basically, you would be creating a natural path through the game at first, just linking the passages as below:

    Step 1 (where you usually would say go to this HTML game!) -> Step 2 -> Step 3 (the passage that you would link to from the HTML game).

    You would then play through, and once you have reached step 3, get your link. You can then paste that link into the end of your HTML game, or at whatever point you would want the player to 'rejoin' the Twine game. So far, so good.

    However, now you have a problem, as where it should just say something like the following in the passage Step 1:
    [[Click here to play the HTML5game!|]]
    It in fact says this:

    [[Click here to play the HTML5game!|]]

    [[Step 2]]
    You don't want people to be able to click that link and go to Step 2, but if you just get rid of that link from the passage text, you risk breaking the URL that you generated earlier for Step 3.

    Therefore, you need to have the link exist in the passage, but have it hidden from the player. The way to do this is with CSS, and its quite easy.

    So, firstly you create a CSS class around the Step 2 link in the passage text, like this:

    <<div class="step2">>[[Step 2]]<>

    Doing this allows us to change that link's properties with CSS.

    Now, in your Twine game, create a new stylesheet by right-clicking, and into it place the following:

    .step2 {

    This means that, though the link remains on the page, nobody who plays the game will be able to see it, and instead will only see the link to the HTML 5 game. When they come back into the Twine game from the HTML5 game at a later point, it will drop them in the Step 3 passage, as if they had passed through Step 2.

    Obviously, the above CSS should only be applied after you have played through the 'game' naturally and got your unique URL, otherwise you won't be able to see it to click it either!

    Hope this makes sense.
  • Thank you so much for taking the time to help me out with this!

    So, I took a crack at getting the style sheet working, although I feel like maybe it should be initiated in the start passage somehow? Some of my struggle is just from not being familiar with css I suspect. Here's a pic of what I'm experiencing on my end:


    My best guess is that the passage isn't aware that the style sheet is trying to tell is something, hence the macro error? That's my best guess anyways. Thank again!
  • Hmm. Your problem may be that I'm an idiot.

    Your passages are fine, they all link nicely. Storysettings are good, and stylesheet is good. You don't need to initiate the stylesheet - any stylesheet (unless it is given a specific tag to tie it to a specific passage) will apply throughout the game, from the start.

    The problem is that I somehow managed to mess up a very easy line of HTML.

    For your Step 2 link in your 'step 1' passage, it should be this:
    <div class="step2">[[step2]]</div>

    I think I had a formatting problem in my post, and in trying to fix it messed up the code. The bad code I gave you was why you were getting the error message.

    Try that.
  • Success! The choice is now hidden from the player and things can transition to and from the game now! I threw together a little thing to try it out...

    The only loose end that I didn't notice earlier is that a second tab is generated (at least in firefox) so I'm not sure if there's a way to shore that up. Now that I have some command of this css stuff I probably work it out via style sheet.

    You are a gentleman and a scholar Bonfire Dog!
  • That's alright! I've just tested it in Chrome and it works fine, and in fact the transitions are really slick - a good idea, I think.

    The issue with tabs is a HTML issue - the Twine engine is set so that external links open in new tabs. You can change this with the target attribute.

    So the best thing to do is to make the HTML 5 game link into a proper HTML link, and tell it to open in the same window:
    <a href="" target="_self">head on out</a>
Sign In or Register to comment.