Howdy, Stranger!

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

Changing background image from passage to passage

Hello everyone,

I am wondering if it's possible to change the background of my story with each passage?

I have set up my background image in the stylesheet as:
html {
  background: [img[background]] fixed, dodgerblue;
  background-size: cover;
  min-height: 100%;
  height:100%;
}

I am using Twine 1.42 and my story format is SugarCane.

Thanks,
Ben

Comments

  • One way you can change the style of passages is by assigning a passage tag and then using CSS selectors based on that passage tag.

    eg.
    Say I want one set of passages to have a forest background and another set of passages to have a desert background. I would give all the first set of passages a tag of forest and the second set a tag of desert.
    Then I would use CSS like the following to change styles:
    body {
      min-height: 100%;
      height:100%;
    }
    
    body[data-tags~="forest"] {
      background: [img[forest]] fixed, dodgerblue;
      background-size: cover;
    }
    
    body[data-tags~="desert"] {
      background: [img[desert]] fixed, dodgerblue;
      background-size: cover;
    }
    
  • edited July 2015
    To aovid sudden changes being jarring, you also want to add in CSS transitions or animation properties into each new background css entry too, like:
    body[data-tags~="desert"] {
      background: [img[desert]] fixed, dodgerblue;
      background-size: cover;
    -webkit-transition: all 3s linear;
    transition: all 3s linear;
    -moz-transition: all 3s linear;
    }
    

    If you want to do anything more complex like background changes within passages, or multiple layered backgrounds, then I strongly recommend Sugarube for its <<addclass>> and <<removeclass>> macros.
  • @Claretta
    Would it be possible for you to show us a basic example of how to use the <<addclass>> and <<removeclass>> macros?
  • edited July 2015
    If for example you store images in a div called images, you'd name each with another selector like this:
    #images.flowers { image link goes here  }
    
    #images.ponies { image link goes here  }
    

    Then if you wanted to swap the images you'd go

    <<addclass "#images" "ponies">>
    <<removeclass "#images" "flowers">>


    Which would swap them, by adding the ponies class to overwrite the data being referenced in #images and then removing flowers to ensure that it didn't hang around to mess anything up. If you had transitions or animation you need to make sure you don't remove the class being transitioned from until it's complete, so you'd write something like

    <<addclass "#images" "ponies">>
    <<timedcontinue 3.1s>>
    <<removeclass "#images" "flowers">>


    There's a lot more complex stuff you can do with it. The demo of my game should be out in a month or two, then you'll see some really complex animation tricks with these macros.
  • Wow. Thanks everyone!
  • @Claretta Wow! Really? I'd LOVE to see it.
  • Claretta wrote: »
    To aovid sudden changes being jarring, you also want to add in CSS transitions or animation properties into each new background css entry too, like:
    body[data-tags~="desert"] {
      background: [img[desert]] fixed, dodgerblue;
      background-size: cover;
    -webkit-transition: all 3s linear;
    transition: all 3s linear;
    -moz-transition: all 3s linear;
    }
    

    If you want to do anything more complex like background changes within passages, or multiple layered backgrounds, then I strongly recommend Sugarube for its <<addclass>> and <<removeclass>> macros.

    Hello Claretta,

    I have tried the above code, but it does not seem to work for background fade in. I have made it work for passages but not backgrounds. Any tips?

    Thanks,
    Ben
  • edited August 2015
    Maybe transitions just don't work with that method of displaying backgrounds and you'll need to find another way to display backgrounds.

    You might be able to do something like
    html.bluebackground {
      background: [img[bluebackground.jpg]] fixed, dodgerblue;
      background-size: cover;
      min-height: 100%;
      height:100%;
    -webkit-transition: all 3s linear;
    transition: all 3s linear;
    -moz-transition: all 3s linear; 
    }
    
    html.redbackground {
      background: [img[redbackground.jpg]] fixed, dodgerblue;
      background-size: cover;
      min-height: 100%;
      height:100%;
    -webkit-transition: all 3s linear;
    transition: all 3s linear;
    -moz-transition: all 3s linear;
    }
    

    And then use the passage tags bluebackground and redbackground to change.
  • Claretta wrote: »
    Maybe transitions just don't work with that method of displaying backgrounds and you'll need to find another way to display backgrounds.

    You might be able to do something like
    html.bluebackground {
      background: [img[bluebackground.jpg]] fixed, dodgerblue;
      background-size: cover;
      min-height: 100%;
      height:100%;
    -webkit-transition: all 3s linear;
    transition: all 3s linear;
    -moz-transition: all 3s linear; 
    }
    
    html.redbackground {
      background: [img[redbackground.jpg]] fixed, dodgerblue;
      background-size: cover;
      min-height: 100%;
      height:100%;
    -webkit-transition: all 3s linear;
    transition: all 3s linear;
    -moz-transition: all 3s linear;
    }
    

    And then use the passage tags bluebackground and redbackground to change.

    Okay so I just tried that and it didn't work. The background simply just didn't display. What is another way that I can display and transition backgrounds?

    Thanks,
    Ben
  • edited August 2015
    I have no idea then. I'm just going by what works in SugarCube. SugarCane might be more limited, as it wasn't really designed for this kind of visual story.

    It would be possible to use GSAP to do all this if you really want to keep SugarCane. Using the CSSPlugin you can change the html element (or another layer) to the required .redbackground or .bluebackground. This is basically the same as SugarCube's <<addclass>> macro. Of course you'd need to add GSAP into the header directly in the Twine Targets SugarCane directory.
Sign In or Register to comment.