@gg-web-engine/core 0.0.2 → 0.0.4

package/dist/base/entities/controllers/animation-mixer.js

@@ -0,0 +1,143 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnimationMixer = void 0;
+const gg_entity_1 = require("../gg-entity");
+const rxjs_1 = require("rxjs");
+const operators_1 = require("rxjs/operators");
+/**
+ * A class that performs property animations for a specific type `T` by using provided animation function.
+ * Supports smooth transition between animation function by interpolating between values over time.
+ * The current value of the animation can be subscribed to using the `subscribeToValue` property.
+ * The animation function can be changed with `transitAnimationFunction` or `transitFromStaticState`.
+ */
+class AnimationMixer extends gg_entity_1.GgEntity {
+    /**
+     * Creates a new `AnimationMixer` entity.
+     * @param _animationFunction The initial motion control function that determines the animation.
+     * @param _lerp The linear interpolation between two values of type `T`.
+     */
+    constructor(_animationFunction, _lerp = (a, b, t) => b) {
+        super();
+        this._animationFunction = _animationFunction;
+        this._lerp = _lerp;
+        this.tickOrder = gg_entity_1.GGTickOrder.ANIMATION_MIXERS;
+        /**
+         * A subject that emits the current value of the animation on every tick.
+         */
+        this._value$ = new rxjs_1.Subject();
+        /**
+         * The current transition time reference `[elapsed, delta]` that interpolates between the old and new functions.
+         */
+        this._currentTransitionK = [0, 0];
+        /**
+         * The current transition subscription, which is null if no transition is currently active.
+         */
+        this._currentTransition = null;
+        /**
+         * A behavior subject that emits whether the animator is currently in a transition.
+         */
+        this._isInTransition$ = new rxjs_1.BehaviorSubject(false);
+    }
+    /**
+     * Gets an observable of the current value of the animation.
+     */
+    get value$() {
+        return this._value$.asObservable();
+    }
+    /**
+     * Gets the current motion control function that determines the animation.
+     */
+    get animationFunction() {
+        return this._animationFunction;
+    }
+    /**
+     * Sets the current motion control function that determines the animation.
+     * @param value The new motion control function.
+     */
+    set animationFunction(value) {
+        if (this.currentTransition) {
+            this.currentTransition = null;
+        }
+        this._animationFunction = value;
+    }
+    /**
+     * Gets a flag whether the animator is currently in a transition.
+     */
+    get isInTransition() {
+        return this._isInTransition$.getValue();
+    }
+    /**
+     * Gets an observable that emits whether the animator is currently in a transition.
+     */
+    get isInTransition$() {
+        return this._isInTransition$.pipe((0, rxjs_1.distinctUntilChanged)());
+    }
+    get currentTransition() {
+        return this._currentTransition;
+    }
+    set currentTransition(value) {
+        this._currentTransition = value;
+        this._isInTransition$.next(!!value);
+    }
+    /**
+     * Set output to static value and smoothly transit to new control function
+     * @param newFunc a new function
+     * @param transitionDuration a duration, after which new function will be fully controlling the output
+     * @param easing an easing function for transition
+     */
+    transitFromStaticState(state, newFunc, transitionDuration, easing = x => x) {
+        this.animationFunction = () => state;
+        return this.transitAnimationFunction(newFunc, transitionDuration, easing);
+    }
+    /**
+     * Smoothly transit to new control function
+     * @param newFunc a new function
+     * @param transitionDuration a duration, after which new function will be fully controlling the output
+     * @param easing an easing function for transition
+     */
+    transitAnimationFunction(newFunc, transitionDuration, easing = x => x) {
+        let oldAnimFunc;
+        if (this.currentTransition) {
+            // interrupt it by freezing K, so it will still work as binding, but do not animate further
+            this.currentTransition = null;
+            const oldTransitionAnimationFunction = this._animationFunction;
+            const oldTransitionLatestK = this._currentTransitionK;
+            oldAnimFunc = () => oldTransitionAnimationFunction(...oldTransitionLatestK);
+        }
+        else {
+            oldAnimFunc = this._animationFunction;
+        }
+        let k = 0;
+        this._animationFunction = (elapsed, delta) => this._lerp(oldAnimFunc(elapsed, delta), newFunc(elapsed, delta), k);
+        let startTime;
+        this.currentTransition = ([elapsed, delta]) => {
+            this._currentTransitionK = [elapsed, delta];
+            if (startTime === undefined) {
+                startTime = elapsed;
+            }
+            else {
+                k = (elapsed - startTime) / transitionDuration;
+                if (k >= 1) {
+                    k = 1;
+                    this.currentTransition = null;
+                    this._animationFunction = newFunc;
+                }
+                else {
+                    k = easing(k);
+                }
+            }
+        };
+    }
+    onSpawned(world) {
+        super.onSpawned(world);
+        this.tick$
+            .pipe((0, rxjs_1.takeUntil)(this._onRemoved$), (0, operators_1.tap)(([elapsed, delta]) => this.currentTransition && this.currentTransition([elapsed, delta])), (0, operators_1.map)(([elapsed, delta]) => this._animationFunction(elapsed, delta)))
+            .subscribe(value => this._value$.next(value));
+    }
+    dispose() {
+        super.dispose();
+        this.tick$.complete();
+        this._value$.complete();
+    }
+}
+exports.AnimationMixer = AnimationMixer;

