Action Sequences

Task

Create a frog sprite and let it perform a sequence of actions.

Result

JavaScript

// Demo 7

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' }
        ],
        () => 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 frog sprite
    let frog = new grayFrog.ImageSprite('frog', -100, 200,
        imageDictionary.frog);
    scene.addChild(frog);

    // Define actions
    let actions = [
        new grayFrog.Action('x', 400, 2, grayFrog.EASING.inout),
        new grayFrog.Action('scale', 1.5, 0.5, grayFrog.EASING.inout),
        new grayFrog.Action('scale', 1, 0.5, grayFrog.EASING.inout),
        new grayFrog.Action('y', 50, 0.5, grayFrog.EASING.inout),
        new grayFrog.Action('y', 350, 1, grayFrog.EASING.inout),  
        new grayFrog.Action('y', 200, 0.5, grayFrog.EASING.inout),
        new grayFrog.Action('x', 700, 2, grayFrog.EASING.inout),
        new grayFrog.Action('rotation', 1080, 2, grayFrog.EASING.linear),
        new grayFrog.Action('x', -100, 2, grayFrog.EASING.inout)
    ];

    // Concatenate actions
    const n = actions.length;
    for (let i = 0; i < n - 1; i++) {
        actions[i].addSuccessorAction(actions[i + 1]);
    }
    actions[n - 1].addSuccessorAction(actions[0]);

    // Attach first action to frog
    frog.addAction(actions[0]);

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