Last updated: 19 Jan 24 19:57:20 (UTC)
Text message animations + auto advance
*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/more+continue buttons I used in NW4T Version 2: **Text message animations + more/continue buttons
To create the animations I used in NW4T Version 1:
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>”>> <</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>”>>
<</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.
<div class="container"> <img class="com" src="ComBlue.png"> <div class="msg"> <span id="snd0" class="n1">$NN</span> <span id="m0">$Nm1</span> <span id="snd1" class="n1"></span> <span id="m1"></span> <span id="snd2" class="n1"></span> <span id="m2"></span> <span id="snd3" class="n1"></span> <span id="m3"></span>
<div class="container"> <img class="com" src="ComBlue.png"> <div class="msg"> <span id="snd0" class="n1">$NN</span> <span id="m0">$Nm1</span> <span id="snd1" class="n1"></span> <span id="m1"></span> <span id="snd2" class="n1"></span> <span id="m2"></span> <span id="snd3" class="n1"></span> <span id="m3"></span>- 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.
- Each IF macro will check the current msgCt, replace the message/label spans with new text, and increase the msgCt variable by 1.
- Move the messages up in increments with each IF: 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, you might add messages without disappearing the top ones.
- Change the timings as needed in the <
> commands.
<<timed 1s>> <<if $msgCt == 0>> <<replace "#snd1">>$Friend1<</replace>> <<replace "#m1">>$F1m1<</replace>> <<set $msgCt += 1>> <</if>> <<next 2s>> <<if $msgCt == 1>> <<replace "#snd2">>$Friend2<</replace>> <<replace "#m2">>$F2m1<</replace>> <<set $msgCt += 1>> <</if>> <<next 3s>> <<if $msgCt == 2>> <<replace "#snd3”>>$Friend3<</replace>> <<replace "#m3”>>$F3m1<</replace>> <<set $msgCt += 1>><</if>> <<next 2s>> <<if $msgCt == 3>> <<replace "#snd0”>>$Friend1<</replace>> <<replace "#snd1”>>$Friend2<</replace>> <<replace "#snd2”>>$Friend3<</replace>> <<replace "#snd3”>>$NN<</replace>> <<replace "#m0”>>$F1m1<</replace>> <<replace "#m1">>$F2m1<</replace>> <<replace "#m2">>$F3m1<</replace>> <<replace "#m3”>>$Nm2<</replace>> <<set $msgCt += 1>> <</if>> <<next 5s>>
<<timed 1s>> <<if $msgCt == 0>> <<replace "#snd1">>$Friend1<</replace>> <<replace "#m1">>$F1m1<</replace>> <<set $msgCt += 1>> <</if>> <<next 2s>> <<if $msgCt == 1>> <<replace "#snd2">>$Friend2<</replace>> <<replace "#m2">>$F2m1<</replace>> <<set $msgCt += 1>> <</if>> <<next 3s>> <<if $msgCt == 2>> <<replace "#snd3”>>$Friend3<</replace>> <<replace "#m3”>>$F3m1<</replace>> <<set $msgCt += 1>><</if>> <<next 2s>> <<if $msgCt == 3>> <<replace "#snd0”>>$Friend1<</replace>> <<replace "#snd1”>>$Friend2<</replace>> <<replace "#snd2”>>$Friend3<</replace>> <<replace "#snd3”>>$NN<</replace>> <<replace "#m0”>>$F1m1<</replace>> <<replace "#m1">>$F2m1<</replace>> <<replace "#m2">>$F3m1<</replace>> <<replace "#m3”>>$Nm2<</replace>> <<set $msgCt += 1>> <</if>> <<next 5s>>- After the last IF, add one more timer sequence, then a <
> macro, taking the reader automatically to the next passage. - Close the timer macro
- Close the “msg”
- Close the “container”
<<if $msgCt == 21>> <<replace "#snd0”>>$Friend1<</replace>> <<replace "#snd1”>>$Friend2<</replace>> <<replace "#snd2”>>$Friend3<</replace>> <<replace "#snd3”>>$NN<</replace>> <<replace "#m0”>>$F1m6<</replace>> <<replace "#m1">>$F2m3<</replace>> <<replace "#m2">>$F3m4<</replace>> <<replace "#m3”>>$Nm6<</replace>> <</if>> <<next 5s>> <<goto [[NextPassage]]>> \<</timed>></div> </div>
<<if $msgCt == 21>> <<replace "#snd0”>>$Friend1<</replace>> <<replace "#snd1”>>$Friend2<</replace>> <<replace "#snd2”>>$Friend3<</replace>> <<replace "#snd3”>>$NN<</replace>> <<replace "#m0”>>$F1m6<</replace>> <<replace "#m1">>$F2m3<</replace>> <<replace "#m2">>$F3m4<</replace>> <<replace "#m3”>>$Nm6<</replace>> <</if>> <<next 5s>> <<goto [[NextPassage]]>> \<</timed>></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'; }- com img class: styles the device image (centres, keeps consistent width relative to size of browser window)
[img.com](http://img.com) { display: block; margin-left: auto; margin-right: auto; max-width: 60%; height: auto; }[img.com](http://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”