Help Typewriter-style text, with back and forward arrows?

[Justin93Daniels]

I was wondering if there's a BBCode out there that can make dialogue appear in some kind of Dialogue Box? Like, dialogue that appears to be "Typing itself" after clicking a right arrow, and continuing to the next message as the right arrow gets pressed again, or repeating the previous message by clicking a left arrow?

Is this even possible here?

... And maybe with a Character Portrait at the left side of the box? '

 

[Lyro]

Here's a simple way of doing it with minimal scripting:

[animation=typing] [keyframe=0]max-width: 0;[/keyframe] [keyframe=100]max-width: 100%;[/keyframe] [/animation] [animation=caretBlink] [keyframe=0]border-color: transparent;[/keyframe] [keyframe=50]border-color: orange;[/keyframe] [keyframe=100]border-color: transparent;[/keyframe] [/animation] [script class=next version=2] (= dialog [ "This is the first line." "This is the second line." "And this is the last line." ]) (= currentLine 0) [/script] [script class=next on=click version=2] (removeClass "lastLine" "line") (addDiv "lastLine" "lines") (setText (index dialog currentLine) "lastLine") (++ currentLine) (addClass "line" "lastLine") [/script] [class=lines] align-items: flex-start; display: flex; flex-direction: column; justify-content: flex-start; [/class] [class=lastLine] animation: {post_id}typing 3.5s steps(40, end), {post_id}caretBlink .75s step-end infinite; border-right: .15em solid orange; display: inline-block; overflow: hidden; [/class] [class=next] background-color: gray; color: black; cursor: pointer; float: right; font-weight: bold; padding: 1em; [/class] [class=typewriter] background-color: black; color: orange; font-family: 'Courier New', Consolas, monospace; letter-spacing: .15em; padding: 1em; white-space: nowrap; [/class] [div class=typewriter] [div class=next]Enter[/div] [div class=lines][/div]

[/div]

[nobr]
[animation=typing]
    [keyframe=0]max-width: 0;[/keyframe]
    [keyframe=100]max-width: 100%;[/keyframe]
[/animation]

[animation=caretBlink]
    [keyframe=0]border-color: transparent;[/keyframe]
    [keyframe=50]border-color: orange;[/keyframe]
    [keyframe=100]border-color: transparent;[/keyframe]
[/animation]

[script class=next version=2]
    (= dialog [
        "This is the first line."
        "This is the second line."
        "And this is the last line."
    ])
    (= currentLine 0)
[/script]

[script class=next on=click version=2]
    (removeClass "lastLine" "line")
    (addDiv "lastLine" "lines")
    (setText (index dialog currentLine) "lastLine")
    (++ currentLine)
    (addClass "line" "lastLine")
[/script]

[class=lines]
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
[/class]

[class=lastLine]
    animation: 
        {post_id}typing 3.5s steps(40, end),
        {post_id}caretBlink .75s step-end infinite;
    border-right: .15em solid orange;
    display: inline-block;
    overflow: hidden;
[/class]

[class=next]
    background-color: gray;
    color: black;
    cursor: pointer;
    float: right;
    font-weight: bold;
    padding: 1em;
[/class]

[class=typewriter]
    background-color: black;
    color: orange;
    font-family: 'Courier New', Consolas, monospace;
    letter-spacing: .15em;
    padding: 1em;
    white-space: nowrap;
[/class]

[div class=typewriter]
[div class=next]Enter[/div]
[div class=lines][/div]
[div=clear: both;][/div]
[/div]
[/nobr]

You could also use BBScript to manually add in the characters one by one for a more accurate effect.