Find tutorials and demos on CAAT Here
Fork and contribute to CAAT here
CAAT in essence is a multi-instance director-based Scene graph manager.
It is multi-instance in the sense that you can set an undefined number of directors up for each web page.
Each director is able to manage different Scenes with different timelines.
The scenes contain a graph of different Actor and Containers which conform the animation elements.
CAAT has some features out-of-the-box among which we can highlight:
- Seamless zero-coding WebGL and CSS rendering engines.
- Unlimited number of Scenes per Director.
- Unlimited number of Actors and ActorContainers per Scene.
- Hierarchycally applied affine transformations (rotations, scales and translations).
- Hierarchycally applied alpha composition.
- Unlimited number of timers per Scene.
- Ability to define complex paths for translations applied to Actors and ActorContainers.
- Easing and interpolation functions for affine transformations and alpha transparency application.
- Homogeneous coordinate system. Each contained Actor will receive correct input coordinates on its coordinate system
regardless of its parents applied transformations. - Abstracted input system, from mouse events to keyboard and accelerometer.
- Resource management and preloading.
- Many types of actors supported: Sprites, Shapes, Text, Path, Interpolator, etc.
- Easily extendable framework.
- Open Source and MIT Licensed.
- Performs properly in all major canvas enabled browsers. Internet explorer must be version 9 or greater.
I’ve developed the game MathMayhem on top of CAAT.
A rush against time to add up the required number. Beat the chrono while stressing your mental agility.
Genial… si estás pensando en dejarlo open source y necesitas beta-testers, encantadissimo. Yo vengo de actionscript, no se si te sirve.
Saludos y felicidades!
LikeLike
serious dope! I love the fish field!
LikeLike
Simplemente fabuloso
LikeLike
Impressive!
LikeLike
Amazing job! Thanks for making this open source!!!
LikeLike
I love this. Seriously love this.
LikeLike
Are you available for a freelance project.?
LikeLike
send me an email 🙂
2011/11/26 Disqus
LikeLike
can we embed font through the caat…????
LikeLike
Hi, vinay
If you mean whether you could use embedded fonts like google fonts, the answer is yes.
The only drawback is that by the time the canvas element accessed in example a CAAT.TextActor which uses the font embedded, it may happen the font is not still loaded. To prevent this, you should create a div in your markup which references the embedded font, something like:
.
which will make your embedded font to be preloaded.
CAAT supports sprited fonts with the object CAAT.Font object. You could also draw text with an atlas texture with the CAAt.SpriteImage object as well.
Hope this helps.
Regards,
-ibon
2012/1/24 Disqus
LikeLike
is this project still alive ?
LikeLike
More than ever.
http://github.com/hyperandroid/caat http://labs.hyperandroid.com/static/CAAT-Samples/demos/demo1/path.html
-ibon
El 15 de febrero de 2012 17:07, Disqus
escribió:
LikeLike
I have 2 different CAAT.Actor objects. I require the effect of fading in and out on both objects but one at a time. First obj1 shd fade out then obj2. Loop continues when obj2 has fade out ….
I tried applying CAAT.AlphaBehavior set the cycle as false alpha_1= new CAAT.AlphaBehavior().
setValues(1,0).
setCycle(false).
setFrameTime( 0, 3000 ); as soon as i get expired event – i try resetting same behavior again. But this doesnt seem working.. Let me know if i am on right track or if there is a better way to achieve this behavior .
LikeLike
Hi,
Can it handle multi-column long text with an option for dynamic font sizes and text reflow ?
LikeLike
There’s no such feature in CAAT.
If using CSS, you could access the wrapped div object and set its inner html though.
regards,
-ibon
El 12 de marzo de 2012 03:55, Disqus
escribió:
LikeLike
Thank you for the reply.
Can we package CAAT efficiently with Phone Gap for Android devices ?
LikeLike
By efficiently you mean it will perform fast ?
If so, I think it won’t. And not because CAAT implementation.
You could try other javascript wrapping frameworks like CocoonJS from http://www.ludei.com.
Regards,
-ibon
LikeLike
Can CAAT be mixed with another JS framework ?
LikeLike
CAAT is opensource and MIT license, so depending on other JS frameworks you could.
Up to you, but always make sure both licenses can co-exist.
-ibon
LikeLike
Hi.
According to documentation, CAAT.actor have mouseOver and mouseOut events.But I can’t get them working. Is this an error in the documentation or do these events really exist ?What are the differences with the mouseEnter and mouseExit events ?Thx.
LikeLike
This is already solved in the forums: http://groups.google.com/group/caatjs/browse_thread/thread/8b5f3a282ae925c0?hl=es
As a side note, from my own experience as a developer, previously to start thinking about broken documentation or doubting about the veracity of exposed API, I usually tend to think i’m doing things the wrong way.
-i
El 14 de marzo de 2012 19:12, Disqus
escribió:
LikeLike
CAAT follows the standard AMD ? Is possible to it use with Requirejs ?
Thanks
LikeLike
It doesn’t.
Have thought about it since a while, but i’m not sure whether it will be worth it.
any comments in favor of AMD or CommonJS 🙂 ?
best.
-ibon
LikeLike
Hi,
The tutorial says:
There’s also a native implementation which executes CAAT seamlessly on iOS and Android.
Where can I get those?
Thanks!
LikeLike
Is this project still alive? Can’t seem to find an active community. Am I wrong? This project looks really promising, but I need to know if it’s not abandoned… Thanks!
LikeLike
Hi, I have wrote in the forum, still no reply..how can I rotate an actor ( an image for example) in each path segment? I want it rotates to certain degrees when going up and then other degress when going down. Like in some flappy bird jump movement.
thanks,
LikeLike
can we do masking how can we set the border range of masking to one actor?
LikeLike