Typewriter effect (print one character at a time)

Authoring Adventuron
1

Is it possible to print a string one character at a time with a little pause in between (in Adventuron)? Just asking about the feasibility of such a thing and how it might be coded rather than intending to start a debate about how annoying or otherwise it might be in use…

I’ve tried messing around with appending and waiting but I’m not getting very far with my (very) rudimentary coding skills.

1 Like
2

I’ve been experimenting with this but I’m having trouble finding the full version of Adventuron. All I can find is Adventuron classroom, which is where I’ve been messing around with it. Where do you download the IDE?

Edit: Okay, so after more digging it seems the classroom is the IDE. I figured the best shot would be to compile the file into HTML and just change the Javascript there (this is a method that works for both Twine and Quixe). Unfortunately, the javascript code for Adventuron seems heavily obfuscated or computer generated, so it’s difficult to find the one piece of code where it prints things. I’ll keep looking!

3

Okay, it looks like in the javascript file the main code for printing things out is

function Kj(b,a){return b.appendChild(a)}

This tacks the text in ‘a’ onto the main body ‘b’. If you can replace it with something that goes through ‘a’ character by character and appends it onto b slowly, you can get the typewriter effect. I might be able to figure out how to do that, but I’m sure others on here could do that faster.

This won’t fix 100% of the text, just the main text of the game. The titles and ‘click here to continue’ are programmed elsewhere.

1 Like
4

Thanks for your efforts!

Yes, Adventuron Classroom = Adventuron. I think it’s just legacy branding from when it was being pitched as a coding course for schools. Also confused me at first.

5

Ok, sounds like it is doable then. In principle at least.

6

I’m about halfway there. If you go into the compiled adventuron file and add this right before

</style>:

p {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

It gives a typewriter effect but writes for too long, and multiple lines get typed out at the same time. (borrowed from: https://css-tricks.com/snippets/css/typewriter-effect/). I applied it to all paragraphs ‘p’ but it be possible to fix it by making it only apply to certain types of text.

So it looks like you might be able to do this with just CSS, which is much easier!

7

I would also try to avoid overwriting the JS functions because it looks like they were obfuscated, minimized, and/or transpiled, which means that there’s no guarantee that the function to output the text will remain named Kj() if you change your code or Adventuron updates.

1 Like
8

Thanks. I really appreciate people tinkering with this on my behalf. Messing around with the compiled file itself is, frankly, a little beyond my ability - but is is interesting in itself that changes can be made in that way (I was hoping there would be some sort of solution accessible from the editor, but perhaps not).

9

True the branding is all over the place. The idea was to integrate lessons into the IDE, hence “Classroom”. The plan was to also release an amped up version of Adventuron without the Classroom monikor a little while after classroom although I have been doing so much redesign that the full version is taking longer than I anticipated, so Classroom is de-facto Adventuron until the full version arrives.

The full version will have a lot more features exposed, such as collections, traits, object-centric event handlers, as well as having a map editor / renderer, and more.

Realistically, that version of Adventuron will not be out in 2020 (traits, collections + more are baked, but the other things are half baked).

I still plan a point release for Classroom that is less ambitious either this month or next month that will attempt to fix longstanding issues in paging text / scrolling.

A per-letter “typewriter” effect is not currently supported, but could probably be adapted fairly easily from the existing per-word stagger effect. I’ll see if I can sneak that into the point release. The scrolling fixes are the high priority item.

Adventuron is far far far from perfect, but it is under active development, except for the past few weeks, in which I’ve had some high priority items in my real life to contend with.

2 Likes
10

No, but I think it’s great - so forgive me for pushing its envelope. Don’t feel that you have to accommodate my whims (but of course, if you can, then I’d be ever grateful…)

Re the per-word stagger effect: I must have seen it before but I can’t find it in the manual or autocomplete. What is the syntax?

1 Like
11

It’s not documented as the API is not final. I just included it to experiment with.

your_theme : theme {
      theme_settings {
         experimental_default_stagger_mode = true
      }
}

This will make all location descriptions stagger the first time they are shown, and not on subsequent times. All print messages will be staggered too.

This does make it very readable, but in its current form it can become annoying as pressing a button or clicking or touching does not hurry things up.

I actually think it’s quite a nice effect but in its current form it can feel a bit like overkill as there is not much granular control over it (that’s why the setting is prefixed with experimental_ ).

Incidentally, a side effect of this is to fix the scrolling issue.in 95% of cases. Of course, this isn’t a proper fix, it’s just a happy side effect of an in-progress experiment.

Chris