- - Animated Text
(https://forums.graalonline.com/forums/showthread.php?t=134260336)
adam
08-26-2010 11:49 PM
Animated Text
1 Attachment(s)
Lots of updates since my initial post. Many of which are documented in the class script.
The entire process is attempted to be streamlined.
Join the class to the script.
Make a message(txt) function
Use the message() function and forget about it. Your done. That's it for a simple notification
Although simple means, there's only 1 animated text at a time. If your creative, you could do a chat system with animated texts and whatever else you can think of.
Here's the message() function used in the demo reel. As an example of 'most' features. Although the possibilities are infinite. and Mostly pretty. I still haven't seen anybody try it in -opengl mode or v6, should be nicer.
Don't think this is really complex. Remember, this is the message() function for that entire demo.
Edit: I just updated it, so now it uses less { }'s
PHP Code:
function msg4(txt){
this.m = newText(this, 300, -this.m.width, screenheight*.3,txt);
// this, <start index>, <startx>. <starty>, <text>
// this, always put that there. Hard to explain that one, just do it.
// <start index>, the index it starts drawing from. Uses 3 index's currently, so if you put in 200, be sure the next one is 203 or higher.
// <startx>, self explanatory
// <starty>, ' '
// <text>, ' '
this.m.getClicks(); // let's this animated text send out an event when clicked
this.m.default_method = "easeInOutQuad"; // sets the default ease method to use for this animated text.
this.m.A( {"balpha", 0, 1}, {"talpha", 0, 1} );
// obj.A( ) this is the function used to queue "actions" for animation.
// "actions" are blocks that look like this: {<property>, <time>, <value>[, <ease Method>]} or {<action>, <value>}
// {"width", "height","delay","x","y","zoom","balpha","talpha","bgPadding","outline","tRed","tBlue","tGreen","bRed","bBlue","bGreen","oRed","oGreen","oBlue"}
// that is the full list of <property>'s that can be animated.
// {"NewText", "Fixed", "Destroy", "Trigger", "Play"}
// That is the list of <action>'s that can be used.
// <time> is how long the <property> takes to change from it's initial value to <value>
// <ease Method> is "how" the value changes from the old one to the new one. It really makes a huge difference.
// The best way to know what they do, is to try them out. The names are listed in the class.
// They are also listed as arrays under the animated text object. obj.In, obj.Out, obj.InOut .
// <action>'s are done instantly. <property>'s are done instantly if you set <time> to 0
this.m.A( {"x", 2, screenwidth*.1,"easeOutElastic"} );
this.m.A( {"x", 2, screenwidth*.4},{"y", 2, screenheight-this.m.height,"easeOutBounce"} );
this.m.A( {"x", 2, screenwidth*.8},{"y", 2, screenheight*.3,"easeInBounce"} );
this.m.A( {"x", 2, screenwidth*.3,"easeOutBack"},{"y",2,screenheight*.5,"easeInOutQuad"},{"zoom", 2, 1.4} );
this.m.A( {"zoom", 1, 1.1},{"tred", 1, 0},{"tblue", 1, .3},{"outline", 1, 16} );
for (temp.i=0; temp.i< 5; temp.i++){
this.m.A( {"talpha", .5, 0},{"balpha", .5, 0} );
this.m.A( {"NewText", "Blinky #" @ temp.i + 1} );
this.m.A( {"talpha", .5, 1},{"balpha", .5, 1} );
}
this.m.A( {"talpha", .5, 0},{"balpha", .5, 0} );
this.m.A( {"NewText", "How do you like the animation so far?"},{"talpha",.5,1},{"balpha", 1, 1});
this.m.A( {"outline", 2, 2},{"bgPadding", 2, 16},{"oRed", 2, 0},{"oBlue", 2, 0} );
this.m.A( {"tRed", 2, 0},{"tBlue", 2, 0},{"bgPadding", 2, 2} );
this.m.A( {"x", 1, screenwidth*.05,"easeInExpo"},{"y", 1, screenheight*.7, "easeOutBack"} );
this.m.A( {"Fixed",false} );
this.m.A( {"width", 2, screenwidth*.7, "easeOutBounce"} );
this.m.A( {"talpha", .5, 0},{"balpha", .5, 0} );
this.m.A( {"NewText", "Well, do you like it? (Click)"} );
this.m.A( {"talpha", .5, 1},{"balpha", .5, 1} );
this.m.A( {"tRed", 2, 0},{"tGreen", 2, 0},{"tBlue", 2, 1},{"oRed", 2, 0},{"oGreen", 2, 0},{"oBlue", 2, 1} );
this.m.A( {"delay", 4} );
this.m.A( {"talpha", .5, 0},{"balpha", .5, 0} );
this.m.A( {"Fixed", true});
this.m.A( {"talpha", .5, 1},{"balpha", .5, 1} );
this.m.A( {"zoom", 1, 1.3} );
this.m.A( {"x", 2, screenwidth*.3,"easeInBack"},{"y", 2, screenheight*.3,"easeInBack"} );
this.m.A( {"talpha", .5, 0} );
this.m.A( {"NewText", "Well, this demo wasn't that long. :'("} );
this.m.A( {"talpha", .5, 1},{"Fixed", false},{"delay", 3},{"tRed", 3, .8},{"tGreen", 3, .8} );
this.m.A( {"talpha", .5, 0});
this.m.A( {"NewText", "Well, I hope you liked it anyhow."} );
this.m.A( {"talpha", .5, 1} );
this.m.A( {"delay", 3} );
this.m.A( {"talpha", .5, 0} );
this.m.A( {"NewText", "Well, Post about it. Bye!"},{"talpha", .5, 1},{"oRed", 1, .8},{"oGreen", 1, .8},{"oBlue", 1, 1} );
this.m.A( {"y", 4, -70, "easeInBack"},{"x", 4, -30, "easeInElastic" } );
this.m.A( {"delay", 4} );
this.m.A( {"Destroy"} );
this.m.start();
}
And if I remember, I attach the class script.
Oh, and there is sound file support, {"Play", <soundfile>} is the action for that. o.O There's a bit more documentation in comments in the class script, or ask me here.
WhiteDragon
08-26-2010 11:58 PM
Looks good. Consider thinking about a nicer way of setting options or having new text though, it kind of hurts to look at all of those brackets.
adam
08-27-2010 12:04 AM
Quote:
Originally Posted by WhiteDragon
(Post 1596876)
Looks good. Consider thinking about a nicer way of setting options or having new text though, it kind of hurts to look at all of those brackets.
Yeah, that's quite a lot of brackets. Although I believe it is incredibly simple for the amount of complexity you get back. I agree, there could be a better way.
DrakilorP2P
08-27-2010 12:14 AM
Looking smooth.
adam
08-27-2010 05:03 AM
If I can get some takers, to give making a few animations a try, and post some feedback, that'd be great. I wanna make sure it's easy enough to use for everybody.
Dnegel
08-27-2010 04:20 PM
It's really smooth indeed, very clean and nice. :)
adam
08-29-2010 03:45 AM
Hmm. Having a tough time thinking of a better way to input all that animation data.
salesman
08-29-2010 06:12 AM
It would be cool to have some kind of interface to control the animations, but that'd become quite the project.
adam
08-29-2010 01:43 PM
Quote:
Originally Posted by salesman
(Post 1597222)
It would be cool to have some kind of interface to control the animations, but that'd become quite the project.
Yeah... would that ever be a project. I'm not sure it would be any easier, just cooler.
adam
09-10-2010 12:42 AM
Bumpity! I spent my birthday working on this, come on post some video replies! What have you thought to do !
adam
12-09-2010 06:52 AM
aw, I gave it a few months, nobody wanted to use it?
Fulg0reSama
12-09-2010 06:54 AM
Quote:
Originally Posted by adam
(Post 1615560)
aw, I gave it a few months, nobody wanted to use it?
UN kinda did it without the animation
Mark Sir Link
12-09-2010 10:45 AM
Quote:
Originally Posted by Fulg0reSama
(Post 1615561)
UN kinda did it without the animation
I believe that system predates RogueShadow's (I recall showing it to him when he first posted about this)
DrakilorP2P
12-09-2010 06:54 PM
Quote:
Originally Posted by adam
(Post 1615560)
aw, I gave it a few months, nobody wanted to use it?
It's hard to make things people want. Have you used it yourself?
Tigairius
12-12-2010 10:38 PM
When you posted this, I really didn't want to be a downer since it looked like you worked pretty hard on it... but about 90% of this can be done using the particle engine (which supports text) and it's a lot more efficient to do it that way too. :)
WhiteDragon
12-13-2010 12:27 AM
Quote:
Originally Posted by Tigairius
(Post 1616026)
... but about 90% of this can be done using the particle engine (which supports text) and it's a lot more efficient to do it that way too.
I disagree with this. The particle engine provides an API for describing a pattern for multiple particles, it is not made for manipulating single particles in specific ways -- trying to do that with the particle engine usually just makes things messy.
RogueShadow's script allows you to sequence different, more specific patterns on single objects (i.e., specific points, tweens, and all of this on any attribute).
It's true that his script and the particle engine do similar things, but they are built for two different purposes and it shows.
Codein
12-13-2010 12:52 AM
The script's configuration could look so much cleaner if Graal had support for JSON.
adam
01-11-2011 10:06 PM
Quote:
Originally Posted by Codein
(Post 1616040)
The script's configuration could look so much cleaner if Graal had support for JSON.
Cleaner is better indeed. Dirty scripts scare people away from wanting to dive into them.
thanks for more replies, I have been pretty lazy, and I did make this script because I would have need of it with other projects.
I realized I needed to learn some new skills, namely create an SQL backend for half the projects I was interested in, and I was pretty busy irl. Still am, but Now i'm finding a little itch to make something, I have a hard time not scratching it.
