Frame Animation

Task

Display a walking character.

Result

JavaScript

// Demo 11

const grayFrog = makeGrayFrogLibrary();

function start() {
    // Load images and start demo when loading has finished    
    let ip = new grayFrog.ImagePreloader();
    ip.preloadImages(
        [
            { name: 'walkerFrames', source: 'images/walkerFrames.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.makeDrawnScene('main', '#ffffff');
    controller.scene = scene;

    // Add the walker sprite
    let walker = new grayFrog.FrameSprite('walker',
        scene.midX, scene.midY + 1, imageDictionary.walkerFrames, 8, 0.15);
    walker.scale = 0.3;
    walker.positionAutoUpdate = true;
    walker.vx = 50;
    walker.vy = 0;
    walker.edgeBehaviour = grayFrog.EDGE_BEHAVIOUR.wraparaound;
    scene.addChild(walker);
    
    // Draw ground underneath walker
    let h = scene.height - walker.y - walker.midY * walker.scale + 1;
    let ground = new grayFrog.DrawnSprite('ground',
        scene.midX, walker.y + (walker.height * walker.scale) / 2 + h / 2, scene.width, h,
        function() { this.drawRectangleOutline("#909090", "#909090", 0, .5, .5); });
    scene.addChild(ground);

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