package/dist/base/entities/gg-entity.d.ts

@@ -1,13 +1,45 @@
 import { GgWorld } from '../gg-world';
+import { Subject } from 'rxjs';
+/**
+ * Engine's default tick orders: the less value, the earlier tick will be run.
+ */
+export declare enum GGTickOrder {
+    INPUT_CONTROLLERS = 0,
+    PHYSICS_SIMULATION = 200,
+    OBJECTS_BINDING = 400,
+    ANIMATION_MIXERS = 600,
+    CONTROLLERS = 800,
+    RENDERING = 1000,
+    POST_RENDERING = 1200
+}
 export declare abstract class GgEntity {
-    get world(): GgWorld<any, any> | null;
+    /**
+     * will receive [elapsed time, delta] of each world clock tick
+     */
+    readonly tick$: Subject<[number, number]>;
+    /**
+     * the priority of ticker: the less value, the earlier tick will be run.
+     */
+    abstract readonly tickOrder: GGTickOrder | number;
+    /**
+     * a world reference, where this entity was added to
+     */
     protected _world: GgWorld<any, any> | null;
+    get world(): GgWorld<any, any> | null;
     protected _name: string;
     get name(): string;
     set name(value: string);
+    /**
+     * The flag whether entity should listen to ticks. If set to false, ticks will not be propagated to this entity
+     * */
+    protected _active: boolean;
+    get active(): boolean;
+    set active(value: boolean);
     protected _children: GgEntity[];
     addChildren(...entities: GgEntity[]): void;
     removeChildren(entities: GgEntity[], dispose?: boolean): void;
+    protected _onSpawned$: Subject<void>;
+    protected _onRemoved$: Subject<void>;
     onSpawned(world: GgWorld<any, any>): void;
     onRemoved(): void;
     dispose(): void;

package/dist/base/entities/gg-entity.js

@@ -1,11 +1,38 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.GgEntity = void 0;
+exports.GgEntity = exports.GGTickOrder = void 0;
+const rxjs_1 = require("rxjs");
+/**
+ * Engine's default tick orders: the less value, the earlier tick will be run.
+ */
+var GGTickOrder;
+(function (GGTickOrder) {
+    GGTickOrder[GGTickOrder["INPUT_CONTROLLERS"] = 0] = "INPUT_CONTROLLERS";
+    GGTickOrder[GGTickOrder["PHYSICS_SIMULATION"] = 200] = "PHYSICS_SIMULATION";
+    GGTickOrder[GGTickOrder["OBJECTS_BINDING"] = 400] = "OBJECTS_BINDING";
+    GGTickOrder[GGTickOrder["ANIMATION_MIXERS"] = 600] = "ANIMATION_MIXERS";
+    GGTickOrder[GGTickOrder["CONTROLLERS"] = 800] = "CONTROLLERS";
+    GGTickOrder[GGTickOrder["RENDERING"] = 1000] = "RENDERING";
+    GGTickOrder[GGTickOrder["POST_RENDERING"] = 1200] = "POST_RENDERING";
+})(GGTickOrder = exports.GGTickOrder || (exports.GGTickOrder = {}));
 class GgEntity {
     constructor() {
+        /**
+         * will receive [elapsed time, delta] of each world clock tick
+         */
+        this.tick$ = new rxjs_1.Subject();
+        /**
+         * a world reference, where this entity was added to
+         */
         this._world = null;
         this._name = '';
+        /**
+         * The flag whether entity should listen to ticks. If set to false, ticks will not be propagated to this entity
+         * */
+        this._active = true;
         this._children = [];
+        this._onSpawned$ = new rxjs_1.Subject();
+        this._onRemoved$ = new rxjs_1.Subject();
     }
     get world() {
         return this._world;
@@ -16,6 +43,12 @@ class GgEntity {
     set name(value) {
         this._name = value;
     }
+    get active() {
+        return this._active;
+    }
+    set active(value) {
+        this._active = value;
+    }
     addChildren(...entities) {
         this._children.push(...entities);
         if (this._world) {
@@ -37,6 +70,7 @@ class GgEntity {
         for (const c of this._children) {
             world.addEntity(c);
         }
+        this._onSpawned$.next();
     }
     onRemoved() {
         const world = this._world;
@@ -44,9 +78,16 @@ class GgEntity {
         for (const c of this._children) {
             world.removeEntity(c);
         }
+        this._onRemoved$.next();
     }
     // TODO add some flag to entity that it is disposed, and throw a normal error when trying to add such entity to world again
     dispose() {
+        if (this.world) {
+            this.world.removeEntity(this);
+        }
+        this._onSpawned$.complete();
+        this._onRemoved$.complete();
+        this.tick$.complete();
         for (const c of this._children) {
             c.dispose();
         }

package/dist/base/entities/inline-controller.js

@@ -7,15 +7,9 @@ class InlineTickController extends gg_entity_1.GgEntity {
     constructor(tickOrder) {
         super();
         this.tickOrder = tickOrder;
-        this.tick$ = new rxjs_1.Subject();
-    }
-    dispose() {
-        super.dispose();
-        this.tick$.unsubscribe();
-        this.tick$.complete();
     }
 }
-function createInlineTickController(world, tickOrder = 750) {
+function createInlineTickController(world, tickOrder = gg_entity_1.GGTickOrder.CONTROLLERS) {
     const controller = new InlineTickController(tickOrder);
     world.addEntity(controller);
     return controller.tick$.pipe((0, rxjs_1.finalize)(() => {

package/dist/base/entities/interfaces/i-tick-listener.d.ts

@@ -1,7 +1,31 @@
 import { Subject } from 'rxjs';
 import { GgEntity } from '../gg-entity';
+/**
+ * Engine's default tick orders: the less value, the earlier tick will be run.
+ */
+export declare enum GGTickOrder {
+    INPUT_CONTROLLERS = 0,
+    PHYSICS_SIMULATION = 200,
+    OBJECTS_BINDING = 400,
+    ANIMATION_MIXERS = 600,
+    CONTROLLERS = 800,
+    RENDERING = 1000,
+    POST_RENDERING = 1200
+}
+/**
+ * An interface for world entities, which need to do some routine on each world clock tick
+ */
 export interface ITickListener {
+    /**
+     * will receive [elapsed time, delta] of each world clock tick
+     */
     tick$: Subject<[number, number]>;
-    readonly tickOrder: number;
+    /**
+     * the priority of ticker: the less value, the earlier tick will be run.
+     */
+    readonly tickOrder: GGTickOrder | number;
 }
+/**
+ * A function which determines whether entity implements ITickListener interface
+ */
 export declare const isITickListener: (entity: GgEntity) => boolean;

package/dist/base/entities/interfaces/i-tick-listener.js

@@ -1,6 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isITickListener = void 0;
+exports.isITickListener = exports.GGTickOrder = void 0;
 const rxjs_1 = require("rxjs");
+/**
+ * Engine's default tick orders: the less value, the earlier tick will be run.
+ */
+var GGTickOrder;
+(function (GGTickOrder) {
+    GGTickOrder[GGTickOrder["INPUT_CONTROLLERS"] = 0] = "INPUT_CONTROLLERS";
+    GGTickOrder[GGTickOrder["PHYSICS_SIMULATION"] = 200] = "PHYSICS_SIMULATION";
+    GGTickOrder[GGTickOrder["OBJECTS_BINDING"] = 400] = "OBJECTS_BINDING";
+    GGTickOrder[GGTickOrder["ANIMATION_MIXERS"] = 600] = "ANIMATION_MIXERS";
+    GGTickOrder[GGTickOrder["CONTROLLERS"] = 800] = "CONTROLLERS";
+    GGTickOrder[GGTickOrder["RENDERING"] = 1000] = "RENDERING";
+    GGTickOrder[GGTickOrder["POST_RENDERING"] = 1200] = "POST_RENDERING";
+})(GGTickOrder = exports.GGTickOrder || (exports.GGTickOrder = {}));
+/**
+ * A function which determines whether entity implements ITickListener interface
+ */
 const isITickListener = entity => (entity === null || entity === void 0 ? void 0 : entity.tick$) instanceof rxjs_1.Subject;
 exports.isITickListener = isITickListener;

package/dist/base/gg-viewport-manager.d.ts

@@ -1,5 +1,9 @@
 import { Subject } from 'rxjs';
 import { BaseGgRenderer } from './entities/base-gg-renderer';
+export declare type CanvasAppDescr = {
+    canvas: HTMLCanvasElement;
+    renderer?: BaseGgRenderer;
+};
 export declare class GgViewportManager {
     private static _instance;
     static get instance(): GgViewportManager;

package/dist/base/gg-world.d.ts

@@ -1,23 +1,28 @@
+import { PausableClock } from './clock/pausable-clock';
 import { GgEntity } from './entities/gg-entity';
-import { ITickListener } from './entities/interfaces/i-tick-listener';
 import { GgPhysicsWorld } from './interfaces/gg-physics-world';
 import { GgVisualScene } from './interfaces/gg-visual-scene';
-import { KeyboardController } from './controllers/keyboard.controller';
+import { KeyboardInput } from './inputs/keyboard.input';
+import { GgPositionableEntity } from './entities/gg-positionable-entity';
 export declare abstract class GgWorld<D, R, V extends GgVisualScene<D, R> = GgVisualScene<D, R>, P extends GgPhysicsWorld<D, R> = GgPhysicsWorld<D, R>> {
     readonly visualScene: V;
     readonly physicsWorld: P;
     protected readonly consoleEnabled: boolean;
-    private readonly animationFrameClock;
-    private readonly worldClock;
-    readonly keyboardController: KeyboardController;
+    readonly worldClock: PausableClock;
+    readonly keyboardInput: KeyboardInput;
     readonly children: GgEntity[];
-    protected readonly tickListeners: ITickListener[];
+    protected readonly tickListeners: GgEntity[];
     constructor(visualScene: V, physicsWorld: P, consoleEnabled?: boolean);
     init(): Promise<void>;
     start(): void;
     pauseWorld(): void;
     resumeWorld(): void;
+    get isRunning(): boolean;
+    get isPaused(): boolean;
+    get worldTime(): number;
+    createClock(autoStart: boolean): PausableClock;
     dispose(): void;
+    abstract addPrimitiveRigidBody(descr: any, position?: D, rotation?: R): GgPositionableEntity<D, R>;
     addEntity(entity: GgEntity): void;
     removeEntity(entity: GgEntity, dispose?: boolean): void;
     protected commands: {

package/dist/base/gg-world.js

@@ -10,32 +10,29 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GgWorld = void 0;
-const clock_1 = require("./clock");
-const i_tick_listener_1 = require("./entities/interfaces/i-tick-listener");
+const gg_entity_1 = require("./entities/gg-entity");
 const gg_static_1 = require("./gg-static");
-const keyboard_controller_1 = require("./controllers/keyboard.controller");
+const keyboard_input_1 = require("./inputs/keyboard.input");
 const rxjs_1 = require("rxjs");
 const gg_console_ui_1 = require("./ui/gg-console.ui");
 const gg_debugger_ui_1 = require("./ui/gg-debugger.ui");
+const global_clock_1 = require("./clock/global-clock");
 class GgWorld {
     constructor(visualScene, physicsWorld, consoleEnabled = false) {
         this.visualScene = visualScene;
         this.physicsWorld = physicsWorld;
         this.consoleEnabled = consoleEnabled;
-        // inner clock, runs constantly
-        this.animationFrameClock = clock_1.Clock.animationFrameClock;
-        // world clock, can be paused/resumed. Stops when disposing world
-        this.worldClock = new clock_1.Clock(this.animationFrameClock.tick$);
-        // TODO consider adding mouse controller
-        this.keyboardController = new keyboard_controller_1.KeyboardController();
+        this.worldClock = global_clock_1.GgGlobalClock.instance.createChildClock(false);
+        this.keyboardInput = new keyboard_input_1.KeyboardInput();
         this.children = [];
+        // the same as children, but sorted by tick order
         this.tickListeners = [];
         this.commands = {};
         gg_static_1.GgStatic.instance.worlds.push(this);
         gg_static_1.GgStatic.instance.selectedWorld = this;
-        this.keyboardController.start().then();
+        this.keyboardInput.start().then();
         if (consoleEnabled) {
-            this.keyboardController
+            this.keyboardInput
                 .bind('Backquote')
                 .pipe((0, rxjs_1.filter)(x => x))
                 .subscribe(() => {
@@ -82,16 +79,23 @@ class GgWorld {
         return __awaiter(this, void 0, void 0, function* () {
             yield Promise.all([this.physicsWorld.init(), this.visualScene.init()]);
             this.worldClock.tick$.subscribe(([elapsed, delta]) => {
-                let physicsTickPerformed = false;
-                for (let i = 0; i < this.tickListeners.length; i++) {
-                    if (!physicsTickPerformed && this.tickListeners[i].tickOrder >= 500) {
-                        this.physicsWorld.simulate(delta);
-                        physicsTickPerformed = true;
+                let i = 0;
+                // emit tick to all entities with tick order < GGTickOrder.PHYSICS_SIMULATION
+                for (i; i < this.tickListeners.length; i++) {
+                    if (this.tickListeners[i].tickOrder >= gg_entity_1.GGTickOrder.PHYSICS_SIMULATION) {
+                        break;
+                    }
+                    if (this.tickListeners[i].active) {
+                        this.tickListeners[i].tick$.next([elapsed, delta]);
                     }
-                    this.tickListeners[i].tick$.next([elapsed, delta]);
                 }
-                if (!physicsTickPerformed) {
-                    this.physicsWorld.simulate(delta);
+                // run phycics simulation
+                this.physicsWorld.simulate(delta);
+                // emit tick to all remained entities
+                for (i; i < this.tickListeners.length; i++) {
+                    if (this.tickListeners[i].active) {
+                        this.tickListeners[i].tick$.next([elapsed, delta]);
+                    }
                 }
             });
         });
@@ -103,11 +107,24 @@ class GgWorld {
         this.worldClock.pause();
     }
     resumeWorld() {
-        this.worldClock.pause();
+        this.worldClock.resume();
+    }
+    get isRunning() {
+        return this.worldClock.isRunning;
+    }
+    get isPaused() {
+        return this.worldClock.isPaused;
+    }
+    get worldTime() {
+        return this.worldClock.elapsedTime;
+    }
+    createClock(autoStart) {
+        return this.worldClock.createChildClock(autoStart);
     }
     dispose() {
         this.worldClock.stop();
         for (let i = 0; i < this.children.length; i++) {
+            this.children[i].onRemoved();
             this.children[i].dispose();
         }
         this.children.splice(0, this.children.length);
@@ -117,24 +134,26 @@ class GgWorld {
     }
     addEntity(entity) {
         if (!!entity.world) {
-            throw new Error('Entity already spawned');
+            console.warn('Trying to spawn entity, which is already spawned');
+            return;
         }
         this.children.push(entity);
-        if ((0, i_tick_listener_1.isITickListener)(entity)) {
-            this.tickListeners.push(entity);
-            this.tickListeners.sort((l1, l2) => l1.tickOrder - l2.tickOrder);
-        }
+        this.tickListeners.push(entity);
+        this.tickListeners.sort((l1, l2) => l1.tickOrder - l2.tickOrder);
         entity.onSpawned(this);
     }
     removeEntity(entity, dispose = true) {
-        if (entity.world !== this) {
-            throw new Error('Entity is not a part of this world');
-        }
-        this.children.splice(this.children.findIndex(x => x === entity), 1);
-        if ((0, i_tick_listener_1.isITickListener)(entity)) {
+        if (entity.world) {
+            if (entity.world !== this) {
+                throw new Error('Entity is not a part of this world');
+            }
+            this.children.splice(this.children.findIndex(x => x === entity), 1);
             this.tickListeners.splice(this.tickListeners.findIndex(x => x === entity), 1);
+            entity.onRemoved();
+        }
+        else {
+            console.warn('Trying to remove entity, which is not spawned');
         }
-        entity.onRemoved();
         if (dispose) {
             entity.dispose();
         }

package/dist/base/inputs/direction.keyboard-input.d.ts

@@ -0,0 +1,41 @@
+import { Observable } from 'rxjs';
+import { KeyboardInput } from './keyboard.input';
+import { Input } from './input';
+/**
+ * The type representing desired keymap for DirectionKeyboardInput
+ */
+export declare type DirectionKeyboardKeymap = 'arrows' | 'wasd' | 'wasd+arrows';
+/**
+ * The type of DirectionKeyboardInput output value
+ */
+export declare type DirectionKeyboardOutput = {
+    upDown?: boolean;
+    leftRight?: boolean;
+};
+/**
+ * An input class, responsible for handling direction keys and providing simple current direction observable.
+ * Supports two the most popular keyboard layouts: WASD and arrows.
+ */
+export declare class DirectionKeyboardInput extends Input {
+    protected readonly keyboard: KeyboardInput;
+    protected readonly keymap: DirectionKeyboardKeymap;
+    /**
+     * A subject that emits `DirectionKeyboardOutput` objects whenever the input changes.
+     */
+    private _output$;
+    /**
+     * Returns an observable that emits `DirectionKeyboardOutput` objects whenever the input changes.
+     */
+    get output$(): Observable<DirectionKeyboardOutput>;
+    /**
+     * Creates a new instance of the `DirectionKeyboardInput` class.
+     *
+     * @param keyboard The `KeyboardInput` instance to use for input handling. You should probably use one from the World instance
+     * @param keymap The `DirectionKeyboardKeymap` defining which keys to listen for.
+     */
+    constructor(keyboard: KeyboardInput, keymap: DirectionKeyboardKeymap);
+    /**
+     * Called when the input handling should start.
+     */
+    protected startInternal(): Promise<void>;
+}

package/dist/base/inputs/direction.keyboard-input.js

@@ -0,0 +1,85 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DirectionKeyboardInput = void 0;
+const rxjs_1 = require("rxjs");
+const operators_1 = require("rxjs/operators");
+const input_1 = require("./input");
+/**
+ * An input class, responsible for handling direction keys and providing simple current direction observable.
+ * Supports two the most popular keyboard layouts: WASD and arrows.
+ */
+class DirectionKeyboardInput extends input_1.Input {
+    /**
+     * Creates a new instance of the `DirectionKeyboardInput` class.
+     *
+     * @param keyboard The `KeyboardInput` instance to use for input handling. You should probably use one from the World instance
+     * @param keymap The `DirectionKeyboardKeymap` defining which keys to listen for.
+     */
+    constructor(keyboard, keymap) {
+        super();
+        this.keyboard = keyboard;
+        this.keymap = keymap;
+        /**
+         * A subject that emits `DirectionKeyboardOutput` objects whenever the input changes.
+         */
+        this._output$ = new rxjs_1.Subject();
+    }
+    /**
+     * Returns an observable that emits `DirectionKeyboardOutput` objects whenever the input changes.
+     */
+    get output$() {
+        return this._output$.asObservable();
+    }
+    /**
+     * Called when the input handling should start.
+     */
+    startInternal() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Initialize an array to hold the keys to listen for
+            const keys = [[], [], [], []];
+            // Add the "wasd" keys to the array if specified in the keymap
+            if (this.keymap.includes('wasd')) {
+                keys[0].push('KeyW');
+                keys[1].push('KeyA');
+                keys[2].push('KeyS');
+                keys[3].push('KeyD');
+            }
+            // Add the arrow keys to the array if specified in the keymap
+            if (this.keymap.includes('arrows')) {
+                keys[0].push('ArrowUp');
+                keys[1].push('ArrowLeft');
+                keys[2].push('ArrowDown');
+                keys[3].push('ArrowRight');
+            }
+            // Bind to the keyboard events for the specified keys
+            (0, rxjs_1.combineLatest)(keys.map(x => this.keyboard.bindMany(...x)))
+                .pipe(
+            // Stop listening when the `stop$` signal is received
+            (0, rxjs_1.takeUntil)(this.stop$), 
+            // Map the key states to a `DirectionKeyboardOutput` object
+            (0, operators_1.map)(moveDirection => {
+                const result = {};
+                if (moveDirection.includes(true)) {
+                    const [f, l, b, r] = moveDirection;
+                    if (f != b)
+                        result.upDown = f;
+                    if (l != r)
+                        result.leftRight = l;
+                }
+                return result;
+            }))
+                // Emit the resulting `DirectionKeyboardOutput` object through the `_output$` subject
+                .subscribe(this._output$);
+        });
+    }
+}
+exports.DirectionKeyboardInput = DirectionKeyboardInput;