Forums » Help » typewriter effect?

anyone made a function that creates the typewriter effect similar to http://www.youtube.com/watch?v=-4DI7XPCUDo ?

the idea is to use a timer, font.draw and the run() function in main.js

That's totally possible, but would be a pain/nightmare to get right.

The best way I can see this working is to not have it draw each letter (which'd have to be individually placed) each time the delta is a certain number, but to have it delete and replace the string each time. That's the most code-heavy, but neatest on-screen way.

But please, I'd love to be wrong :P

kinda stumped after 3 hrs.... dang anyone have any quick & dirty code?

A quick little demo:
In your game's init method:

this.fontTimer = new ig.Timer();
this.fontTimeScale = 3;

In the draw method:

var x = ig.system.width / 2,
    y = ig.system.height / 2,
    si = (this.fontTimer.delta() * this.fontTimeScale).round();
this.font.draw('It Works!'.substr(0, si), x, y, ig.Font.ALIGN.CENTER);

The speed of the effect is controlled by this.fontTimeScale (larger = faster). Does that help?

@xdissent I tried this for my game over screen however it didn't work.

I put in my main.js's init:

this.fontTimer = new ig.Timer();
this.fontTimeScale = 3;

and in draw I have:

var x = ig.system.width/2,
y = ig.system.height/2;
                    
if (ig.game.GameOver == true) {
si = (this.fontTimer.delta() * this.fontTimeScale).round();
this.font.draw('GAME OVER'.substr(0, si), x, y, ig.Font.ALIGN.CENTER);
}

Yet when GameOver becomes true instead of triggering the game over text on screen I get nothing. What am I doing wrong?