Howdy, Stranger!

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

Change font of all passages based on player decision?

Hi! I am using 1.4.2 and Sugarcube 2.10.0, and I am a total newbie to Twine. I am writing a story in which one of the choices the player can make corrupts him gradually, distorting his perceptions. I would like to signal to the player that this is happening by changing the font of the passages encountered, so that the text of the game gets progressively harder to read as the corruption gets worse. I have a beautiful pack of Halloween fonts that will do nicely for this. Anyway, I've thought of one way to do this which seems to work, which is to wrap each passage like so:
<<if $corrupt is 1>> <span style='font-family:BloodyBlessing'>This is totes text. Observe its text-ness.

Yes
No
</span> <</if>>

...but that seems sort of sloppy. What I am hoping is that there is some other, better way to do this. My theory about one possible better way to do this would be if I could apply new tags to all story passages based on a variable (like, if corrupt = 1, give all passages new tag "corruptOne

Comments

  • My first reaction to this is you'd probably want to add global CSS rules to do this instead of having to apply styles or tags to each individual passage. I don't believe there's a way to do this in SugarCube without writing JavaScript (TME might know a trick to do it), but one way to do it would be to add something like this in your stylesheet:
    body.corrupted { font-family: BloodyBlessing };
    
    And then, when you want to change the appearance, write this code in your passage:
    <<set $('body').addClass('corrupted')>>
    
    This is uses jQuery to apply the style.
  • edited October 2016
    AthertonMe wrote: »
    I would like to signal to the player that this is happening by changing the font of the passages encountered, so that the text of the game gets progressively harder to read as the corruption gets worse. I have a beautiful pack of Halloween fonts that will do nicely for this.
    It sounds like you simply want to change the font family for all passages from time to time. If so, then the easiest thing would be to apply a class to the <body> element via the <<addclass>> macro from the PassageDone special passage.

    Since it sounds like you want this to trigger off of the value of the $corrupt story variable, you could do something like the following: (goes in the PassageDone special passage; simply a passage with that, case-sensitive, name)
    <<if $corrupt gt 0>><<addclass "body" `"corrupted-" + $corrupt`>><</if>>
    
    If the value of $corrupt is greater than zero—don't forget to initialize it to 0 within the StoryInit special passage—it adds a class to the <body> element named corrupt-#, where # is the value of $corrupt—e.g. corrupt-1, corrupt-2, etc. This uses a backtick expression (near the top) to concatenate the base class name with the value of $corrupt.

    Also, if necessary, you could accomplish the same thing without using the value of $corrupt as part of the class name via a longer <<if>> or <<switch>>.

    And the necessary CSS: (goes in your Story Stylesheet)
    body.corrupted-1 {
    	font-family: BloodyBlessing;
    }
    body.corrupted-2 {
    	font-family: ReallyBloodyBlessing;
    }
    body.corrupted-3 {
    	font-family: SuperDuperBloodyBlessing;
    }
    
    Obviously, I made up the last two font names, however, you should get the idea.

    Basically, more or less what CK advised with some extra details and caveats.

    klembot wrote: »
    body.corrupted { font-family: BloodyBlessing };
    
    […]
    <<set $('body').addClass('corrupted')>>
    
    You were on right track. I do have a few very minor nitpicks though.
    1. Your CSS has the semi-colon in the wrong place.
    2. SugarCube has a built-in suite of DOM manipulation macros, so you don't really need JavaScript here—though, there's nothing wrong with using it if that's someone's preference.
    3. I generally advise the use of either <<script>> or <<run>> for code execution, rather than <<set>>.
  • Thank you both!!

    I have tried TheMadExile's suggestion, and it works beautifully (no surprise there). Thanks! My game is going to be a lot better because of you.

    BTW, I ended up posting my question before I meant to. Meaning to hit Save Draft, I clicked a button... and then, suddenly, as far as I could determine, my post was Beyond Recall. I am pleased to see that I seem to have asked my whole question.

    Thanks again, both of you!

  • Update: I realize now that I ought to have mentioned that my game does have existing tags, but I didn't, and I think that just possibly the results of this are interesting enough to mention, at least for people who are as new to Twine as I am.
    If you add a class to a passage with an existing tag (assuming that this wasn't due to some bone-headery on my part, implementation-wise), the class will, it appears, only apply to the sidebar. At least, that is what it looks like. All I actually know is that the font changes only in the sidebar in my tagged passages. Which actually makes a lot of sense, now that I think about it.
    So, I think I have figured out a way to implement TheMadExile's and klembot's solutions without losing the stylesheet I have already set up. Anyway, I have tested it in every way I can think of, and it seems to work. I put it up here both for critique and for other people who want to do this same sort of thing:
    PassageDone reads:
    <<if $corrupt gt 0>><<removeclass "body" "franks">><<removeclass "body" "sailor">><<addclass "body" `"corrupted-" + $corrupt`>><</if>>
    
    Passages formerly tagged "franks" now have no tags, and this is at the top of each passage:
    <<if $corrupt lte 0>><<set $('body').addClass('franks')>><</if>>
    Passages formerly tagged "sailor": 
    <<if $corrupt lte 0>><<set $('body').addClass('sailor')>><</if>>
    ...this makes my old stylesheet apply when $corrupt is 0 (or less)
    Passage with the corrupting effect: 
    <<if $corrupt lt 3>><<set $corrupt = $corrupt + 1>><</if>>
    I put a ceiling on the corruption because the relevant bit of the stylesheet (which uses exactly TheMadExile's model) will only have three different corrupt effects, so I don't want $corrupt to get above 3.
    Passage with a redeeming effect (removes one level of corruption):
    <<set $corrupt = $corrupt - 1>>
    

    Thank you again, TheMadExile and klembot! "My" solution is just a sort of Frankenstein's Monster-esque patching together of your suggestions, and well I know it.
Sign In or Register to comment.