Timed background change (within same passage) inside <<if>> statements

Question

Hey so I tried doing a search to see if anyone else has done this already, but didn't come up with anything:

I'm using Chapel's custom macros and am using his fade in/out macro to do sort of an "enemy attacking" effect: 

<<if $enemyattackchance gte 3>>
<<set $enemystrikes to 2>>
<<set $enemydamage to $enemyattackdamagemodif*$enemystrikes>>
<<fadein 1s 2s>>\
     <<fadeout 0.5s 3.5s>>\
          <<print either("$AttackA", "$AttackB", "$AttackC")>>
     <</fadeout>>\
<</fadein>>

<<fadein 1s 5s>>\
     <<fadeout 0.8s 7s>>\
          <<print either("$AttackA", "$AttackB", "$AttackC")>>
     <</fadeout>>\
<</fadein>>

<<else>>

<<set $enemystrikes to 1>>
<<set $enemydamage to $enemyattackdamagemodif*$enemystrikes>>
<<fadein 1s 2s>>\
     <<fadeout 0.5s 3.5s>>\
         <<print either("$AttackA", "$AttackB", "$AttackC")>>
     <</fadeout>>\
<</fadein>>
<</if>>

I am trying to accomplish an effect similar to that of the trope of "flashing red when hit" effect, and so I'm trying to change the background color of the page when either of these two if statements are true.

Is there a way within Sugarcube to do a timed background-color change of the page to red and then back to default while matching when the text fades in and out of the screen?

Thanks!

Answer 1

Yes.  Although, synchronizing it to how you're using Chapel's macros may, or may not, be an issue.  As to how, you could either use CSS animations or jQuery to accomplish your goal.  Ideally, it would be better to have one source for both animations—background and text flash.

For this example, I'm going to use a CSS transition animation.

Here are the requisite styles: (goes in Story Stylesheet)

body {
	transition: background-color 1s ease;
}
.bgred {
	background-color: red;
}

Here is the example using the styles: (see: <<timed>>, <<addclass>>, <<removeclass>>)

<<fadein 1s 2s>>\
	<<fadeout 0.5s 3.5s>>\
		<<silently>>
			<<timed 2s>>
				<<addclass "body" "bgred">>
			<<next 1.5s>>
				<<removeclass "body" "bgred">>
			<</timed>>
		<</silently>>\
		<<print either("$AttackA", "$AttackB", "$AttackC")>>
	<</fadeout>>\
<</fadein>>

 

PS: In the future, if you're asking for help using, or integrating, a third-party macro, library, whatever, please supply a link.

Comments

Sorry about the late reply:

Ah, completely forgot that the <timed> macros could be used in this way.  I just tried it and it worked, however, it seems that

<<print either()>>

can not be placed inside the

<</fadein>>

 as you said, the two do not synchronize properly: the delay will apply to everything inside the fade macro. However I simply went around this by inserting the <<timed>> macro interdependently and matching the fade times.

PS: In the future, if you're asking for help using, or integrating, a third-party macro, library, whatever, please supply a link.

Sorry about that, will keep in mind for the future. For achieve purposes, here is the link to Chapel's custom macros for Sugarcube 2:

https://twinery.org/forum/discussion/8867/some-custom-macros-and-scripts-for-sugarcube-2