Sprite Properties

Task

Display different sprites and set scale, rotation and opacity properties.

Result

JavaScript

// Demo 3

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: 'blueStar', source: 'images/blueStar.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 a star sprite and change the scale
    let scaledStar = new grayFrog.ImageSprite(
        'star', 200, 100, imageDictionary.blueStar);
    scaledStar.scale = 0.75;
    scene.addChild(scaledStar);

    // Make a rectangle sprite and rotate it
    let rect = new grayFrog.DrawnSprite(
        'rect', scene.midX, scene.midY, 100, 100);
    rect.customDraw = function() {
        this.drawRectangleOutline('#cc0000', '#000000', 4, 1, 1);
    };
    rect.rotation = 30;
    scene.addChild(rect);

    // Make a star sprite and change the opacity
    let frog = new grayFrog.ImageSprite(
        'frog', 600, 300, imageDictionary.frog);
    frog.opacity = 0.5;
    scene.addChild(frog);

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