<<type>> Macro: Custom symbol/graphic after typing?

Authoring Twine
1

Hello everyone,

first time poster here. :slight_smile: I am using Twine 2.7.0 and the latest version of SugarCube v2.

After reading through the SugarCube v2 Documentation, I am wondering about a variation on the <<type>> Macro:

How would I achieve the typical Visual Novel look, where a symbol (a downward arrow, for example) appears at the end of a typed out sentence, to indicate that the player/reader can now proceed?

The Argument none of the Macro lets the default cursor disappear, which is exactly what I want the text to look like, but I guess I’ll need some JavaScript* to handle the appearance of the symbol instead of the cursor?

[* Spoiler Alert: I am most definitely not very good at this.]

As far as I understand, I could us the :typingstop event to add it, right?

Here is an example of what I am trying to achieve with this:

Okay … uhm, sorry … originally, I included a YouTube link here, but I’m currently not allowed to do this with my account. It’s the “Silent Hill Play Novel (PC Port) English” video of Giromancy, if you want to have a look. :wink:

In the Silent Hill Play Novel, a rotating pyramid appears after the paragraphs and I’d like to use an animated .GIF (or a similar method) to display a custom graphic just like this.

Any solution would be very much appreciated.

I know how to change the style of the default cursor, as the Documentation is very clear on this, but using the keep Argument of the Macro shows the cursor during typing, so I’m really not sure on how to approach this correctly.

1 Like
2

You can either use the :typingstop event, which will require some javascript:

<<script>>
$(document).on(':typingcomplete', function (ev) {
	/* JavaScript code to show the arrow on the page */
});
<</script>>

or:

<<type>> Your text<</type>>
<<timed 5s>>The cursor<</timed>>

Assuming that it takes about 5s to type the whole text. You’d need to test it properly.

The first methos is probably the cleanest.

EDIT: follow TME’s answer. It’s better.

1 Like
3

Using JavaScript, or <<timed>>, here seems like overkill. You should be able to do this with CSS.

Since you said you’re not using the cursor and this is supposed to be VN-like, for now I’m going to assume that you’re only going to have one <<type>> instance per passage. If that’s not true, then we’ll need to do something slightly different.

Laboring under the above assumption for now, you probably want to do something like the following:

.macro-type-done:last-child::after {
	/* Your style properties here. */
}

That will target the ::after pseudo-element of the final done typing wrapper.

You’ll likely want to use one of either the content, for symbol/icon/emoji use, or background-image style properties.

As a quick-n-dirty example: (untested)

.macro-type-done:last-child::after {
	animation: cursor-blink 1s infinite;
	content: "â–Ľ";
	font-size: 2em;
	opacity: 1;
}
3 Likes
4

Thank you for your quick reply and for the suggestions, nonetheless. :slight_smile:

I tested your second method in the meantime and got it working properly. Also, I’m now motivated to look a bit more into JavaScript, as I might need some code at a later stage of the project.

5

This is a relief, as I am much more comfortable around CSS. Thank you for the code example! I just tested it and it’s already working smoothly within the paragraph. Yay!

However, I’d like to have several <<type>> instances per passage indeed. Sorry, I should have included the info right from the get go. I am very curious about the other solution you mentioned.

Just to avoid confusion with approaching this (as English isn’t my first language) here’s my plan:

I’d like to go full VN-style, so the text within a passage is meant to be revealed one sentence after another, using <<type>>. Basically, I’d have a bunch of text within a passage that would be revealed bit by bit, with the symbol/icon positioned at the end of the sentence and indicating/requiring a user interaction to reveal the next sentence.

Unless I am mistaken, this would require having multiple <<type>> instances per passage, right? I hope I’m not missing anything here.

6

If you have multiple <<type>> on the same passage you can still target the last one with :nth-last-child(1 of .macro-type-done) (there’s a selector you don’t see every day).

:nth-last-child(1 of .macro-type-done)::after {
	animation: cursor-blink 1s infinite;
	content: "â–Ľ";
	font-size: 2em;
	opacity: 1;
}
3 Likes
7

Yes indeed, I’m sure the selector is … well, let’s say a tiny bit unusual and I absolutely couldn’t find the right approach for it.

Thank you so much for your help! It works absolutely perfect with multiple <<type>>. I’m so happy right now. :slight_smile:

I changed the font-size to 1em and added a <<nobr>>, so the arrow symbol appears at the end of each sentence, just as intended.