tin-engine/basic/morph.example.js

Simple game engine to make small canvas based games using es6

import Scene from '../lib/scene.js';
import V2 from '../geo/v2.js';
import RectEntity from './rect.js';
import Morph from './morph.js';
import easing from '../definition/easing.js';

class BasicExampleScene extends Scene {
    constructor() {
        super();
        // Create an entity to animate
        const rect = new RectEntity(new V2(100, 100), new V2(50, 100));
        this.add(rect);

        // Base function that adds a morph to the rect
        const animate = () => {
            // Animate x position to move to the right
            rect.add(new Morph({position: {x: 650}}, 1000, easing.LINEAR, () => {
                // Animate x to move back to the original position, then start over
                rect.add(new Morph({position: {x: 100}}, 1000, easing.LINEAR, animate));
            }));
        };

        // start animation
        animate();
    }
}

export default [
    {
        title: "Basic Example",
        description: `The morph allows you to animate properties of an entity over a duration.
            It detaches itself from it's parent as soon as the animation is completed and then calls the callback.
            Put an easing function to control the easing of the animation.`,
        scene: BasicExampleScene
    }
];