Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
How to fade things in and out with CSS (Sugarcube)
Howler.js seems like a godsend on first glance. It does exactly what I need to do for all my projects both current and future. Only problem is, I can't seem to get it to work, probably because I'm a doofy idiot baby who don't know from code. I assume I need both the audio file and howler.min.js in the folder where the twine project is saved? And I'm not sure what to do from there. I tried opening howler.min.js in notepad, copying all that stuff, and pasting it in a passage tagged script, but I'm not sure that did anything meaningful.
For the record, I do know the difference between Java and Javascript. Also look forward to my sequel thread about lettering.js, which will be even more fun cause it's jquery. I don't even know what the eff that is.
For the record, I do know the difference between Java and Javascript. Also look forward to my sequel thread about lettering.js, which will be even more fun cause it's jquery. I don't even know what the eff that is.
Comments
Though you might also want to take a look at SugarCube. The latest update added in some powerful audio macros that I think are better than Howler's.
The "cacheaudio" command seems particularly useful for a future project of mine where it's necessary for audio tracks to be in synch with visuals. Is there any way to have a loading bar that's actually tied to the loading of the audio? It would be easy enough to fake it by having something spin for however long it would take for the audio to load on a 3G connection (assuming that's the slowest high-speed internet speed), but I'd rather have something that actually shows the loading progress and allow the player to continue once it's loaded. EDIT: Having played around with it a little, I've discovered that there's a loading bar by default. It would be nice to know how to change the style, though. For example, if I wanted a spinning revolver cylinder rather than a bar.
Second, is there any way to, and I'm sure there's a more technical word for this that I don't know, "dismiss" audio from the cache? Because let's say a project has hours of music, sfx, and voice acting. That's a lot of audio to store in memory. But if the story was broken up into discrete chapters, you could load only the audio you need for that chapter and then dismiss it when the chapter is done. Then when the player selects the next chapter, it loads the audio for that one, and so on. Is there any way to do that?
Third, let's say I wanted to do a Metal Gear type thing where, when the player clicks on the menu option to start the chapter, a gunshot sound plays and the screen immediately cuts to black. I've found that to get a sound to play upon clicking a link, it's <<click "Start Chapter">><<audio "gunshot" play>><</click>>, but how would I get the screen to cut to black? That would be a CSS thing, right?
Finally, I notice that looping audio doesn't loop perfectly. There's a delay when it starts again. Is there any way to alleviate this?
There are things that could possibly be done to make long stories more efficient, but that's more a case I think of testing out your story and if any issues arise to present them to SugarCube's developer to take a look at. No point really worrying about things before they arise, since the problem would be best solved on the developer end.
Looping audio is a problem common to every browser audio application. The best way around it is to account for it in the tracks you choose, by for example playing distinct songs as opposed to one long audio loop (which I think sounds better anyway, and slight pauses between distinct songs don't matter), or by having your audio loop fade in/fadeout at start and end so it sounds more natural.
For cut to black I just solved this problem myself recently. You will need to make an image the size of your background (I just go with images 2560 x 1440 to accomodate as many browser styles as possible) and colour it pure black colour, then call it something like zzz.jpg.
Then you link your menu option to a passage with macros called "ZZZ" like the following, assuming the name of the passage you really want to link to is "Continue": Doing this means that when the person clicks on the menu item they'll first get forwarded to ZZZ, then the <<timedcontinue>> macro will convey them to their chosen passage 0.5 seconds later after the fade to black code has been given time to work.
Then in your CSS you have the following, assuming "background" is the image you display normally: What this does is fade the background image to black, and then 0.5 seconds later advances the game to the very next passage (in my example above, called "continue"), then on that passage you just reverse it, removing the class "zzz" and adding the class "background" back.
However you still need to go further. You also need to make the passage area invisible too, so you add this to your css: and then you tag the "zzz" passage with the "invisible" tag, to get it to turn off the passage area during the transition.
You can also go further and hide the UI bar during the switch too, so you add this to your "zzz" passage: and then this to the next passage after it: Then have this in your CSS:
All this combined in SugarCube will fade everything to black then back again a couple seconds later.
Note though you might also want to do something about the "body" CSS element. I have my "body" element permanently turned off (I personally don't see the point of it given that Twine does everything in the passage and html areas), so I cannot draw any examples for that. But it should be along the same lines of making it transparent during the transition like the passage area and adding and removing classes like:
<<addclass "body" "invisible">>
Where you might have some css like: Then you just tell your fade-in passage to <<removeclass "body" "invisible">> if you want to display the body area. The "body" element is overlaid on top of the HTML element, so if you don't make it invisible during the transition (or invisible permanently), then you won't see the fade to black as it will get in the way.
Right. No sense putting the cart before the horse.
Different songs is definitely one way around it. I might have thought of a way to fake a seamless loop, but I need to test it.
However you still need to go further. You also need to make the passage area transparent too, so you add this to your css: and then you tag the "zzz" passage with the "invisible" tag, to get it to turn off the passage area during the transition.
You can also go further and hide the UI bar during the switch too, so you add this to your "zzz" passage: and then this to the next passage after it: Then have this in your CSS:
All this combined in SugarCube will fade everything to black then back again a couple seconds later.
Note though you might also want to do something about the "body" CSS element. I have my "body" element permanently turned off (I personally don't see the point of it given that Twine does everything in the passage and html areas), so I cannot draw any examples for that. But it should be along the same lines of making it transparent during the transition like the passage area and adding and removing classes like:
<<addclass "body" invisible">>
Where you might have some css like: Then you just tell your fade-in passage to <<removeclass "body" "invisible">> if you want to display the body area. The "body" element is overlaid on top of the HTML element, so if you don't make it invisible during the transition (or invisible permanently), then you won't see the fade to black as it will get in the way.
I'll be over here wrapping my mind around that.
http://www.filedropper.com/sugarcubetest
Because it is not listed in the SugarCube documentation, not defined in the SugarCube 1.0.19 header file, and not defined within your sugarcubetest.tws file. So it does not appear to exist.
The code, I posted, however, does come direct from my working story, so I know it works fine once you set everything up.
a. Your background image does not re-appear.
This is because your Continue passage does not contain the follow as suggested by Claretta b. The side-bar does not hide and then reshow.
This is because the time between the adding the hide class to #ui-bar element and then removing it again is so short that it does not have time to do the transition. You can see this by removing <<removeclass "#ui-bar" "hide">> from the Continue passage.
c. Some other problem.
The <<addclass "#ui-bar" "hide">> as it is located currently is causing this issue, since it is after the goto macro, instead of before. It should be before. should be: That said, after looking at the story, beyond that and the other problem greyelf mentioned, I feel the main cause of this issue is that you haven't installed the replace macros. It appears that the timedreplace macro simply isn't firing, which means the story skips over the fade to black instantly. Best guess is the transition is occurring, but currently so fast that you cannot see it.
1. Go back and check what I read about this earlier:
Your black image needs to be the size of your background image. When I tested this story, it seemed your images did not match in size, making the transition a little wonky. E.g. if your background is 1356 x 1921 px, you would need a black background of exactly 1356 x 1921 px.
2. Add to your start passage: Currently you're not transitioning from anything. You need the first image background in first to fade out from it.
3. Change the ZZZ passage to: You need to make sure you're putting in all code related to the transition before the timedcontinue. The timedcontinue governs how long the screen stays pure black. I.e. it's the middle of the fade to black, not the start.
4. Include in your continue passage: You need to remove the black background and replace it with the image background after the transition.
5. Create a new passage and tag it "script", then paste this in: Please note you [i]cannot put any non-javascript in the script passage. See Twine 1 installing javascript documentation for details.
This is tested and works on my end with the story file you gave. To alter the speed of the transition you simply change the number in the <<timedcontinue>> macro. E.g. for a longer transition you might have <<timedcontinue 2s>>
EDIT: Made substantial edits for completion.
EDIT: Ok, so first off, I changed the thread title to more accurately reflect what this thread became.
Second, I'm suuuuper close. Everything's almost perfect. There's only one thing wrong, and it's a Sugarcube thing, and not a fade in/out thing. I did things mostly as Claretta said, with a few modifications. First, I noticed that the UI bar and passage area were not fading out at the same time. I solved this by putting the "<<addclass "html" "zzz">>" macro inside the "<<click>>" macro, so the Start passage looks like this: Then, I set all the webkit transitions except for "htmkl.zzz" to 2s ease-in. I noticed that the passage text didn't fade in along with everything else, so using the same technique Claretta did for nvisible," I made the same kind of thing labeled "fadein" and added "fadein"as a tag on the Continue passage. The CSS now looks like this: Because I did the "<<addclass "html" "zzz">>" macro in the start passage, I don't need it in the ZZZ passage, so that looks like this: The Continue passage is as Claretta said.
The one thing that remains an issue (and this was only apparent when I changed the BG image to a red field) is that all the lines that the passage text appears on have a black background. There has to be a way to change that, right? Not to mention that the UI bar is always its own color rather than showing the BG image behind it.
As for the "passages on black" issue, do you just mean the passage and ui background colour?
You can put: In the various css areas like .passage, #body and #ui-bar, #ui-body if you don't want to show their native colour. You may also need to set the border property to transparent in the UI bar too.
The way Twine is constructed, the body, passage, and UI elements are layered on top of the html background. So if you ever want to see the html background you need to turn off or make the top layers transparent.
Oh and regarding the "invisible" passage, I realised when I wrote this thread I did something stupidly complicated like set all the elements to transparent. It's better to just write: If you ever want to turn something completely off. Not sure if you saw my edit of that in time.