Getting started

To start with CAAT you first need to decide whether your application will be using DOM+CSS, Canvas or Webgl as rendering engine.

Under the build folder you'll find two files caat.js (needed to render with Canvas or WebGL) and caat-css.js to render with DOM+CSS. There're subtle differences between all three rendering technologies but you'll show no difference if using CAAT's out-of-the-box animation elements.

In this folder, you can also access caat-box2d.js which is optionally used to bind box2d with standard CAAT actor objects, as well as minified versions of all those files.

Located under documentation/demos/templates folder you can find two different template files. Those template files are an starting point which set themselves up for canvas/gl and css renderers. The developer could use the code in the folder documentation/demos/tempates/startup-wo-splash as an starting point. The code in the folder documentation/demos/tempates/startup-with-splash can be used as an starting point for an application with splash.

Needed steps to setup up a basic CAAT project are:

    1. Include the desired renderer library file. In example:
    2. Create a director object.
    3. Create an scene object.
    4. Add some Actors to the scene object.
    5. Start the animation loop.
Templated projects do all these steps at once.

CAAT Startup example

One of the minimum CAAT library setup programs could be this one: 


        // create a director object
        var director = new CAAT.Foundation.Director().initialize(
                100,    // 100 pixels wide
                100,    // 100 pixels across
                document.getElementById('_c1')
        );

        // add a scene object to the director.
        var scene=     director.createScene();

        // create a CAAT actor
        var circle=    new CAAT.Foundation.UI.ShapeActor().
                setLocation(20,20).
                setSize(60,60).
                setFillStyle('#ff0000').
                setStrokeStyle('#000000');

        // add it to the scene
        scene.addChild(circle);

        // start the animation loop
        CAAT.loop(1);

By executing it, we'll get a black-outlined red circle at position 20,20 and of radius 30.

Despite its simplicity, some facts must be taken into account:

  1. If using a Canvas/GL renderer CAAT renders on a Canvas object. You can supply one at CAAT.Director object creation time, or let CAAT create and add one for you.
  2. The Director instance is fed with scenes. CAAT.Scene instances are advanced actor containers. We'll see how the Director manages Scenes, and how to elegantly switch from one to the other.
  3. Scenes are fed with CAAT.Actor and CAAT.ActorContainer instances in a hierarchycal fashion.
  4. CAAT.loop must be called to start CAAT event loop.

And that's it, our red circle:

In this other example, we're not specifying a DOM canvas element to the Director instantiation. The director itself will create and append one to the DOM.

    // We are not pointing any canvas in the director creation statement,
    // so the director will create a Canvas for us.
    var director2 = new CAAT.Foundation.Director().initialize(100,100);

    var scene2=     director.createScene();
    var circle2=    new CAAT.Foundation.UI.ShapeActor().
            setLocation(20,20).
            setSize(60,60).
            setFillStyle('#ff00ff').
            setStrokeStyle('#00ff00');

    scene2.addChild(circle2);

    CAAT.loop(1);