Awesome Typing Animation With Anima

[YoungNeer]

Okay I admit in the previous post (https://love2d.org/forums/viewtopic.php?f=5&t=86885) I was being silly!! I showed the powers of Anima yet not a single line of code. And that was really very silly of me. In this post I will try to correct that mistake but note that this post will only be about typing animations using Anima and not other aanimations such as moving, scaling, rotating and opacifying which is Anima's speciality. I'm afraid complete documentation of Anima will take some time (since it's so huge and full of overloads, etc).

So anyways let's get started with the topic.



And if you didn't already figure it out then let me reveal that this animation was created in LOVE2D - not in some animation software. And no other library except Anima was used to create this animation. And the source was some 50 lines - almost all of it trivial stuff.

If you can't follow with the tutorial (short documentation - whatever you want to call it) then visit https://github.com/YoungNeer/lovelib/tr ... ext%20Demo and see the code in the Demos to get an Idea how things work
Also if you want the link for Anima then here's it (although you can get it from the attachment which has a demo with it)
https://github.com/YoungNeer/lovelib/tree/master/Anima/

Enough show-off let's start the topic already

How can we make an awesome typing animation using Anima?

Step#0- The require Step:

Code: Select all

	Anima=require 'Anima'

Step#1- The init Step:

And then in love.load function, create something which I call an animation object, for eg.-

Code: Select all

	typingAnim=Anima:init()

Now depending on whether you want to start the animation right away or start it after some time you can use newTypingAnimation or startNewTypingAnimation- both of which accepts two parameters text and speed

Code: Select all

	typinganim:newTypingAnimation(text,speed) --load the animation
	--text is string and speed is number (unit- letter per second)
	typinganim:animationStart() --actually start the animation

which in this context is exactly same as doing-

Code: Select all

	typingAnim:startNewTypingAnimation(text,speed) -- load and start the animation

In this context we started animation right away so startNewTypingAnimation should be preferred. But sometimes you may want to start an animation after some time - for that reason you may want to seperate the loading and starting step.

Anyways that was init step. Now comes the update step

Step#2- The update Step:

In other context the update step can be very complicated but in our context where we have only one simple typing animation this step is pretty simple:-

Add this to love.update function

Code: Select all

	typingAnim:update(dt)

So the final step is the draw step:-

Step#3- The draw Step:

Code: Select all

	typingAnim:draw(x,y,...bla,bla)
	---if you are simply drawing typing text
	typingAnim:drawF(x,y,...bla,bla)
	---when you are drawing FORMATTED typing text

Edit:And since the latest Anima version you can change the typing speed at any time without getting any buggy behaviour. To do that you can use:-

Code: Select all

	typingAnim:setTypingSpeed(speed)

Extras:- (Can Skip)
Okay now let's get deeper!

I am sorry I lied to you in the beginning - both newTypingAnimation and startNewTypingAnimation accepts three parameters not two . The third parameter is a callback function. Every time a new letter is typed that callback function will be called. By default it's an empty function but you can set it to a custom value. This can be useful in various cases - like keeping record of the numbers of letters typed and playing a sound everytime a letter is pressed, etc.

And if that is not enough then you can also make your function more dynamic such as don't play *tic-tic* sound for space. Well how'd you do that? Simple- Anima will pass the key that was just printed as the first and argument in the function so you get to decide what to do for which key. Ex-

Code: Select all

	function playTypingSound(char)
		if char~=' ' then typingSound:play() end
	end

Sometimes when typing speed is high then one may find the sound annoying. In such cases you may want to play the key sound after two-keystrokes or three-keystrokes, etc

Now finally some relatively complicated stuff

So what if you have an extra animation such as moving animation or scaling animation, etc. Well worry not instead of saying newTypingAnimation or startNewTypingAnimation you will simply say newAnimation or startNewAnimation. And both of these functions are kinda heavily overloaded so there's no generic format. But the one that you will use the most is:-

Code: Select all

	typingAnim:newAnimation(operation,...)

And same for startNewAnimation!

Here operation is a string and ... depends on what that string is (I told you it's heavily overloaded). So let's briefly see the all possible options for this format:-

Code: Select all

	typingAnima:newAnimation('move',x,y)
	typingAnima:newAnimation('rotate',r)
	typingAnima:newAnimation('scale',sx,sy)
	typingAnima:newAnimation('opacity',a)

And that's all your honour (of-course I don't need to say this everytime - "Same for startNewAnimation!")

So if you want moving animation along with typing animation you'd simply do this in the init step:- (for eg.)

Code: Select all

	typingAnim:newTypingAnimation("your text",2)
	typingAnim:newAnimation('move',50)
	-- y is defaulted to zero means no movement along vertical
	typingAnim:setMoveSpeed(5)
	-- if you don't explicitly set move speed then it's 1 by default
	typingAnim:startAnimation()
	--start the animation

Okay that was not so complicated. But here comes the update step which is the same as before
And now comes the draw step, actually there's nothing complicated about draw - this will be the same as before.
So I was just joking the whole time - there's nothing complicated in Anima!! You can scale,move,opacify,rotate and do typing animation - all at the same time using the same Animation object without any complication and without any buggy behaviour

[YoungNeer]

Attachment added - so you don't have to go through the trouble of doing "git clone" and all that!!

[yetneverdone]

Okay I admit in the previous post (https://love2d.org/forums/viewtopic.php?f=5&t=86885) I was being silly!! I showed the powers of Anima yet not a single line of code. And that was really very silly of me. In this post I will try to correct that mistake but note that this post will only be about typing animations using Anima and not other aanimations such as moving, scaling, rotating and opacifying which is Anima's speciality. I'm afraid complete documentation of Anima will take some time (since it's so huge and full of overloads, etc).

So anyways let's get started with the topic.



And if you didn't already figure it out then let me reveal that this animation was created in LOVE2D - not in some animation software. And no other library except Anima was used to create this animation. And the source was some 50 lines - almost all of it trivial stuff.

If you can't follow with the tutorial (short documentation - whatever you want to call it) then visit https://github.com/YoungNeer/lovelib/tr ... ext%20Demo and see the code in the Demos to get an Idea how things work
Also if you want the link for Anima then here's it (although you can get it from the attachment which has a demo with it)
https://github.com/YoungNeer/lovelib/tree/master/Anima/

Enough show-off let's start the topic already

How can we make an awesome typing animation using Anima?

First of all ofcourse require Anima as follows:

Code: Select all

	Anima=require 'Anima'

And then in love.load function, create something which I call an animation object, for eg.-

Code: Select all

	typingAnim=Anima:init()

Now depending on whether you want to start the animation right away or start it after some time you can use newTypingAnimation or startNewTypingAnimation- both of which accepts two parameters text and speed

Code: Select all

	typinganim:newTypingAnimation(text,speed) --load the animation
	--text is string and speed is number (unit- letter per second)
	typinganim:animationStart() --actually start the animation

which in this context is exactly same as doing-

Code: Select all

	typingAnim:startNewTypingAnimation(text,speed) -- load and start the animation

In this context we started animation right away so startNewTypingAnimation should be preferred. But sometimes you may want to start an animation after some time - for that reason you may want to seperate the loading and starting step.

Anyways that was init step. Now comes the update step

In other context the update step can be very complicated but in our context where we have only one simple typing animation this step is pretty simple:-

Add this to love.update function

Code: Select all

	typingAnim:updateT(dt)
	--updateT means update Typing Animation

If you have other animation along with the typing animation such as moving the typing text or scaling it - then it can be relatively complicated. But we'll talk about it in the end! (Hard Stuff later )

So the final step is the draw step:-

Code: Select all

	typingAnim:draw(x,y,...bla,bla)
	---if you are simply drawing typing text
	typingAnim:drawF(x,y,...bla,bla)
	---when you are drawing FORMATTED typing text

Okay now let's get deeper!
I am sorry I lied to you in the beginning - both newTypingAnimation and startNewTypingAnimation accepts three parameters not two . The third parameter is a callback function. Every time a new letter is typed that callback function will be called. By default it's an empty function but you can set it to a custom value. This can be useful in various cases - like keeping record of the numbers of letters typed and playing a sound everytime a letter is pressed, etc.

And if that is not enough then you can also make your function more dynamic such as don't play *tic-tic* sound for space. Well how'd you do that? Simple- Anima will pass the key that was just printed as the first and argument in the function so you get to decide what to do for which key. Ex-

Code: Select all

	function playTypingSound(char)
		if char~=' ' then typingSound:play() end
	end

Sometimes when typing speed is high then one may find the sound annoying. In such cases you may want to play the key sound after two-keystrokes or three-keystrokes, etc

Now finally some relatively complicated stuff

So what if you have an extra animation such as moving animation or scaling animation, etc. Well worry not instead of saying newTypingAnimation or startNewTypingAnimation you will simply say newAnimation or startNewAnimation. And both of these functions are kinda heavily overloaded so there's no generic format. But the one that you will use the most is:-

Code: Select all

	typingAnim:newAnimation(operation,...)

And same for startNewAnimation!

Here operation is a string and ... depends on what that string is (I told you it's heavily overloaded). So let's briefly see the all possible options for this format:-

Code: Select all

	typingAnima:newAnimation('move',x,y)
	typingAnima:newAnimation('rotate',r)
	typingAnima:newAnimation('scale',sx,sy)
	typingAnima:newAnimation('opacity',a)

And that's all your honour (of-course I don't need to say this everytime - "Same for startNewAnimation!")

So if you want moving animation along with typing animation you'd simply do this in the init step:- (for eg.)

Code: Select all

	typingAnim:newTypingAnimation("your text",speed)
	typingAnim:newAnimation('move',50)
	-- y is defaulted to zero means no movement along vertical

Okay that was not so complicated. But here comes the update step which can sometimes be the dreaded step in the current version of Anima as in this case:

Code: Select all

	Anima:update(stepx,stepy,stepr,stepsx,stepsy,stepo,forever,dt)

In the next version of Anima, the update step will be more simpler and will have a simple arglist {forever,dt}. But as of now there are 8 parameters and dt being the last of it.

Anyways let's talk about the arguments that need to be passed in update

dt is only required for TypingAnimation if you have no dt then you can skip it. forever is also not mandatory - it tells Anima whether it has to repeat the entire animation forever it is false by default so you can skip it. stepo is the opacifying speed which is 0.01 by default so you can skip it. And stepsx and stepsy being the scaling speed is also not mandatory since both have a default value of 0.01 so you can skip it. And similarly stepr which is the rotating speed is 9 degree per frame by default so you can skip it as well. And finally the stepx and stepy which is the moving speed along x and y axis respectively is 1 by default so there you go -you can skip it.

If you were following me then you must have realised that despite the fact that it's arg-list is pretty complicated yet none of the arguments are mandatory. So this step doesn't always have to be a headache. If you want the default speed then of-course you can achieve this by calling the update function in the following manner:-

Code: Select all

	typingAnim:update(nil,nil,nil,nil,nil,nil,nil,dt)
	--same as typingAnim:updateT(dt)

But of-course you want to avoid doing that - so just like before you can call the same function updateT again. But what if you want a speed of 5 frames per second instead of dt. Just make the first argument 5 instead of nil and rest everything must be the same.

And now comes the complicate draw step, actually there's nothing complicated about draw - this will be the same as before.

Oh sorry, it was in spam folder.

Okay i will test it

[YoungNeer]

Oh sorry, it was in spam folder.

I somewhat felt that that must be the case because gmail and other mailing services treats rediffmail as a black sheep which I don't know why ...

Okay i will test it

Thanks

[YoungNeer]

Anima is now updated!!!
Please note that Anima is now updated and now supports setSpeed (+setMoveSpeed,setScaleSpeed,setRotationSpeed,setOpacitySpeed,setTypingSpeed) function and now update takes only one parameter which is the delta-time. Also a lot of bulky code have been removed to ensure best performance
Also note that the current demos (in Github and in the attachment) will not work with the latest version of Anima. But more demos will come pretty soon with the old ones being updated

[yetneverdone]

Anima is now updated!!!
Please note that Anima is now updated and now supports setSpeed (+setMoveSpeed,setScaleSpeed,setRotationSpeed,setOpacitySpeed,setTypingSpeed) function and now update takes only one parameter which is the delta-time. Also a lot of bulky code have been removed to ensure best performance
Also note that the current demos (in Github and in the attachment) will not work with the latest version of Anima. But more demos will come pretty soon with the old ones being updated

I'm glad you changed the M, S, R, O, and so on.

[YoungNeer]

I'm glad you changed the M, S, R, O, and so on.

Oh Yes! Infact I have now made a minimal version of Anima which currently is (i'd say) COMPLETELY DOCUMENTED (github readme file still lags on documentation but the latest post does have some amount of documentation - infact inspired from Packt's Learn By Example series the post shows how you can create 4 animations very quickly.

However the full version is still not completely-development-ready (few annoying bugs) yet hence this minimal version which is completely bug-free (atleast for now)

[mojojojo]

It starts automatically. How to trigger it by "talking" to a character or a board ? I'd probably need a function that is called when certain paramaters are met but I don't know which line to put inside it and which lie to remove from your original code.