Scene Transitions

Task

Show a sequence of scenes using different kinds of transitions.

Result

JavaScript

// Demo 15

const grayFrog = makeGrayFrogLibrary();

function setTextForScene(scene, text) {
    scene.text = text;
    scene.textFont = '72pt Tahoma';
    scene.textFillStyle = '#ffffff';
    scene.textStrokeWidth = 0;
    scene.textCentered = true;
}

function start() {
    // Initialize canvas, controller, and scene
    let canvas = document.getElementById('demoCanvas');
    let controller = new grayFrog.Controller(canvas, false);

    // Make scene objects
    let scene1 = controller.makeDrawnScene('scene1', '#900000');
    setTextForScene(scene1, 'First Scene');
    let scene2 = controller.makeDrawnScene('scene2', '#009000');   
    setTextForScene(scene2, 'Second Scene');    
    let scene3 = controller.makeDrawnScene('scene3', '#000090');   
    setTextForScene(scene3, 'Third Scene');    
    let scene4 = controller.makeDrawnScene('scene4', '#c0c0c0');   
    setTextForScene(scene4, 'Fourth Scene');    
    let scene5 = controller.makeDrawnScene('scene5', '#900060');   
    setTextForScene(scene5, 'Fifth Scene');    
    let scene6 = controller.makeDrawnScene('scene6', '#009090');   
    setTextForScene(scene6, 'Sixth Scene');    
    let scene7 = controller.makeDrawnScene('scene7', '#ffc000');   
    setTextForScene(scene7, 'Seventh Scene');    

    // Show first scene
    controller.scene = scene1;

    // Run a sequence of scenes
    setTimeout(function() {
        controller.transitionToScene(scene2,
            grayFrog.TRANSITION.slideLeft, 2,
            function() {
                controller.transitionToScene(scene3,
                    grayFrog.TRANSITION.slideTop, 2,
                    function() {
                        controller.transitionToScene(scene4,
                            grayFrog.TRANSITION.slideRight, 2,
                            function() {
                                controller.transitionToScene(scene5,
                                    grayFrog.TRANSITION.slideBottom, 2,
                                    function() {
                                        controller.transitionToScene(scene6,
                                            grayFrog.TRANSITION.grow, 2,
                                            function() {
                                                controller.transitionToScene(scene7,
                                                    grayFrog.TRANSITION.crossfade, 2);
                                            }
                                        );
                                    }
                                );
                            }
                        );
                    }
                );
            }
        );  
    }, 1000 );

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