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.

In the library bundle 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.

Once the rendering engine's been chosen (use caat.js file which covers all possibilities), simply include it on your html file:

Make sure to change the path '../../build/' to your needs.

CAAT Templates

To make starting with CAAT easier, there are two out-of-the-box generated templates. They are located in the CAAT-Samples file bundle under the templates folder. Use them as the start point to create a custom CAAT application.

  • One template will simply launch the scene after loading located under the folder startup-wo-splash.
  • Another version which will show an splash screen, keep it shown at least for 3 seconds, and then get the created CAAT scene in. It is located under the folder startup-with-splash.

How to start

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

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

        var scene=     director.createScene();

        var circle=    new CAAT.ShapeActor().
                setLocation(20,20).
                setSize(60,60).
                setFillStyle('#ff0000').
                setStrokeStyle('#000000');

        scene.addChild(circle);

        director.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. When using CAAT, it's mandatory to create a CAAT.Director instance. The Director is the entry point to CAAT.
  2. You must explictly supply a canvas size in pixels. In this example 100 by 100 pixels.
  3. The director will perform animations in a HTML document canvas element. We can supply a reference to a canvas, or simple issue a new CAAT.Director().initialize(100,100) command and let the director create a canvas for us.
  4. 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.
  5. Scenes are fed with CAAT.Actor instances. Indeed, as much as needed.
  6. CAAT.Actor instances and its subinstances (ShapeActor, SpriteActor, etc.) have a lifecycle, so it must be explicitly stated the call to create method.
  7. We must call director.loop to signal CAAT to start delivering content to the canvas.

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 one for us and we'll be responsible for adding the element to the desired position in 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.Director().initialize(100,100);

    // add the canvas to the document:
    document.getElementById('div_canvas2').appendChild( director2.canvas );

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

    scene2.addChild(circle2);

    director2.loop(1);