Creating a typing effect on GUI text element


In my game, I am trying to create a 2D Screen with a text element that show’s the game’s dialogue. I wan’t each letter to type in slowly, like in this example:

This is the code i’m currently using, which barely works.

TextController.prototype.NewText = function(ent, text, typewrite, speed) {
    if(typewrite === false) {
        textEnt.text = text;
    if(stop === true) {
        i = 0;
        stop = false;
    } else {
    curSent = text;
    curSpeed = speed;
    speed = speed || 0;
        if (i < text.length) {
            textEnt.text += text.charAt(i);
            //ent.text += text.charAt(i);
            setTimeout(function () {
                TextController.prototype.NewText(ent, text, true, speed);
            }, speed);
        } else {
            i = 0;

It works at a basic level, but even with the stop variable, it doesn’t stop properly. I want it to be interruptable. I also want an easy way to access this in other scripts. I would like a way to delete characters as well but its not necessary.

any help?


I strongly suggest you check this out. It’s pretty great! And there is a way to delete characters! Just remember, you can always hook into almost any Javascript library with PlayCanvas and vice versa. I know this supposedly creates a new “element” so you may have to hack it a bit to get the exact effect you want. Just remember, people used to actually make UI in PlayCanvas with HTML and libraries such as this one…

Besides a crappy answer and a link, I have nothing more really to give, so, have a good day, I guess!


I can’t see where some of the variables are defined making me think that they are global rather than in the scope of object. Can you post a link to the project please?


How do I include Javascript libraries? And more importantly - do HTML elements work in VR? (i dont think so)


Look up “playcanvas HTML”