Typewriter effect in Hype

Thank yo Jonathon. I have noticed that when using the downloaded .js file it is 36kb and doesn’t work but when I copy the .js file in the example document it is 14kb and does work!

Ian

I suspect the code you had before might have been from a different (older?) version, so it probably was correct at some point!

Hi @ianben

Apologies for the delay as I have been away for a few months.

As mentioned before and when I posted the original examples I was using an older version which has a slightly different syntax as to the now “updated” typed.js which is now in a newer version to when this example was written. This is why the code that Jonathan has posted would work as the syntax has changed. This, unfortunately can happen when threads are quite old. :slight_smile:

The newer version of typed.js looks to be incorporating the new trend of using installers to install it into an environment that would probably use it as a module and would have a compiler and such to transform the ECMAScript into the Javascript equivalent. Not to say it can’t be used standalone but it would mean a change in approach to making it work in Hype.

cc @jonathan

I will put this up on the extensions page shortly .

This combines my codes for Typing text in Auto or on keydown, including iOS.
I am unable to test other devices.

Here is an example template with it in use.

TypeTextExtension_v110.hypetemplate.zip (48.8 KB)

Construtor Examples

   var textElement = document.getElementById('textRect');
 
hypeDocument.TypeTextExtension({
	textElement:textElement,
	typeType:"auto",
	autoSpeed:200,  
	hasCursor: true,
	cursor:"|", 
	cursorColor:"red",
	typeString:"Here is some text to type out <br> And this is a second line. <br><br><br> this is a third line with 3 returns above"
	})

    var textElement = document.getElementById('textRect');
     
    hypeDocument.TypeTextExtension({
    	textElement:textElement,
    	typeType:"auto",
    	autoSpeed:200,  
    	typeString:"Here is some text to type out <br> And this is a second line. <br><br><br> this is a third line with 3 returns above"
    	})

var textElement = document.getElementById(‘textRect’);

hypeDocument.TypeTextExtension({
	textElement:textElement,
	typeType:"keydown",  
	hasCursor: true,
	cursor:"✍️", 
	typeString:"Here is some text to type out <br> And this is a second line. <br><br><br> this is a third line with 3 returns above"
	}

var textElement = document.getElementById('textRect');
 
    hypeDocument.TypeTextExtension({
    	textElement:textElement,
    	typeType:"keydown",  
    	typeString:"Here is some text to type out <br> And this is a second line. <br><br><br> this is a third line with 3 returns above"
    	}

Construtor object break down

  • textElement: = {Element} : The {Element} that is the typed text target. Must be entered

  • typeType: = {String } : {{“auto”/“keydown”} The type of typing behaviour. Auto type or on Key down. If not entered default will be ‘auto’

  • autoSpeed: = {Number} : {Number} The speed of the auto typing text. If not entered default will be 200

  • hasCursor: true: = {BOOL} : only really need true bool

  • cursor: = {String} : {String} The characture you want to use asthe Blinking cursor symbol, can be emojis also. If not entered default will default will be ‘|’

  • cursorColor: = {String} : {String} The colour of the cursor. If not entered default will default will be ‘white’

  • typeString: = {String} to be typed. Use <br> as break points/newlines

3 Likes

really cool! :slight_smile:

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.. :grinning:

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