CAAT.Actor

Transformations

Transformations are the way an Actor can modify its appearance and still be the same Actor. In example, when the developer sets a width Scaling transformation, though the actor visually has a different size, it is still the same size. This may seem a little bit odd, but one property of an Actor is its dimension (either set by the method setSize, setBounds, or directly modifying its width and height attributes), and other property is how it is seen and managed through out the Director via affine transformations.

An Actor can have three different transformations applied.

Translation

This is a trivial translation which does not affect the visual appearance, but just location. It is not recommended to directly set Actor.x and Actor.y attributes since this will prevent CAAT to set the correct transformation in certain renderers.

As a rule of thumb, always use accesor/mutator methods to get/set an actor instance properties.

Rotation

This transformation will rotate the Actor a number of radians. There are two methods for applying rotations:

function setRotation( angle_in_radians )

function setRotationAnchored( angle_in_radians, center_x, center_y )

the function setRotation is a helper for setRotationAnchored, and assumes the developer wants to rotate around actor's center. The default rotation is 0 radians, ie, no rotation.

The values center_x and center_y define an offset position to rotate around in pixels from the top left corner of the actor (0,0 posisiton). The value in pixels is opposed to that in percentage specified in setValues method of RotateBehavior as we'll see.

Scale

This transformation will make the Actor wider and or taller. The developer specifies two scale values one for width and another for height. These values are a multiplier for Actors dimension. The default values for scale are both 1, meaning the resulting Actor size will be width*1 and height*1, ie, no changes. The developer could specify negative values, meaning that the Actor would be mirrored. The methods to set Actor's Scale are:

function setScale( scale_x, scale_y )

function setScaleAnchored( scale_x, scale_y, anchorX, anchorY )

As with rotations, setScale is a helper method for setScaleAnchored. Also the anchor values are interpreted the same way.

One important thing about rotation and scale transformations is that the rotation anchor and the scale anchor can be different.

Example

In this example, we see some transformations applied to different 80x80 pixels Actors. Move the mouse over the green actors, and see how the Local coord parameter varies. Despite the size on screen, it will always give the correct values from 0 to 80 in width and height.


                // Initialize director.
                var _director_3= new CAAT.Director().initialize(
                        400,
                        120,
                        document.getElementById('_c3'));

                // create scene.
                var _scene_3=    _director_3.createScene();

                // create a simple actor. no transformations.
                var _pulsating_actor_3_0= new CAAT.Actor().
                        setBounds(10,20,80,80).
                        setFillStyle('#00ff00');
                _pulsating_actor_3_0.name= 'no transformation';

                // rotated 30 degrees
                var _pulsating_actor_3_1= new CAAT.Actor().
                        setBounds(120,20,80,80).
                        setFillStyle('#00ff00').
                        setRotation( Math.PI/6 );
                _pulsating_actor_3_1.name= 'rotated 30 degrees';

                // half in width
                var _pulsating_actor_3_2= new CAAT.Actor().
                        setBounds(200,20,80,80).
                        setFillStyle('#00ff00').
                        setScale( .5, 1 );
                _pulsating_actor_3_2.name= 'scaled(.5,1)';

                // 125% width, half height
                var _pulsating_actor_3_3= new CAAT.Actor().
                        setBounds(300,20,80,80).
                        setFillStyle('#00ff00').
                        setScale( 1.2, .4 );
                _pulsating_actor_3_3.name= 'scaled(1.25,.5)';

                // from example 1
                var mouseMoveHandler= function(mouseEvent) {
                    // get the scene Actor the event was generated for.
                    var actor= mouseEvent.source;

                    // show some event info:
                    document.getElementById('_c3_coords').innerHTML=
                            "Actor:"+ actor.name+" "+
                            "Local Coord: ("+
                                // with all this stuff i'm just stripping
                                // off any decimal beyond .99
                                ((mouseEvent.point.x*100)>>0)/100+", "+
                                ((mouseEvent.point.y*100)>>0)/100+") "+
                            "Screen Coord: ("+
                                mouseEvent.screenPoint.x+", "+
                                mouseEvent.screenPoint.y+") ";
                };

                // change default mouse handler to report coordinates.
                _pulsating_actor_3_0.mouseMove= mouseMoveHandler;
                _pulsating_actor_3_1.mouseMove= mouseMoveHandler;
                _pulsating_actor_3_2.mouseMove= mouseMoveHandler;
                _pulsating_actor_3_3.mouseMove= mouseMoveHandler;

                // don't forget to actors to the scene.
                _scene_3.addChild( _pulsating_actor_3_0 );
                _scene_3.addChild( _pulsating_actor_3_1 );
                _scene_3.addChild( _pulsating_actor_3_2 );
                _scene_3.addChild( _pulsating_actor_3_3 );

                // set 20 fps animation
                CAAT.loop(20);