really cool! 
1 Like
The Extension and latest Version with New Options can be found now on the
1 Like
Thanks for the wonderful script. I’m a complete amateur, but do you have any suggestions on how I can indent the first line of the type string? Maybe by 5 to 10 px?
You made the line break code extremely easy to execute. Does indentation have a simple code too that I’m not aware of?
Just for you.. 
And a very quick look at it..
See last edit in
@MarkHunte thank you so much for your help. It really helped me a lot and helped me create the following. Again, I’m learning this all from scratch and I spent days learning how to make this based on your work. Dialogue Example.zip (19.8 KB)
I have two quick questions for you. My current method requires me to create a new java script function (type text1, typetext2, etc.) for every dialogue box and then to link it with a Unique Element ID (textBox1, textBox2, etc.). That’s fine for now, but when I want to have 30 pieces of dialogue in one scene it can get quite cumbersome.
Question 1: Is there a way to create new dialogue lines in one (typeText) java script function? Currently it only references one set of dialogue.
Question 2: Is there a way to link multiple dialogue lines in one Unique Element ID (TextBox)?
For example, PERSON #1 (textbox1) would talk. They would then wait for person 2 and maybe person 3 to talk and then PERSON #1 would talk again, all from the same (textBox1)
Before I messaged you, I earnestly tried to do it myself and failed multiple times. Let me know your thoughts or if you need more clarification. I appreciate your thoughts.
Thanks!
2 Likes
Of the top of my head maybe something like this.
Have each timeline action call this as you are doing in you example. But all of them calling this single code.
I have commented in the code…
//- Set up a call counter to use as an index
if(typeof window.speakIndex == "undefined") {window.speakIndex = 0 }
//-- list the conversation in the order you want it in an Array which holds Associated Array objects. ( key /value objects)
//-- boxID = the box elements id
var boxPeopleConversation = [
{boxID:"textBox1",speed:50,ttext:"Hello, how are you"},
{boxID:"textBox2",speed:50,ttext:"<indent>I'm fine, you?"},
{boxID:"textBox3",speed:50,ttext:"The weather is nice"},
{boxID:"textBox4",speed:50,ttext:"Yes it is"},
{boxID:"textBox5",speed:50,ttext:"See you later"},
{boxID:"textBox6",speed:80,ttext:"<indent>Take Care"}]
//-- use the index number to get the Array object at that index in boxPeopleConversation.
//-- An Array item index starts at 0 not 1. i.e index 0,1,2,3,4,5 would be six items
//-- Then we use the keys to get their values. i.e boxID, speed, ttext are keys. their values folloews after the ":"
var textElementID = boxPeopleConversation[window.speakIndex].boxID
var txtString = boxPeopleConversation[window.speakIndex].ttext
var speed = boxPeopleConversation[window.speakIndex].speed
//-- we don't want outof bounds error. i.e the calls may exceed the number of objects in the boxPeopleConversation Array.
//-- So we put a condition in to to counter going beyond the number of items in the Array.
if (window.speakIndex <= boxPeopleConversation.length){
//-- we call the function that will pass on the latest arguments to the TypeText function.
coversation(textElementID,txtString,speed)
}
function coversation(textElement,txtString,speed){
var textElement = document.getElementById(textElementID);
hypeDocument.TypeTextExtension({
textElement:textElement,
autoTypingSpeed:speed,
typeString:txtString,
hasCursor: {
cursor:"" ,
cursorFontSize:28},
})
//-- increase index count by 1
window.speakIndex++
}
TypeText_Dialogue Example.hypetemplate.zip (20.1 KB)
If you wanted just two boxes for example you would have you Array like this.
var boxPeopleConversation = [
{boxID:"textBox1",speed:50,ttext:"Hello, how are you"},
{boxID:"textBox2",speed:50,ttext:"<indent>I'm fine, you?"},
{boxID:"textBox1",speed:50,ttext:"The weather is nice"},
{boxID:"textBox2",speed:50,ttext:"Yes it is"},
{boxID:"textBox1",speed:50,ttext:"See you later"},
{boxID:"textBox2",speed:80,ttext:"<indent>Take Care"}]
TypeText_Dialogue Example_just twoBoxes.hypetemplate.zip (16.7 KB)
2 Likes
Thank you so much for your help. You are amazing!
2 Likes
Very helpful many thanks!!
Hi -
How do I reset the type script when I leave the scene?
Thanks,
-J
Given no other modifications, you’d create an On Scene Load handler that is set to Run JavaScript… with this code:
window.speakIndex = 0;
(this will reset when going to the scene with the typewriter text… if you want you can also use On Scene Unload for leave the scene purposes)
Sorry, I’ve inserted my question in the wrong place, regarding my question below:
How do I reset the type script when I leave the scene?
Thanks,
-J
My answer shows how to reset the script; are you having problems with it?
I cannot get it to work.
This the code I am using:
var typed = new Typed(".typed", {
strings: ["Some text should appear here"],
typeSpeed: 1
});Can you post of zip of your .hype document? The code I sent applies to the last posted solution but I think your code is from a different library (this is a long thread).
Hello @MarkHunte!
I’m using the “chat” version of your code but in slightly different way. Need sequence of text lines to show one after another which is done. The problem comes when I put a timeline action to start the timeline animation from the beginning to play everything on loop. Then it seems have to put some line or something to kill the previously loaded script and to reload it again, because everything is overlapped. Will be appreciated if you could help me with that!
Here is the hype document. I cleaned the rest of elements, but all scripts I’m using are still there. typewritter_issue.hype.zip (18.6 KB)
Thank you!
1 Like
Hi,
Just add this block after the Array in the code
///-- RESET IF WE WANT TO REPEAT CONVERSATION AGAIN
if (window.speakIndex >= boxPeopleConversation.length){
window.speakIndex = 0
for (i = 0; i < boxPeopleConversation.length; i++) {
hypeDocument.getElementById(boxPeopleConversation[i].boxID).innerHTML = ''
}
}
… ie
would look like this
var boxPeopleConversation = [
{boxID:"textBox1",speed:80,ttext:"text 1"},
{boxID:"textBox2",speed:80,ttext:"text 2"},
{boxID:"textBox3",speed:80,ttext:"text 3"},
{boxID:"textBox4",speed:80,ttext:"text 4"}]
///-- RESET IF WE WANT TO REPEAT CONVERSATION AGAIN
if (window.speakIndex >= boxPeopleConversation.length){
window.speakIndex = 0
for (i = 0; i < boxPeopleConversation.length; i++) {
hypeDocument.getElementById(boxPeopleConversation[i].boxID).innerHTML = ''
}
}
3 Likes
Awesome! Thank you very much!
1 Like
Thank you
Does anyone has ever done a typing, then erasing text script?
I am getting some strange results from this. When the scene is loaded off screen the letters comes out wrong. I have tested using both Adpiler and Adform preview. Also using different browsers. Here is the link to Adpiler.
Wait a few seconds before scrolling down to the bottom.
https://preview.adpiler.com/JEYGUBSEKQ
Screenshot:
