CAAT.Actor

Actors as buttons

A CAAT.Actor instance can behave as a button simply by invoking the method setAsButton( sprite_image, normal, over, press, disabled, on_click).

This methos instruments that this actor will set as its background image the suplied sprite_image and that its size will be set equivalent to a sprite_image's subimage. The normal, over, press, disabled are sprite_image's subimage indexes indicating which subimage to use under the buttons states described by the parameters.

The on_click parameter is a callback function that will be invoked upon button click. This function receives the button itself as parameter..

In this example, we're setting up a button and showing an alert upon click. We'll be using a common CAAT's template for this sample.

                            
                            

                            window.addEventListener(
                                    'load',
                                    function() {
                                        CAAT.modules.initialization.init(
                                                800, 100,
                                                '_c1',
                                                [
                                                    {id:'botones', url:'resource/botones.png'}
                                                ],
                                                __scene1
                                                );
                                    },
                                    false);

                            function __scene1(director) {

                                // an image of 7 rows by 3 columns
                                var ci= new CAAT.SpriteImage().initialize(
                                        director.getImage('botones'), 7, 3 );

                                var scene= director.createScene();

                                var b1= new CAAT.Actor().setAsButton(
                                            ci.getRef(), 0, 1, 2, 0, function(button) {
                                                alert('easy pressed');
                                            }
                                        ).
                                        setLocation(0,0);

                                var b2= new CAAT.Actor().setAsButton(
                                            ci.getRef(), 6, 7, 8, 6, function(button) {
                                                alert('start pressed');
                                            }
                                        ).
                                        setLocation(1.5*ci.singleWidth, 0);

                                scene.addChild( b1 );
                                scene.addChild( b2 );
                            }