I want this effect where each character is showing..
Already somebody that made this?
Idea from
Thanks
From my perspective it's not an effect as much as just some logic to control the "data rate". Maybe there's a ZIM effect for this, but it's also just basic sequencing and ZIM stuff you probably already know.
Here's a non-specialized-ZIM way you can do it - the only real addition is the Promise for throttling:
async function typeChars(tf, t) {
for (const c of t) {
tf.text += c;
S.update();
const delayMs = "!?,.;:-".indexOf(c) >= 0 ? 300 : 50;
await new Promise(resolve => {
setTimeout(() => resolve(), delayMs);
});
}
}
const tf = new createjs.Text();
S.addChild(tf);
typeChars(tf, "");
thanks for the code
but how can I use it
this is what I copied into https://zimjs.org/slate
and get a warning and nog text to view
but still get same error
I don't get those errors or warnings at all, and it works on slate for me (?). However, I did add a tf.text = ""; so that it doesn't start by saying "undefined"...
// Given F, S, W, H or frame, stage, stageW, stageH
async function typeChars(tf, t) {
for (const c of t) {
tf.text += c;
S.update();
const delayMs = "!?,.;:-".indexOf(c) >= 0 ? 300 : 50;
await new Promise(resolve => {
setTimeout(() => resolve(), delayMs);
});
}
}
const tf = new createjs.Text();
tf.text = "";
S.addChild(tf);
typeChars(tf, "...This gets typed out all IRL-like.")
But yes, the only thing here that is actually important is the Promise. Everything else is very basic.
OH Never mind I DO see the warning. It's a little caution triangle off to the side. Basically it can't understand what's going on - probably needs a language/syntax update. Putting a Promise in a loop is not a problem in the least. Like anything, it's only dangerous if you don't understand it. The "await" in front of the Promise means the loop will block until the timeout is finished (via resolve()). This works because the function the Promise is being handled in is asynchronous (marked "async")
strange .. I still need to see the font..
I see nothing
maybe @abstract nows why?
can you use a
F.zapp_assets = ["gf_Roboto"[
to test if the font is showing
because you don"t use a
F.zapp_assets = ["gf_Roboto"[
new Label("testtext", 30, "Roboto").center()
can you try it with the editor also
Actually your "text animating as speech" link does work (for me), the text is just really small. Change the font size.
thanks yes ..
now I see
how can I make it bigger
and let it animate from a label?
scale or sca seems not to work
thanks to help joseph
Well what I provided is basically a time-delayed for-loop. Anything you can do with ZIM you can still do like you would normally, just it will happen step-by-step with a tangible delay betwix. So, isntead of tf.text += c just do something else. Modify the value of some other object. A Label I guess? I am not that familiar with the ZIM objects actually, I just use Container and Shape and Text and a few filters. If I dress things up with a Label or a Button it is only as a placeholder for later when I will reduce it to Container/Shape/Text elements over which I have more direct control.
Just think in terms of "time lapse", and how you would accumulate change to an object over time, and make sure it has a property, such as text, that you can alter to suit the way you're slicing up time.
ok I'll tried.. but maybe @abstract can be to make a simple explanation to work with your code.. I'm not a good coder at all 
If you can change the text of a Label, via something like label.text = "Hello", then just change out my createjs.Text object for a zim.Label.
const tf = new zim.Label();
I mean it would make more sense to change the variable name to something such as const label = new zim.Label();, but you can just try changing that line to make a new Label object instead and see if it works. However, if you're having a hard time with function parameters and such, maybe the Dr. can suggest a purely ZIM way to animate the text and you can avoid my coding approach.
@josephd I got it working
thanks!
maybe someting for ZIM017 @abstract as request
it is so cool effect!
1 Like
I made a new topic to have it working with ZIM speech() javascript API also, each word-by-word showing up when the computer is talking.. maybe you know a solution @josephd you can find here the question How to animate typed text that should be shown word by word when talked with ZIM speech() speech.talk()