Home

Awesome

##CAAT: Canvas Advanced Animation Tookit##

CAAT is a director-based Scene graph manager.

It is able to render using Canvas, WebGL and CSS without making changes to the applications that sit on top of it.

Follow the official twitter account <a href="http://twitter.io/caatjs" class="twitter-follow-button" data-show-count="false">@caatjs</a>

Github Pages

Visit <a href="http://hyperandroid.github.io/CAAT">CAAT's github pages</a>, including:

HOW TO

<a href="http://hyperandroid.github.io/CAAT/documentation/tutorials/index.html">Tutorials can be found here.</a>

Examples and sample code

<a href="http://hyperandroid.github.io/CAAT/documentation/demos/demo34/index.html"><img class="image_h" src="http://hyperandroid.github.io/CAAT/thumbs/demo34.png" alt="Skeletal animation"></a> <a href="http://hyperandroid.github.io/CAAT/documentation/demos/demo31/dude.html"><img class="image_h" src="http://hyperandroid.github.io/CAAT/thumbs/demo31.png" alt="Sprite Animations"></a> <a href="http://hyperandroid.github.io/CAAT/documentation/demos/demo35/label.html"><img class="image_h" src="http://hyperandroid.github.io/CAAT/thumbs/demo35.png" alt="Multiline text"></a> <a href="http://hyperandroid.github.io/CAAT/documentation/demos/demo36/spritemap.html"><img class="image_h" src="http://hyperandroid.github.io/CAAT/thumbs/demo36.png" alt="Bitmap Atlas"></a> <a href="http://hyperandroid.github.io/CAAT/documentation/demos/demo1/path_org.html"><img class="image_h" src="http://hyperandroid.github.io/CAAT/thumbs/demo1.png" alt="Path management"></a> <a href="http://hyperandroid.github.io/CAAT/documentation/demos/demo2/fishpond_org.html"><img class="image_h" src="http://hyperandroid.github.io/CAAT/thumbs/demo2.png" alt="Procedural fishpond"></a> <a href="http://hyperandroid.github.io/CAAT/documentation/demos/demo3/sprites_org.html"><img class="image_h" src="http://hyperandroid.github.io/CAAT/thumbs/demo3.png" alt="Sprites traversing a random path"></a> <a href="http://hyperandroid.github.io/CAAT/documentation/demos/demo4/coordinates_org.html"><img class="image_h" src="http://hyperandroid.github.io/CAAT/thumbs/demo4.png" alt="Pixel perfect collistion detection with mouse"></a> <a href="http://hyperandroid.github.io/CAAT/documentation/demos/demo5/text-on-path_org.html"><img class="image_h" src="http://hyperandroid.github.io/CAAT/thumbs/demo5.png" alt="Sprites traversing a random path"></a> <a href="http://hyperandroid.github.io/CAAT/documentation/demos/demo6/accelerometer_org.html"><img class="image_h" src="http://hyperandroid.github.io/CAAT/thumbs/demo6.png" alt="accelerometer input"></a> <a href="http://hyperandroid.github.io/CAAT/documentation/demos/demo7/anchors_org.html"><img class="image_h" src="http://hyperandroid.github.io/CAAT/thumbs/demo7.png" alt="Actor anchors"></a> <a href="http://hyperandroid.github.io/CAAT/documentation/demos/demo8/hierarchy_org.html"><img class="image_h" src="http://hyperandroid.github.io/CAAT/thumbs/demo8.png" alt="Hierarchical rotations"></a> <a href="http://hyperandroid.github.io/CAAT/documentation/demos/demo26/hierarchy2.html"><img class="image_h" src="http://hyperandroid.github.io/CAAT/thumbs/demo26.png" alt="Hierarchy 2"></a> <a href="http://hyperandroid.github.io/CAAT/documentation/demos/demo9/behaviors_org.html"><img class="image_h" src="http://hyperandroid.github.io/CAAT/thumbs/demo9.png" alt="Some actor behaviors"></a> <a href="http://hyperandroid.github.io/CAAT/documentation/demos/demo10/garden_org.html"><img class="image_h" src="http://hyperandroid.github.io/CAAT/thumbs/demo10.png" alt="Procedural grass"></a> <a href="http://hyperandroid.github.io/CAAT/documentation/demos/demo11/circles_org.html"><img class="image_h" src="http://hyperandroid.github.io/CAAT/thumbs/demo11.png" alt="Circles collision"></a> <a href="http://hyperandroid.github.io/CAAT/documentation/demos/demo12/box2d_org.html"><img class="image_h" src="http://hyperandroid.github.io/CAAT/thumbs/demo12.png" alt="Box2D integration"></a> <a href="http://hyperandroid.github.io/CAAT/documentation/demos/demo12+1/transitions_org.html"><img class="image_h" src="http://hyperandroid.github.io/CAAT/thumbs/demo13.png" alt="Scene transitions"></a> <a href="http://hyperandroid.github.io/CAAT/documentation/demos/demo14/timers_org.html"><img class="image_h" src="http://hyperandroid.github.io/CAAT/thumbs/demo14.png" alt="Scene timers"></a> <a href="http://hyperandroid.github.io/CAAT/documentation/demos/demo15/logofrenzy_org.html"><img class="image_h" src="http://hyperandroid.github.io/CAAT/thumbs/demo15.png" alt="SpriteImage demo"></a> <a href="http://hyperandroid.github.io/CAAT/documentation/demos/demo16/mask_org.html"><img class="image_h" src="http://hyperandroid.github.io/CAAT/thumbs/demo16.png" alt="Masking"></a> <a href="http://hyperandroid.github.io/CAAT/documentation/demos/demo17/video_org.html"><img class="image_h" src="http://hyperandroid.github.io/CAAT/thumbs/demo17.png" alt="Video playback and manipullation"></a> <a href="http://hyperandroid.github.io/CAAT/documentation/demos/demo18/keys_org.html"><img class="image_h" src="http://hyperandroid.github.io/CAAT/thumbs/demo18.png" alt="Keyboard demo"></a> <a href="http://hyperandroid.github.io/CAAT/documentation/demos/demo19/collision.html"><img class="image_h" src="http://hyperandroid.github.io/CAAT/thumbs/demo19.png" alt="Quadtree based collision"></a> <a href="http://hyperandroid.github.io/CAAT/documentation/demos/demo20/flightcontrol.html"><img class="image_h" src="http://hyperandroid.github.io/CAAT/thumbs/demo20.png" alt="Flightcontrol like demo"></a> <a href="http://hyperandroid.github.io/CAAT/documentation/demos/demo21/vvv.html"><img class="image_h" src="http://hyperandroid.github.io/CAAT/thumbs/demo21.png" alt="TileMap engine preview"></a> <a href="http://hyperandroid.github.io/CAAT/documentation/demos/demo22/multitouch.html"><img class="image_h" src="http://hyperandroid.github.io/CAAT/thumbs/demo22.png" alt="Multitouch"></a> <a href="http://hyperandroid.github.io/CAAT/documentation/demos/demo23/actionTo.html"><img class="image_h" src="http://hyperandroid.github.io/CAAT/thumbs/demo23.png" alt="Action To"></a> <a href="http://hyperandroid.github.io/CAAT/documentation/demos/demo24/path.html"><img class="image_h" src="http://hyperandroid.github.io/CAAT/thumbs/demo24.png" alt="Path Creation"></a> <a href="http://hyperandroid.github.io/CAAT/documentation/demos/demo25/flipcards.html"><img class="image_h" src="http://hyperandroid.github.io/CAAT/thumbs/demo25.png" alt="Flip Cards"></a> <a href="http://hyperandroid.github.io/CAAT/documentation/demos/demo27/font.html"><img class="image_h" src="http://hyperandroid.github.io/CAAT/thumbs/demo27.png" alt="Path Sprite Fonts"></a> <a href="http://hyperandroid.github.io/CAAT/documentation/demos/demo28/paint.html"><img class="image_h" src="http://hyperandroid.github.io/CAAT/thumbs/demo28.png" alt="Minimal Paint"></a> <a href="http://hyperandroid.github.io/CAAT/documentation/demos/demo29/layout2.html"><img class="image_h" src="http://hyperandroid.github.io/CAAT/thumbs/demo29.png" alt="Auto Layout"></a> <a href="http://hyperandroid.github.io/CAAT/documentation/demos/demo30/fonts.html"><img class="image_h" src="http://hyperandroid.github.io/CAAT/thumbs/demo30.png" alt="Fonts"></a> <a href="http://hyperandroid.github.io/CAAT/documentation/demos/demo32/svgpath.html"><img class="image_h" src="http://hyperandroid.github.io/CAAT/thumbs/demo32.png" alt="SVG Path"></a> <a href="http://hyperandroid.github.io/CAAT/documentation/demos/demo33/keyframing.html"><img class="image_h" src="http://hyperandroid.github.io/CAAT/thumbs/demo33.png" alt="CSS3 Keyframes"></a>

##License## Open Source and MIT Licensed.

Hyperandroid || http://hyperandroid.io/ - All rights reserved.