User Drawn Sprites and Image Sprites

Task

Display a blue square of size 100 placed at x-coordinate = midpoint - 200 and y-coordinate = midpoint. The square is drawn using a custom drawing function. Rotate it by 30 degrees clockwise. Display another sprite with a star image placed at x-coordinate = midpoint + 200 and y-coordinate = midpoint.

Result

JavaScript

// Demo 2

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: 'redStar', source: 'images/redStar.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 new sprite with name 'blueRect' at 100, 200 with dimensions
    // of 100 by 100, and having no image attached
    let rect = new grayFrog.DrawnSprite(
        'blueRect', scene.midX - 200, scene.midY, 100, 100);

    // Define a custom drawing function using fill color, stroke color,
    // stroke width, fill opacity and stroke opacity
    rect.customDraw = function() {
        this.drawRectangleOutline('#0000cc', '#000000', 4, 0.5, 1.0);
    };

    // Add the sprite to the scene
    scene.addChild(rect);
    
    // Add another sprite, this time using an image
    let star = new grayFrog.ImageSprite(
        'redStar', scene.midX + 200, scene.midY,
        imageDictionary.redStar);
    scene.addChild(star);

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