Howdy, Stranger!

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

How to change an image based on....something?

Hi there, I'm pretty new to Twine but learning a lot very quickly. I'm working on a small adventure game using Twine with Sugarcube and having a lot of success so far, but there is one small problem I'm having that I just can't figure out. I've tried searching the forums, and have tried a bunch of techniques, but I can't get anything to work.

Here's what's going on:

I am using the "Earth's Story Illustrated" stylesheet from this page http://www.glorioustrainwrecks.com/node/5163 (the one with the classroom), and creating an illustration for each passage.

What I'd like to do is make it so that depending on the player's actions, the image changes. For example: passage 1 shows a table with some items on it, and connects to passage 2, which is a close up of a particular item. On passage 2, the player can take the item. When they go back to passage 1, I'd like to change the image shown so that it makes sense with the text beneath. (Hopefully that made sense.)

I've tried using a few variations on addclass/removeclass/toggleclass to change the image, or add/remove a transparent image on top of a background, with no success, as well as some of the techniques listed in this thread http://twinery.org/forum/index.php/topic,1541.msg3033.html, and a few of my own ideas. I'm totally stumped.

Any advice or suggestions would be very greatly appreciated, thank you!

Comments

  • Hmm. I am not sure if I'm misunderstanding, but I'm fairly sure that images can be "swapped" simply by using conditional statements (if, else, else if) and variables.

    Here's an example of what I'm thinking of (not tested yet, mind you):

    /% Start of Passage - Let's Call it "Classroom" %/

    <<if $Player_Has_Apple is false>>[img[DeskWithApple]]

    That apple looks good...and you're pretty hungry...

    [[Take Apple|Apple]]
    [[Leave|Hallway]]
    <<else>>[img[DeskWithoutApple]]

    The desk is empty...as is your lonesome heart...

    [[Leave|Hallway]]

    <<endif>>

    The Apple passage would then show the closeup, give a little flavor text, like "You snatch the apple and bite into it with a voracity of a thousand starving wolves," and, of course, change the variable $Player_Has_Apple from false to true, and then link back to the "Classroom" passage (which should then run the if statement again, determine that the variable is no longer false, and show the alternative image and text).

    Is that sort of what you're going for, or something more complex? If you've got more than one item in the room, and the player has to be able to pick those items up in any order they wish, then it can get complicated. If you're simply using static images, you'd have to literally make a separate image (and conditional statement) for each possible combination and permutation...which gets pretty awful pretty quickly.

    You could, theoretically, achieve this a bit more simply by having one master background image (preferrably set to the background of the <div> in the Stylesheet) and a bunch of separate "sprite" images for the items. Basically, the background might be a static image of desk, and then you'd create a separate image of an apple, and a book, and a pencil to go on the desk. Then you'd have to probably give each of those images a custom class in the CSS, set their position to absolute, and manually set their coordinates. This is still a goodly amount of work, but your code should then be a lot more elegant, readable, and maintainable, since you'd only need to have a list of separate conditionals, one for each item, instead of literally drawing every possible scenario and testing for it with a hundred lines of code.

    Hope this is helpful, at least somewhat.

    PS: The above doesn't take the specific stylesheet, or how its implemented, into account, as I'm not familiar, but the gist of it, with some adaptations, should hopefully be somewhat universal.
  • bugbyte wrote:

    What I'd like to do is make it so that depending on the player's actions, the image changes. For example: passage 1 shows a table with some items on it, and connects to passage 2, which is a close up of a particular item. On passage 2, the player can take the item. When they go back to passage 1, I'd like to change the image shown so that it makes sense with the text beneath. (Hopefully that made sense.)


    I'm assuming this is something which may need to work multiple times (i.e. the player could pass through the table room multiple times, so the the looted table needs to be stateful).

    First, you'll need some extra CSS.  For example:

    /* Default header image style (used by all passages without a matching style below). */
    .passage .header { /* n.b. You should already have something like this from The Earth's Story Illustrated. */
    background-image: [img[]];
    }

    /* Passage-tag header image style overrides (for general areas). */
    .forest .passage .header {
    background-image: [img[]];
    }
    .office .passage .header {
    background-image: [img[]];
    }

    /* Passage-name header image style overrides (for specific passages). */
    .passage[data-passage="Lonely Glade"] .header {
    background-image: [img[]];
    }
    .passage[data-passage="Office Basement"] .header {
    background-image: [img[]];
    }

    /* Flag-name header image style overrides (for flagged events). */
    .table-looted .passage .header {
    background-image: [img[]];
    }
    I did a full workup there as an example.  The last one (.table-looted .passage .header) is what you'll want to focus on here.

    Second, you'll need some logic to ensure that the class is active when it needs to be.  The absolute simplest thing you could do would be to put a conditional at the top of the passage, which makes changes based on a $variable.  For example:

    <<if $tableLooted>><<addclass "body" "table-looted">><</if>>\
    rest of the table room passage
    The $tableLooted would, obviously, be set when the table was looted.  Since you must be tracking that the items were taken from the table, you could probably just use a check against that in the conditional.
  • Thanks so much for the quick replies!

    @TheMadExile: Yes, this looks much more like what I'm trying to do. I am tracking the state of the items, I just couldn't piece together how to hook it up properly with the CSS. I haven't tried it yet but I really appreciate the input. If nothing else, this is for sure a nudge in the right direction. Thank you!

    Update: Works perfectly! I even fancied it up a little bit with transparent images and layers. Thanks again!
Sign In or Register to comment.