Last updated: 19 Jan 24 19:58:40 (UTC)
Text message animations + more/continue buttons
*In Twine Sugarcube 2
NOTE: Evernote really likes to replace straight quotes with curly ones. This will screw up the coding! Recommend copy-pasting in a text-editor, find-replacing all “ and ‘ , then copy-pasting into Twine passage.
**To create the animations I used in NW4T Version 1: **Text message animations + auto advance
To create the animations/more+continue buttons I used in NW4T Version 2:
Coding
- At the top of the passage, I create a <
> instance, then define the variables. These include all the “messages” and their labels (the name of who sent them). Obvs, change what’s in the quotation marks to suit the story!
<<silently>> /* Variable to advance animation */ <<set msgCt to 0>> /* Uses the “reply” class set in the CSS b/c these messages are coming from the player-character, so will be flush right (this is the label) */ <<set $NN to "<span class=‘reply'>$NickName</span>'>> /* Likewise, using the span class styles the messages from the P-C */ <<set $Nm1 to “<span class=‘reply’>Hello!</span>”>> /* Now define the replies in order, coded by sender (I had $Friend1, $Friend2, and $Friend3) */ <<set $F1m1 to “Hey there”>> <<set $F2m2 to “Howdy”>> <<set $F1m2 to “Hi”>> <<set $Nm2 to “<span class=‘reply’>welcome</span>”>> /* These establish the images and styles for my “more” and “continue” buttons */ <<set $more to "<img class='moar' src='more.png'>">> <<set $cont to "<img class='contin' src='continue.png'>”>> <</silently>>
<<silently>>
/* Variable to advance animation */
<<set msgCt to 0>>
/* Uses the “reply” class set in the CSS b/c these messages are coming from the player-character, so will be flush right (this is the label) */
<<set $NN to "<span class=‘reply'>$NickName</span>'>>
/* Likewise, using the span class styles the messages from the P-C */
<<set $Nm1 to “<span class=‘reply’>Hello!</span>”>>
/* Now define the replies in order, coded by sender (I had $Friend1, $Friend2, and $Friend3) */
<<set $F1m1 to “Hey there”>>
<<set $F2m2 to “Howdy”>>
<<set $F1m2 to “Hi”>>
<<set $Nm2 to “<span class=‘reply’>welcome</span>”>>
/* These establish the images and styles for my “more” and “continue” buttons */
<<set $more to "<img class='moar' src='more.png'>">>
<<set $cont to "<img class='contin' src='continue.png'>”>>
<</silently>>- Next, I use a with the “container” class I set in the CSS. This places my communication device image (ComBlue.png) in a specific place on the screen, and resizes appropriately for different devices.
- I place my com device image in this div, styling it with the “com” class.
- Within the container div, I place another
, this one styled with the “msg” class. This styles the text messages and their labels so that they overlay the com device, and stay within its display screen (even on different sized screens).- Within the msg div, I establish the spans that will hold the text messages and labels. These are styled with class “n1” from my CSS for color, font, spacing.
- Each message and label span has a distinct ID.
- Note the first span is already occupied by the first message. You can do this here, or wait till the timer macro in the next phase.
- Still in the msg div, I place a “cont”
. This is the holding space for my “Continue” button, which I will set to appear when all the messages have cycled.- Note the span id in the link.
<div class="container"> <img class="com" src="ComBlue.png"> <div class="msg"> <span id="snd0" class="n1">$NN</span><br><span id="m0">$Nm1</span> <span id="snd1" class="n1"></span><br><span id="m1"></span> <span id="snd2" class="n1"></span><br><span id="m2"></span> <span id="snd3" class="n1"></span><br><span id="m3"></span> <div class="cont"> <<link '<span id="continue"></span>'>><<goto [[NextPassage]]>><</link>> </div>
<div class="container"> <img class="com" src="ComBlue.png"> <div class="msg"> <span id="snd0" class="n1">$NN</span><br><span id="m0">$Nm1</span> <span id="snd1" class="n1"></span><br><span id="m1"></span> <span id="snd2" class="n1"></span><br><span id="m2"></span> <span id="snd3" class="n1"></span><br><span id="m3"></span> <div class="cont"> <<link '<span id="continue"></span>'>><<goto [[NextPassage]]>><</link>> </div>- Still in the msg div, I put in a timer macro for the first few messages to appear. At each count, the <
> and < > fill in one of the placeholder message/label spans with the messages defined in the top of the passage. - Increase $msgCt by one with each message added. This enables a unique state for each “screen” of text messages.
- For the LAST second of the timer macro, replace the span “#more” with the variable $more (defined at the top of the passage). No, we haven’t yet placed this span in the passage. It’s okay! We do that next.
- Be sure to close the timer macro, and CLOSE THE msg div! The “More” button doesn’t stay in place if it’s in the msg div.
<<timed 1s>> <<if $msgCt == 0>> <<replace "#snd1">>$Friend1<</replace>> <<replace "#m1">>$F1m1<</replace>> <<set $msgCt += 1>> <</if>> <<next 1s>> <<if $msgCt == 1>> <<replace "#snd2">>$Friend2<</replace>> <<replace "#m2">>$F2m1<</replace>> <<set $msgCt += 1>> <</if>> <<next 1s>> <<replace "#more">>$more<</replace>> <</timed>></div>
<<timed 1s>> <<if $msgCt == 0>> <<replace "#snd1">>$Friend1<</replace>> <<replace "#m1">>$F1m1<</replace>> <<set $msgCt += 1>> <</if>> <<next 1s>> <<if $msgCt == 1>> <<replace "#snd2">>$Friend2<</replace>> <<replace "#m2">>$F2m1<</replace>> <<set $msgCt += 1>> <</if>> <<next 1s>> <<replace "#more">>$more<</replace>> <</timed>></div>- Start a new , this one styled with CSS class “morediv”. Basically, this div really only contains the “More” button, but now that the first few text messages are on the screen, we use the “More” button to make the rest appear.
- Place a <> macro, and name it with the span id from the line above (“more”). This is the span that gets replaced at the end of the timer macro. Essentially, the end of the timer macro tells the “More” button to appear.
- Place an <
> macro. Each iteration of the IF will check the current msgCt, replace the message/label spans with new text, and increase the msgCt variable by 1. - After the initial <
>, use < > as the msgCt increases. Move the messages up in increments with each IF/ELSEIF: message/label 3 moves up to 2, 2 moves up to 1, and so forth. This creates an animation, a scrolling effect showing new messages at the bottom of the screen, while old messages disappear off the top. - Continue for all messages.
- Note: when the new message at the bottom is long, you may have to ‘disappear’ more than one message at the top at a time.
- Likewise, if there’s a big gap to fill and more than one message will fit, use a timer macro within that IF instance to animate the arrival of multiple messages. See the 1st ELSEIF below.
<div class="morediv"> <<link '<span id="more"></span>'>> <<if $msgCt == 2>> <<replace "#snd0">>$NN<</replace>> <<replace "#snd1">><</replace>> <<replace "#snd2">><</replace>> <<replace "#m0">>$Nm2<</replace>> <<replace "#m1">><</replace>> <<replace "#m2">><</replace>> <<set $msgCt += 1>> <<elseif $msgCt == 3>> <<replace "#snd0">>$Friend3<</replace>> <<replace "#m0">>$F3m1<</replace>> <<timed 1s>> <<replace "#snd1">>$Friend2<</replace>> <<replace "#m1">>$F2m2<</replace>> <<next 1s>> <<replace "#snd2">>$Friend1<</replace>> <<replace "#m2">>$F1m2<</replace>> <<next 1s>> <</timed>> <<set $msgCt += 1>> <<elseif $msgCt == 4>> <<replace "#snd0">>$Friend2<</replace>> <<replace "#snd1">>$Friend1<</replace>> <<replace "#snd2">>$NN<</replace>> <<replace "#m0">>$F2m2<</replace>> <<replace "#m1">>$F1m2<</replace>> <<replace "#m2">>$Nm3<</replace>> <<set $msgCt += 1>>
<div class="morediv"> <<link '<span id="more"></span>'>> <<if $msgCt == 2>> <<replace "#snd0">>$NN<</replace>> <<replace "#snd1">><</replace>> <<replace "#snd2">><</replace>> <<replace "#m0">>$Nm2<</replace>> <<replace "#m1">><</replace>> <<replace "#m2">><</replace>> <<set $msgCt += 1>> <<elseif $msgCt == 3>> <<replace "#snd0">>$Friend3<</replace>> <<replace "#m0">>$F3m1<</replace>> <<timed 1s>> <<replace "#snd1">>$Friend2<</replace>> <<replace "#m1">>$F2m2<</replace>> <<next 1s>> <<replace "#snd2">>$Friend1<</replace>> <<replace "#m2">>$F1m2<</replace>> <<next 1s>> <</timed>> <<set $msgCt += 1>> <<elseif $msgCt == 4>> <<replace "#snd0">>$Friend2<</replace>> <<replace "#snd1">>$Friend1<</replace>> <<replace "#snd2">>$NN<</replace>> <<replace "#m0">>$F2m2<</replace>> <<replace "#m1">>$F1m2<</replace>> <<replace "#m2">>$Nm3<</replace>> <<set $msgCt += 1>>- On the last ELSEIF, replace the “#more” span with nothing (this makes the “More” button disappear again).
- Similarly, replace the “#continue” span with the $cont variable defined at the top of the passage (this makes the “Continue” button appear, linking to the next passage).
- *These don’t have to be within a timer macro. *
- Close the <
> macro - Close the <> macro
- Close the “morediv”
- Close the “container”
<<elseif $msgCt == 7>> <<replace "#snd0">>$NN<</replace>> <<replace "#snd1">>$Friend1<</replace>> <<replace "#snd2">>$Friend3<</replace>> <<replace "#m0">>$Nm4<</replace>> <<replace "#m1">>$F1m3<</replace>> <<replace "#m2">>$F3m2<</replace>> <<timed 1s>> <<replace "#snd3">>$Friend2<</replace>> <<replace "#m3">>$F2m4<</replace>> <<next 1s>> <<replace '#more'>><</replace>> <<replace '#continue'>>$cont<</replace>> <</timed>> <</if>> <</link>> </div> </div>
<<elseif $msgCt == 7>> <<replace "#snd0">>$NN<</replace>> <<replace "#snd1">>$Friend1<</replace>> <<replace "#snd2">>$Friend3<</replace>> <<replace "#m0">>$Nm4<</replace>> <<replace "#m1">>$F1m3<</replace>> <<replace "#m2">>$F3m2<</replace>> <<timed 1s>> <<replace "#snd3">>$Friend2<</replace>> <<replace "#m3">>$F2m4<</replace>> <<next 1s>> <<replace '#more'>><</replace>> <<replace '#continue'>>$cont<</replace>> <</timed>> <</if>> <</link>> </div> </div>Styling
- container div: positions the entire com device (everything below)
.container { position: relative; text-align: center; color: white; }.container { position: relative; text-align: center; color: white; }- msg div: styles & positions the messages
.msg { position: absolute; top: 8%; left: 30%; right: 28%; text-align: left; color: rgb(128, 204, 247, 0.7); font-size: 2.3vw; font-family: 'Aldrich'; }.msg { position: absolute; top: 8%; left: 30%; right: 28%; text-align: left; color: rgb(128, 204, 247, 0.7); font-size: 2.3vw; font-family: 'Aldrich'; }- morediv div: positions the “More” button
.morediv { position: absolute; z-index: 50; bottom: 15%; left: 30%; right: 30%; }.morediv { position: absolute; z-index: 50; bottom: 15%; left: 30%; right: 30%; }- cont div: positions the “Continue” button
.cont { position: absolute; z-index: 50; top: 0%; left: 110%; right: -70%; }.cont { position: absolute; z-index: 50; top: 0%; left: 110%; right: -70%; }- The left and right values are because this div is placed *within* the msg <div>: so it positions the Continue button *outside* of the parameters of that div (to the right of it). Useful to keep in mind when trying to place items - the positions will be relative to the div they’re in.- contin img class: styles the “Continue” button
img.contin { display: block; max-width: 90%; height: auto; }img.contin { display: block; max-width: 90%; height: auto; }- moar img class: styles the “More” button
img.moar { display: block; margin-left: auto; margin-right: auto; max-width: 90%; height: auto; }img.moar { display: block; margin-left: auto; margin-right: auto; max-width: 90%; height: auto; }- com img class: styles the device image (centres, keeps consistent width relative to size of browser window)
img.com { display: block; margin-left: auto; margin-right: auto; max-width: 60%; height: auto; }img.com { display: block; margin-left: auto; margin-right: auto; max-width: 60%; height: auto; }- n1 text class: styles the message LABELS
.n1 { color: rgb(1, 101, 158, 0.6); font-weight: bold; font-style: italic; }.n1 { color: rgb(1, 101, 158, 0.6); font-weight: bold; font-style: italic; }- reply text class: styles the P-C’s messages & label (aligns them right)
.reply { position: relative; text-align: right; right: 5%; margin-bottom: -50px; display: block; }.reply { position: relative; text-align: right; right: 5%; margin-bottom: -50px; display: block; } - Close the “container”