Sprite Creation and Positioning

Task

Display a grid image representing the 800x400 size canvas. Show a sprite in the middle of the canvas.

Result

JavaScript

// Demo 1

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) {
    // Get canvas element
    let canvas = document.getElementById('demoCanvas');

    // Initialize new controller, turn on counters display
    let controller = new grayFrog.Controller(canvas, true);
    
    // Make a scene object
    let scene = controller.makeImageScene('main', imageDictionary.grid);
 
    // Make it the current scene
    controller.scene = scene;

    // Make a new image sprite with name 'frog' at the center of the canvas
    let frog = new grayFrog.ImageSprite(
        'frog', scene.midX, scene.midY, imageDictionary.frog);

    // Add the sprite to the scene
    scene.addChild(frog);

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