Howdy, Stranger!

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

[SugarCube] ing on images in Twine comic

I'm working on a Twine comic.  When I was doing linear-narrative tests, I got a lot of success out of Leon's replace macros; it's been good for advancing from panel to panel on the same page, as well as nifty multi-stage panel effects.  But it's time to figure out how to get choice in there, so I'm migrating fully over to SugarCube.  I've run into a couple problems and was wondering if I could get some help.

(If you want an idea of the basic functionality I'm working with, and what I have functioning in SugarCane, here's an example (downloadable from my dropbox, since it's a little too big to attach to the post):  As a structural note:  each panel is its own passage, they do whatever they do <<replacelink>>-wise and then <<display>> the next panel where it needs to go.)

The main issue I was hoping SugarCube could fix is this: there are times I'd want to provide the player with a panel containing a few options of what to click on; this would change what panels are shown subsequently, add panels somewhere else on the page, things like that.  I was really jazzed about using SugarCube's <<click>> macro, until I realized it only takes text as arguments and only outputs links with straight text insideso my pipe dreams of <<click [img[image]]>>,  <<click "[img[image]">, and <<click "<img src='' /"> are all moot.  I'd really like to find some way of working around that limitation.

A key aspect of this functionality is that once the choice is clicked it needs to remove itself, or itself and the other choicesthat part I mostly figured out, with <<click>>s that destroy themselves by replacing the <div> they live inside.  But again, click's a no-go. I felt pretty clever at fixing that particular contingency with &lt;div id=&quot;choices&quot;&gt;&lt;&lt;replacelink&gt;&gt;[img[choice-a]]&lt;&lt;becomes&gt;&gt;&lt;&lt;replace &quot;#choices&quot;&gt;&gt;&lt;&lt;display panel-a1&gt;&gt;&lt;&lt;/replace&gt;&gt;&lt;&lt;/replacelink&gt;&gt;&lt;/div&gt;, but it throws up a pretty intense multi-paragraph JavaScript error.

Sohere is my wishful idea of how it works:
<div id="choices">[img[choice-header]]
<<click [img[choice-a]>><<replace "#choices">><<display panel-a-p1>><</replace>><</click>>
<<click [img[choice-b]>><<replace "#choices">><<display panel-b-p1>><</replace>><</click>>
<<click [img[choice-c]>><<replace "#choices">><<display panel-c-p1>><</replace>><</click>>
At best, I'd like to figure out if I can break open SugarCube and modify the <<click>> macro so this could work, but right now, my javascript is patchy, and my jquery a fleeting dream.

I feel kinda cruddy for a "here's an abstract problem with a probably esoteric solution" sort of post, but I've hit a wall and felt like reaching out.  Let me know if I haven't explained myself well.


  • Allowing macros which accept the link markup ([[link]]) to also accept the image markup ([img[src]]) has been on my TODO list for a while.  I suppose now would be as good a time as any to get that done.

    So, consider this official approval of your feature request.  It will be in the next SugarCube release.
  • In the meantime...I know this probably isn't the best workaround, but have you tried to set it up so that when you click an image/panel, the proceeding passage carries over some preceding stylesheets with what you want to remain (e.g. consistent room background) but brings in a new sheet that removes the chosen elements?

    As an example, I've currently been experimenting with the Jonah story format which preserves previous passages (great, sometimes), but I wanted to "refresh" the page so that new passages could fill the old ones' space. Kind of a similar deal to what you're trying, I think.

    How I did this was that I targeted the specific old passages in a separate stylesheet linked to a new passage that you could enter via an option provided by the old passage. So, for example:

    [Title:oldpassage    |  Tag:bg (background)
    Old passage text.

    Option A, B, C.]

    [Title:optA  |    Tag:bg, rmvold (e.g. #oldpassage {display:none;})
    New passage A.

    Option D, E, F.]

    The downside to this method is probably obvious, in that if you're removing lots of stuff, you'd need loads of stylesheets for each item removed and have to remember to keep proceeding passages tagged with the removal stylesheets. That is, if you don't remove many items in one fell swoop, anyway, but it's certainly not a fantastic solution even if you do find yourself doing that. Nevertheless, it's an okayish toss-together solution, if you ask me.
  • Since I needed to publish a release anyway, this has been released as part of SugarCube v1.0.16.
  • WOW, this is great, this is really wonderful.  Works beautifully.  Thanks so much!  This'll solve a lot for me.

    @Gmr_Leon, I'd totally forgotten about tagging passages.  I can see that potentially coming in handy.

Sign In or Register to comment.