Actions

Task

Create sprites and attach different actions to them: The frog has a 'scale' action attached to it, the red star an 'opacity' action. The rays have two actions simultaneously ('scale' and 'rotate') and the blue star sprite has three ('x', 'scale' and 'rotation'). The yellow rings are created endlessly, each ring is deleted after the 'scale' action has finished.

Result

JavaScript

// Demo 6

const grayFrog = makeGrayFrogLibrary();

function start() {
    // Load images and start demo when loading has finished    
    let ip = new grayFrog.ImagePreloader();
    ip.preloadImages(
        [
            { name: 'grid', source: 'images/grid.png' },
            { name: 'frog', source: 'images/frog.png' },
            { name: 'redStar', source: 'images/redStar.png' },
            { name: 'blueStar', source: 'images/blueStar.png' },
            { name: 'blueRays', source: 'images/blueRays.png' },
            { name: 'yellowRing', source: 'images/yellowRing.png' }
        ],
        () => demo(ip.imageDictionary)
    );
}

function demo(imageDictionary) {
    // Initialize canvas, controller, and scene
    let canvas = document.getElementById('demoCanvas');
    let controller = new grayFrog.Controller(canvas, true);
    let scene = controller.makeImageScene('main', imageDictionary.grid);
    controller.scene = scene;

    // Make sprites
    let frog = new grayFrog.ImageSprite(
        'frog', 100, 300, imageDictionary.frog);
    frog.scale = 0.25;
    frog.addAction(new grayFrog.Action('scale', 2, 3,
        grayFrog.EASING.inout,
        { atEndBehaviour: grayFrog.ACTION_AT_END_BEHAVIOUR.oscillate }));
    scene.addChild(frog);

    let blueRays = new grayFrog.ImageSprite(
        'blueRays', 250, 100, imageDictionary.blueRays);
    blueRays.scale = 0.5;
    blueRays.addAction(new grayFrog.Action('scale', 1, 5,
        grayFrog.EASING.inout,
        { atEndBehaviour: grayFrog.ACTION_AT_END_BEHAVIOUR.oscillate }));
    blueRays.addAction(new grayFrog.Action('rotation', 360, 10,
        grayFrog.EASING.linear,
        { atEndBehaviour: grayFrog.ACTION_AT_END_BEHAVIOUR.repeat }));
    scene.addChild(blueRays);

    let blueStar = new grayFrog.ImageSprite(
        'blueStar', 250, 100, imageDictionary.blueStar);
    blueStar.scale = 0.5;
    blueStar.addAction(new grayFrog.Action('x', 700, 5,
        grayFrog.EASING.inout,
        { atEndBehaviour: grayFrog.ACTION_AT_END_BEHAVIOUR.oscillate }));
    blueStar.addAction(new grayFrog.Action('scale', 2.5, 5,
        grayFrog.EASING.inout,
        { atEndBehaviour: grayFrog.ACTION_AT_END_BEHAVIOUR.oscillate }));
    blueStar.addAction(new grayFrog.Action('rotation', 360, 5,
        grayFrog.EASING.inout,
        { atEndBehaviour: grayFrog.ACTION_AT_END_BEHAVIOUR.oscillate }));

    scene.addChild(blueStar);

    let redStar = new grayFrog.ImageSprite(
        'redStar', 400, 300, imageDictionary.redStar);
    redStar.addAction(new grayFrog.Action('opacity', 0.1, 2,
        grayFrog.EASING.inout,
        { atEndBehaviour: grayFrog.ACTION_AT_END_BEHAVIOUR.oscillate }));
    scene.addChild(redStar);

    // Create an endless stream of expanding rings
    setInterval(() => {
        let ring = new grayFrog.ImageSprite(
            'ring', 700, 300, imageDictionary.yellowRing);
        ring.scale = 0;
        ring.addAction(new grayFrog.Action('opacity', 0, 2,
            grayFrog.EASING.linear));
        ring.addAction(new grayFrog.Action('scale', 2, 2,
            grayFrog.EASING.linear,
            { atEndBehaviour: grayFrog.ACTION_AT_END_BEHAVIOUR.delete }));
        scene.addChild(ring);
    }, 1200);

    // Start the game loop
    controller.start();
}