@woosh/meep-engine 2.59.0 → 2.59.2

package/build/meep.cjs

@@ -61968,34 +61968,38 @@ function arrayIndexByEquality(array, element, equals) {
 }
 
 /**
+ * Compute a diff between two arrays, result is a 3 way split between common items, unique items in `a` array and unique items in `b` array
  * @template T
  * @param {T[]} a
  * @param {T[]} b
- * @param {function(a:T,b:T):boolean} [equals]
+ * @param {function(a:T,b:T):boolean} [equals] method to determine equality between two elements
  * @returns {{uniqueA:T[], uniqueB:T[], common:T[]}}
  */
 function arraySetDiff(a, b, equals = strictEquals) {
+    // TODO we can do this faster if we use a comparator instead of equality and pre-sort the data
     const uniqueA = a.slice();
     const uniqueB = b.slice();
 
     const common = [];
 
-    let lA = uniqueA.length;
+    let a_length = uniqueA.length;
 
-    let i;
-    for (i = 0; i < lA; i++) {
+    for (let i = 0; i < a_length; i++) {
         const elA = uniqueA[i];
 
         const j = arrayIndexByEquality(uniqueB, elA, equals);
 
         if (j !== -1) {
+            // common element found
+
             common.push(elA);
 
+            // remove from respective unique sets
             uniqueA.splice(i, 1);
             uniqueB.splice(j, 1);
 
             i--;
-            lA--;
+            a_length--;
         }
     }
 
@@ -68730,6 +68734,7 @@ const scratch_ray_0$1 = new Float32Array(6);
 
 /**
  * Represents a primitive 3d object, a combination of a material and geometry
+ * This is roughly equivalent to single draw call, note that his is not a hierarchical data structure, if you want that - you will need to combine multiple entities, each with a `ShadedGeometry` component
  */
 class ShadedGeometry {
     constructor() {
@@ -69070,32 +69075,72 @@ const DEFAULT_FLAGS$4 = SGMeshFlags.CastShadow
 ;
 
 class SGMesh {
-    constructor() {
-        /**
-         *
-         * @type {string|null}
-         */
-        this.__url = null;
+    /**
+     * Allows settings a new material to all parts of the mesh
+     * @type {Material|null}
+     */
+    #material_override = null;
 
-        /**
-         *
-         * @type {EntityNode|null}
-         * @private
-         */
-        this.__node = null;
+    /**
+     *
+     * @type {number}
+     */
+    flags = DEFAULT_FLAGS$4;
 
-        /**
-         *
-         * @type {AABB3}
-         * @private
-         */
-        this.__initial_bounds = new AABB3();
+    /**
+     *
+     * @type {string|null}
+     */
+    __url = null;
 
-        /**
-         *
-         * @type {number}
-         */
-        this.flags = DEFAULT_FLAGS$4;
+    /**
+     *
+     * @type {EntityNode|null}
+     * @private
+     */
+    __node = null;
+
+    /**
+     *
+     * @type {AABB3}
+     * @private
+     */
+    __initial_bounds = new AABB3();
+
+    /**
+     *
+     * @param {Material} v
+     */
+    set materialOverride(v) {
+        if (v === this.#material_override) {
+            return;
+        }
+
+        if (v === null) {
+            throw new Error(`Once material override is set it can not be cleared, create a new SGMesh instance if you would like to clear override`);
+        }
+
+        this.#material_override = v;
+
+        this.applyMaterialOverride();
+    }
+
+    get materialOverride() {
+        return this.#material_override;
+    }
+
+    applyMaterialOverride() {
+        if (this.__node === null) {
+            return;
+        }
+
+        this.__node.traverse(node => {
+            const sg = node.entity.getComponent(ShadedGeometry);
+
+            if (sg !== null) {
+                sg.material = this.#material_override;
+            }
+        });
     }
 
     /**
@@ -71977,35 +72022,6 @@ class TerrainSystem extends System {
     }
 }
 
-/**
- *
- * @param {string} url
- * @return {String|null}
- */
-function assetTypeByPath(url) {
-    //get extension
-    const dotPosition = url.lastIndexOf(".");
-    if (dotPosition === -1) {
-        console.warn(`No model extension could be deduced for URL: '${url}'`);
-        //no extension
-        return null;
-    } else {
-        //retrieve extension
-        const ext = url.substring(dotPosition + 1);
-        switch (ext) {
-            case "json":
-                return "three.js";
-            case "glb":
-                return "model/gltf";
-            case "gltf":
-                return "model/gltf+json";
-            default:
-                console.warn(`Unknown 3d mesh format extension: '${ext}'`);
-                return null;
-        }
-    }
-}
-
 /**
  *  Component representing logical attachment to another entity, when parent disappears - so does the child
  */
@@ -74618,13 +74634,13 @@ const EntityFlags = {
      */
     Built: 1,
     /**
-     * If component type is not registered on the {@link EntityComponentDataset} when calling {@link EntityBuilder#build} - will register the component first
+     * If component type is not registered on the {@link EntityComponentDataset} when calling {@link Entity#build} - will register the component first
      */
     RegisterComponents: 2,
     /**
-     * Entity builder will watch destruction of the entity (subscribe to event), this will make the {@link EntityBuilder} automatically
-     * recognize when the corresponding entity is destroyed outside the EntityBuilder API
-     * NOTE: useful to turn off to save a bit of memory, as those event listeners take up a bit of space. Feel free to turn this flag off when you don't care to keep the reference to the EntityBuilder
+     * Entity builder will watch destruction of the entity (subscribe to event), this will make the {@link Entity} automatically
+     * recognize when the corresponding entity is destroyed outside the {@link Entity} API
+     * NOTE: useful to turn off to save a bit of memory, as those event listeners take up a bit of space. Feel free to turn this flag off when you don't care to keep the reference to the {@link Entity}
      */
     WatchDestruction: 4
 };
@@ -74645,9 +74661,10 @@ const DEFAULT_FLAGS$3 =
 class Entity {
 
     /**
+     * When entity is live - this is the entity ID inside associated `EntityComponentDataset`, when the entity is not live - it's set to -1
      * @type {number}
      */
-    entity = void 0;
+    id = -1;
 
     /**
      * Generation is a unique identifier coming from the dataset
@@ -74657,16 +74674,17 @@ class Entity {
     generation = -1;
 
     /**
-     *
+     * Components associated with the entity
+     * @readonly
      * @type {Array}
      */
-    element = [];
+    components = [];
 
     /**
      *
      * @type {{name:string,listener:(function|Function), context:*}[]}
      */
-    deferredListeners = [];
+    #deferredListeners = [];
 
     /**
      *
@@ -74681,7 +74699,7 @@ class Entity {
     flags = DEFAULT_FLAGS$3;
 
     /**
-     *
+     * Arbitrary metadata, add anything you want here
      * @type {Object}
      */
     properties = {};
@@ -74697,7 +74715,7 @@ class Entity {
      * Handles event when entity is removed without invoking {@link #destroy} method
      * @private
      */
-    __handleEntityDestroyed() {
+    #handleEntityDestroyed() {
         this.clearFlag(EntityFlags.Built);
     }
 
@@ -74740,7 +74758,7 @@ class Entity {
      * Remove all components from the entity
      */
     removeAllComponents() {
-        const elements = this.element;
+        const elements = this.components;
         const n = elements.length;
         for (let i = n - 1; i >= 0; i--) {
             const component = elements[i];
@@ -74754,7 +74772,7 @@ class Entity {
      * @return {number}
      */
     get count() {
-        return this.element.length;
+        return this.components.length;
     }
 
     /**
@@ -74764,16 +74782,16 @@ class Entity {
      */
     add(componentInstance) {
         if (componentInstance === undefined) {
-            throw new Error(`Can not add ${componentInstance} to EntityBuilder`);
+            throw new Error(`Can not add ${componentInstance} to Entity`);
         }
 
         assert.notOk(this.hasComponent(Object.getPrototypeOf(componentInstance).constructor), 'Component of this type already exists');
 
-        this.element.push(componentInstance);
+        this.components.push(componentInstance);
 
         if (this.getFlag(EntityFlags.Built)) {
             //already built, add component to entity
-            this.dataset.addComponentToEntity(this.entity, componentInstance);
+            this.dataset.addComponentToEntity(this.id, componentInstance);
         }
 
         return this;
@@ -74794,7 +74812,7 @@ class Entity {
      * @returns {T|null} component of specified class
      */
     getComponent(klass) {
-        const elements = this.element;
+        const elements = this.components;
         const element_count = elements.length;
 
         for (let i = 0; i < element_count; i++) {
@@ -74828,7 +74846,7 @@ class Entity {
      * @returns {*|null}
      */
     removeComponent(klass) {
-        const elements = this.element;
+        const elements = this.components;
         const n = elements.length;
 
         for (let i = 0; i < n; i++) {
@@ -74840,7 +74858,7 @@ class Entity {
                 //see if entity is built
                 if (this.getFlag(EntityFlags.Built)) {
 
-                    this.dataset.removeComponentFromEntity(this.entity, klass);
+                    this.dataset.removeComponentFromEntity(this.id, klass);
 
                 }
 
@@ -74858,7 +74876,7 @@ class Entity {
      */
     sendEvent(eventName, event) {
         if (this.getFlag(EntityFlags.Built)) {
-            this.dataset.sendEvent(this.entity, eventName, event);
+            this.dataset.sendEvent(this.id, eventName, event);
         } else {
             console.warn("Entity doesn't exist. Event " + eventName + ":" + event + " was not sent.");
         }
@@ -74894,9 +74912,9 @@ class Entity {
      */
     addEventListener(eventName, listener, context) {
         if (this.getFlag(EntityFlags.Built)) {
-            this.dataset.addEntityEventListener(this.entity, eventName, listener, context);
+            this.dataset.addEntityEventListener(this.id, eventName, listener, context);
         } else {
-            this.deferredListeners.push({
+            this.#deferredListeners.push({
                 name: eventName,
                 listener: listener,
                 context
@@ -74914,9 +74932,9 @@ class Entity {
      */
     removeEventListener(eventName, listener, context) {
         if (this.getFlag(EntityFlags.Built)) {
-            this.dataset.removeEntityEventListener(this.entity, eventName, listener, context);
+            this.dataset.removeEntityEventListener(this.id, eventName, listener, context);
         } else {
-            const listeners = this.deferredListeners;
+            const listeners = this.#deferredListeners;
 
             for (let i = 0, numListeners = listeners.length; i < numListeners; i++) {
                 const deferredDescriptor = listeners[i];
@@ -74945,16 +74963,16 @@ class Entity {
         if (this.getFlag(EntityFlags.Built)) {
 
             const dataset = this.dataset;
-            const entity = this.entity;
+            const entity = this.id;
 
             //check that the entity is the same as what we have built
-            //assert.ok(checkExistingComponents(entity, this.element, dataset), `Signature of EntityBuilder does not match existing entity(id=${entity})`);
+            //assert.ok(checkExistingComponents(entity, this.element, dataset), `Signature of Entity does not match existing entity(id=${entity})`);
 
-            dataset.removeEntityEventListener(entity, EventType.EntityRemoved, this.__handleEntityDestroyed, this);
+            dataset.removeEntityEventListener(entity, EventType.EntityRemoved, this.#handleEntityDestroyed, this);
 
             dataset.removeEntity(entity);
 
-            this.entity = void 0;
+            this.id = -1;
 
             this.clearFlag(EntityFlags.Built);
 
@@ -74975,18 +74993,18 @@ class Entity {
 
         if (
             this.getFlag(EntityFlags.Built)
-            && checkExistingComponents(this.entity, this.element, dataset)
+            && checkExistingComponents(this.id, this.components, dataset)
         ) {
             //already built
-            return this.entity;
+            return this.id;
         }
 
-        const entity = this.entity = dataset.createEntity();
+        const entity = this.id = dataset.createEntity();
         this.dataset = dataset;
 
         let i;
 
-        const listeners = this.deferredListeners;
+        const listeners = this.#deferredListeners;
         const listeners_count = listeners.length;
 
         for (i = 0; i < listeners_count; i++) {
@@ -74994,9 +75012,9 @@ class Entity {
             dataset.addEntityEventListener(entity, subscription.name, subscription.listener, subscription.context);
         }
         // reset listeners
-        this.deferredListeners.splice(0, listeners_count);
+        this.#deferredListeners.splice(0, listeners_count);
 
-        const element = this.element;
+        const element = this.components;
         const element_count = element.length;
 
         if (this.getFlag(EntityFlags.RegisterComponents)) {
@@ -75016,7 +75034,7 @@ class Entity {
         this.setFlag(EntityFlags.Built);
 
         if (this.getFlag(EntityFlags.WatchDestruction)) {
-            dataset.addEntityEventListener(entity, EventType.EntityRemoved, this.__handleEntityDestroyed, this);
+            dataset.addEntityEventListener(entity, EventType.EntityRemoved, this.#handleEntityDestroyed, this);
         }
 
         this.on.built.send2(entity, dataset);
@@ -75024,7 +75042,7 @@ class Entity {
     }
 
     /**
-     *
+     * Extract data about an entity and its components from a dataset
      * @param {number} entity
      * @param {EntityComponentDataset} dataset
      * @returns {Entity}
@@ -75037,7 +75055,7 @@ class Entity {
             .forEach(r.add, r);
 
         r.setFlag(EntityFlags.Built);
-        r.entity = entity;
+        r.id = entity;
         r.dataset = dataset;
 
         return r;
@@ -75045,10 +75063,11 @@ class Entity {
 }
 
 /**
+ * Useful for faster alternative to `instanceof` checks
  * @readonly
  * @type {boolean}
  */
-Entity.prototype.isEntityBuilder = true;
+Entity.prototype.isEntity = true;
 
 
 /**
@@ -75446,7 +75465,7 @@ class EntityNode {
                 throw new Error('Parent entity is not built');
             }
 
-            const parent_entity_id = parent_entity_builder.entity;
+            const parent_entity_id = parent_entity_builder.id;
             parent_entity.entity = parent_entity_id;
 
             // add component back
@@ -75571,7 +75590,7 @@ class EntityNode {
                 throw new Error('Parent entity is not built');
             }
 
-            const parent_entity_id = parent_entity_builder.entity;
+            const parent_entity_id = parent_entity_builder.id;
             parent_entity.entity = parent_entity_id;
 
             assert.ok(parent.entity.hasComponent(Transform), "parent node must have a transform but doesn't. Transform is required for attachment transform hierarchy to work correctly");
@@ -75639,80 +75658,6 @@ class EntityNode {
  */
 EntityNode.prototype.isEntityNode = true;
 
-/**
- *
- * @param {Transform} transform
- * @param {THREE.Object3D} three_object
- */
-function copy_three_transform(transform, three_object) {
-
-    // copy object transform
-    transform.position.copy(three_object.position);
-    transform.scale.copy(three_object.scale);
-    transform.rotation.copy(three_object.quaternion);
-
-    //
-    transform.matrix.set(three_object.matrix.elements);
-}
-
-/**
- *
- * @param {THREE.Object3D} root
- * @returns {EntityNode}
- */
-function three_object_to_entity_composition(root) {
-    const node = new EntityNode();
-
-    const node_transform = node.transform;
-
-    // copy object transform
-    copy_three_transform(node_transform, root);
-
-    const entity = node.entity;
-
-    const transform = new Transform();
-    // initialize world transform
-    transform.fromMatrix4(root.matrixWorld.elements);
-
-    entity.add(transform);
-
-    if (root.isMesh) {
-        if (root.isSkinnedMesh) {
-            console.error(`Skinned meshes are not supported`);
-        }
-
-        const sg = ShadedGeometry.from(root.geometry, root.material);
-
-        entity.add(sg);
-    }
-
-    const children = root.children;
-    const child_count = children.length;
-
-    for (let i = 0; i < child_count; i++) {
-        const child = children[i];
-
-        const child_node = three_object_to_entity_composition(child);
-
-        node.addChild(child_node);
-    }
-
-    return node;
-}
-
-const SGMeshEvents = {
-
-    /**
-     * When asset is attached/loaded onto the Mesh component.
-     * This is the time when the 3d data becomes renderable
-     */
-    AssetLoaded: '@ecd-component-SGMesh/asset-attached',
-    /**
-     * Required asset failed to load for whatever reason
-     */
-    AssetLoadFailed: '@ecd-component-SGMesh/asset-failed',
-};
-
 /**
  * @readonly
  * @type {number}
@@ -75935,6 +75880,109 @@ class TransformAttachmentSystem extends System {
     }
 }
 
+/**
+ *
+ * @param {string} url
+ * @return {String|null}
+ */
+function assetTypeByPath(url) {
+    //get extension
+    const dotPosition = url.lastIndexOf(".");
+    if (dotPosition === -1) {
+        console.warn(`No model extension could be deduced for URL: '${url}'`);
+        //no extension
+        return null;
+    } else {
+        //retrieve extension
+        const ext = url.substring(dotPosition + 1);
+        switch (ext) {
+            case "json":
+                return "three.js";
+            case "glb":
+                return "model/gltf";
+            case "gltf":
+                return "model/gltf+json";
+            default:
+                console.warn(`Unknown 3d mesh format extension: '${ext}'`);
+                return null;
+        }
+    }
+}
+
+/**
+ *
+ * @param {Transform} transform
+ * @param {THREE.Object3D} three_object
+ */
+function copy_three_transform(transform, three_object) {
+
+    // copy object transform
+    transform.position.copy(three_object.position);
+    transform.scale.copy(three_object.scale);
+    transform.rotation.copy(three_object.quaternion);
+
+    //
+    transform.matrix.set(three_object.matrix.elements);
+}
+
+/**
+ *
+ * @param {THREE.Object3D} root
+ * @returns {EntityNode}
+ */
+function three_object_to_entity_composition(root) {
+    const node = new EntityNode();
+
+    const node_transform = node.transform;
+
+    // copy object transform
+    copy_three_transform(node_transform, root);
+
+    const entity = node.entity;
+
+    const transform = new Transform();
+    // initialize world transform
+    transform.fromMatrix4(root.matrixWorld.elements);
+
+    entity.add(transform);
+
+    if (root.isMesh) {
+        if (root.isSkinnedMesh) {
+            console.error(`Skinned meshes are not supported`);
+        }
+
+        const sg = ShadedGeometry.from(root.geometry, root.material);
+
+        entity.add(sg);
+    }
+
+    const children = root.children;
+    const child_count = children.length;
+
+    for (let i = 0; i < child_count; i++) {
+        const child = children[i];
+
+        const child_node = three_object_to_entity_composition(child);
+
+        node.addChild(child_node);
+    }
+
+    return node;
+}
+
+const SGMeshEvents = {
+
+    /**
+     * When asset is attached/loaded onto the Mesh component.
+     * This is the time when the 3d data becomes renderable
+     */
+    AssetLoaded: '@ecd-component-SGMesh/asset-attached',
+    /**
+     * Required asset failed to load for whatever reason
+     */
+    AssetLoadFailed: '@ecd-component-SGMesh/asset-failed',
+};
+
 /**
  * @readonly
  * @type {number}
@@ -76099,6 +76147,8 @@ class SGMeshSystem extends System {
 
         });
 
+        const material_override = mesh.materialOverride;
+
         // apply flags to the hierarchy
         entity_node.traverse(node => {
             /**
@@ -76112,6 +76162,10 @@ class SGMeshSystem extends System {
 
             sg.writeFlag(ShadedGeometryFlags.CastShadow, mesh.castShadow);
             sg.writeFlag(ShadedGeometryFlags.ReceiveShadow, mesh.receiveShadow);
+
+            if (material_override !== null) {
+                sg.material = material_override;
+            }
         });
 
 
@@ -78436,11 +78490,17 @@ function build_three_object(sg) {
     return object;
 }
 
+class CacheValue {
+    object = null
+    key = null
+}
+
+
 class SGThreeObjectCache {
     constructor() {
         /**
          *
-         * @type {WeakMap<ShadedGeometry, THREE.Object3D>}
+         * @type {Map<ShadedGeometry, CacheValue>}
          * @private
          */
         this.__object_cache = new WeakMap();
@@ -78453,15 +78513,28 @@ class SGThreeObjectCache {
      */
     get(sg) {
 
-        const existing_object = this.__object_cache.get(sg);
+        const existing_value = this.__object_cache.get(sg);
 
-        if (existing_object !== undefined) {
-            return existing_object;
+        if (existing_value !== undefined) {
+            const object = existing_value.object;
+
+            // validate that the object is still the same
+            if (existing_value.key.equals(sg)) {
+                return object;
+            }
         }
 
-        const new_object = build_three_object(sg);
+        // replace scratch key as it's being used inside the cache now
+        const key = sg.clone();
 
-        this.__object_cache.set(sg, new_object);
+        const new_object = build_three_object(key);
+
+        const cacheValue = new CacheValue();
+
+        cacheValue.key = key;
+        cacheValue.object = new_object;
+
+        this.__object_cache.set(sg, cacheValue);
 
         return new_object;
     }
@@ -92564,7 +92637,7 @@ Preloader.prototype.load = function (assetManager) {
 
 /**
  *
- * @param {*} entityIndex
+ * @param {number} entityIndex
  * @returns {boolean}
  */
 function validateEntityIndex(entityIndex) {
@@ -92573,7 +92646,7 @@ function validateEntityIndex(entityIndex) {
 
 /**
  *
- * @param {*} componentIndex
+ * @param {number} componentIndex
  * @returns {boolean}
  */
 function validateComponentIndex(componentIndex) {
@@ -92582,7 +92655,7 @@ function validateComponentIndex(componentIndex) {
 
 /**
  *
- * @param index
+ * @param {number} index
  * @param {string} name
  * @returns {boolean}
  */
@@ -92656,99 +92729,101 @@ function buildObserverCallbackArgs(entityIndex, mask, componentIndexMap, compone
 const scratch_array_0 = [];
 const scratch_array_1 = [];
 
+/**
+ * Represents a storage for entities and their associated components
+ * Entities are just integer IDs and components are stored in a virtual table, where each component type has a separate column and each entity is a row in that table
+ * It is valid for entities to have no components or to have every possible component
+ * Generally the entity IDs are compacted, meaning that when an entity is removed - it's ID will be later reused
+ */
 class EntityComponentDataset {
+
     /**
-     * @class
-     * @constructor
+     * @private
+     * @type {BitSet}
      */
-    constructor() {
-        /**
-         * @private
-         * @type {BitSet}
-         */
-        this.entityOccupancy = new BitSet();
-        /**
-         * @private
-         * @type {BitSet}
-         */
-        this.componentOccupancy = new BitSet();
+    entityOccupancy = new BitSet();
+    /**
+     * @private
+     * @type {BitSet}
+     */
+    componentOccupancy = new BitSet();
 
-        /**
-         * @private
-         * @type {Class[]}
-         */
-        this.componentTypeMap = [];
+    /**
+     * @private
+     * @type {Class[]}
+     */
+    componentTypeMap = [];
 
-        /**
-         * Fast index lookup from a component class
-         * @type {Map<Class, number>}
-         * @private
-         */
-        this.__type_to_index_map = new Map();
+    /**
+     * Fast index lookup from a component class
+     * @type {Map<Class, number>}
+     * @private
+     */
+    __type_to_index_map = new Map();
 
-        /**
-         * How many component types exist for this collection. This is the same as componentMap.length
-         * @private
-         * @type {number}
-         */
-        this.componentTypeCount = 0;
+    /**
+     * How many component types exist for this collection. This is the same as componentMap.length
+     * @private
+     * @type {number}
+     */
+    componentTypeCount = 0;
 
-        /**
-         * @private
-         * @type {Object[][]}
-         */
-        this.components = [];
+    /**
+     * @private
+     * @type {Object[][]}
+     */
+    components = [];
 
-        /**
-         * Current number of entities
-         * @private
-         * @type {number}
-         */
-        this.entityCount = 0;
+    /**
+     * Current number of entities
+     * @private
+     * @type {number}
+     */
+    entityCount = 0;
 
-        /**
-         * A counter that is incremented every time an entity is created
-         * Generation is used to provide an entity with a unique identity
-         * Entity IDs are re-used, but generation is always increasing
-         * Two entities with the same ID but different generation represent two distinct entities, one with "younger" generation (larger number) is the more recently created one
-         * @private
-         * @type {number}
-         */
-        this.generation = 0;
+    /**
+     * A counter that is incremented every time an entity is created
+     * Generation is used to provide an entity with a unique identity
+     * Entity IDs are re-used, but generation is always increasing
+     * Two entities with the same ID but different generation represent two distinct entities, one with "younger" generation (larger number) is the more recently created one
+     * @private
+     * @type {number}
+     */
+    generation = 0;
 
-        /**
-         * @readonly
-         * @type {Signal}
-         */
-        this.onEntityCreated = new Signal();
+    /**
+     * @readonly
+     * @type {Signal}
+     */
+    onEntityCreated = new Signal();
 
-        /**
-         * @readonly
-         * @type {Signal}
-         */
-        this.onEntityRemoved = new Signal();
+    /**
+     * @readonly
+     * @type {Signal}
+     */
+    onEntityRemoved = new Signal();
 
 
-        /**
-         *
-         * @type {Array<Object<SignalHandler[]>>}
-         * @private
-         */
-        this.__entityEventListeners = [];
+    /**
+     *
+     * @type {Array<Object<SignalHandler[]>>}
+     * @private
+     */
+    __entityEventListeners = [];
 
-        /**
-         *
-         * @type {SignalHandler[][]}
-         * @private
-         */
-        this.__entityAnyEventListeners = [];
+    /**
+     *
+     * @type {SignalHandler[][]}
+     * @private
+     */
+    __entityAnyEventListeners = [];
+
+    /**
+     * @private
+     * @type {Array<Array<EntityObserver>>}
+     */
+    observers = [];
 
-        /**
-         * @private
-         * @type {Array<Array<EntityObserver>>}
-         */
-        this.observers = [];
-    }
 
     /**
      * returns a promise of a component instance based on a given type
@@ -93438,7 +93513,7 @@ class EntityComponentDataset {
         const componentClass = this.componentTypeMap[componentIndex];
 
         //dispatch event to components
-        this.sendEvent(entityIndex, EventType.ComponentRemoved, { klass: componentClass, instance: componentInstance });
+        this.sendEvent(entityIndex, EventType.ComponentRemoved, {klass: componentClass, instance: componentInstance});
     }
 
     /**
@@ -93550,7 +93625,7 @@ class EntityComponentDataset {
         const componentClass = this.componentTypeMap[componentIndex];
 
         //dispatch event to components
-        this.sendEvent(entityIndex, EventType.ComponentAdded, { klass: componentClass, instance: componentInstance });
+        this.sendEvent(entityIndex, EventType.ComponentAdded, {klass: componentClass, instance: componentInstance});
     }
 
     /**
@@ -100360,28 +100435,21 @@ function parseTooltipString(text) {
 
 class TooltipParser {
 
-    constructor() {
-
-        /**
-         *
-         * @type {Cache<String,Token[]>}
-         * @private
-         */
-        this.__cache = new Cache({
-            maxWeight: 1048576,
-            keyWeigher: string_compute_byte_size,
-            valueWeigher(tokens) {
-                return tokens.length * 256;
-            },
-            keyHashFunction: computeStringHash,
-            keyEqualityFunction: strictEquals
-        });
-
-    }
 
-    resetCache() {
-        this.__cache.clear();
-    }
+    /**
+     *
+     * @type {Cache<String,Token[]>}
+     * @private
+     */
+    #cache = new Cache({
+        maxWeight: 1048576,
+        keyWeigher: string_compute_byte_size,
+        valueWeigher(tokens) {
+            return tokens.length * 256;
+        },
+        keyHashFunction: computeStringHash,
+        keyEqualityFunction: strictEquals
+    });
 
     /**
      *
@@ -100390,7 +100458,7 @@ class TooltipParser {
      */
     parse(code) {
 
-        const existing = this.__cache.get(code);
+        const existing = this.#cache.get(code);
 
         if (existing !== null) {
             // result is cached, reuse
@@ -100401,7 +100469,7 @@ class TooltipParser {
         const tokens = parseTooltipString(code);
 
         // cache result
-        this.__cache.put(code, tokens);
+        this.#cache.put(code, tokens);
 
         return tokens;
     }
@@ -103151,7 +103219,7 @@ class NotificationManager {
             //find existing entry
             for (const [view, builder] of views) {
 
-                if (builder.entity === entity) {
+                if (builder.id === entity) {
                     //clear from the map
                     views.delete(view);
                     break;
@@ -103900,68 +103968,47 @@ class SceneGUIContext {
  */
 
 
-function GUIEngine() {
-    this.windows = new List();
-
-    /**
-     * When set to 'true' - indicated that GUI engine should be the only one receiving the inputs, this is useful for Modal dialogs and other overlays
-     * @readonly
-     * @type {ObservedBoolean}
-     */
-    this.captureInputs = new ObservedBoolean(false);
+class GUIEngine {
+    windows = new List();
 
     /**
      *
      * @type {EntityManager|null}
      */
-    this.entityManager = null;
+    entityManager = null;
 
     /**
      *
      * @type {Engine}
      */
-    this.engine = null;
+    engine = null;
 
     /**
      *
      * @type {WeakMap<Scene, SceneGUIContext>}
      */
-    this.sceneContexts = new WeakMap();
+    sceneContexts = new WeakMap();
 
     /**
      *
      * @type {TooltipManager}
      */
-    this.tooltips = new TooltipManager();
+    tooltips = new TooltipManager();
 
     /**
      *
      * @type {DomTooltipManager}
      */
-    this.viewTooltips = new DomTooltipManager(this.tooltips);
+    viewTooltips = new DomTooltipManager(this.tooltips);
 
 
     /**
      *
      * @type {Ticker}
      */
-    this.ticker = new Ticker();
-    this.ticker.subscribe(d => {
-
-
-        let ctx = null;
-        try {
-            ctx = this.getActiveSceneContext();
-        } catch (e) {
-            //skip
-        }
-
-        if (ctx !== null) {
-            ctx.tick(d);
-        }
-    });
+    ticker = new Ticker();
 
-    this.view = new EmptyView({
+    view = new EmptyView({
         classList: ['gui-engine-root'],
         css: {
             position: "absolute",
@@ -103974,459 +104021,478 @@ function GUIEngine() {
      *
      * @type {GMLEngine}
      */
-    this.gml = new GMLEngine();
+    gml = new GMLEngine();
 
     /**
      *
      * @type {ObservedString}
      */
-    this.cursor = new ObservedString(CursorType.Normal);
+    cursor = new ObservedString(CursorType.Normal);
 
 
     /**
      *
      * @type {Localization|null}
      */
-    this.localization = null;
-}
+    localization = null;
 
-/**
- * @param {boolean} closeable
- * @param {View} content
- * @param {string} title
- * @param {View} [wrapper]
- * @returns {Entity}
- */
-GUIEngine.prototype.openWindow = function ({ closeable, content, title, wrapper }) {
-    const entityBuilder = new Entity();
+    constructor() {
+
+        this.ticker.subscribe(d => {
+
+
+            let ctx = null;
+            try {
+                ctx = this.getActiveSceneContext();
+            } catch (e) {
+                //skip
+            }
+
+            if (ctx !== null) {
+                ctx.tick(d);
+            }
+        });
 
-    function closeAction() {
-        entityBuilder.destroy();
     }
 
-    const windowView = new SimpleWindowView(content, {
-        closeAction,
-        title,
-        closeable
-    });
+    /**
+     * @param {boolean} closeable
+     * @param {View} content
+     * @param {string} title
+     * @param {View} [wrapper]
+     * @returns {Entity}
+     */
+    openWindow({closeable, content, title, wrapper}) {
+        const entityBuilder = new Entity();
 
-    entityBuilder.add(new ViewportPosition());
+        function closeAction() {
+            entityBuilder.destroy();
+        }
 
-    let vElement;
-    if (wrapper !== undefined) {
-        vElement = wrapper;
-        wrapper.addChild(windowView);
-    } else {
-        vElement = windowView;
+        const windowView = new SimpleWindowView(content, {
+            closeAction,
+            title,
+            closeable
+        });
+
+        entityBuilder.add(new ViewportPosition());
+
+        let vElement;
+        if (wrapper !== undefined) {
+            vElement = wrapper;
+            wrapper.addChild(windowView);
+        } else {
+            vElement = windowView;
+        }
+
+        const guiElement = GUIElement.fromView(vElement);
+        entityBuilder.add(guiElement)
+            .add(SerializationMetadata.Transient);
+
+        const dataset = this.entityManager.dataset;
+
+        animateView(windowView, dataset);
+
+        entityBuilder.build(dataset);
+
+        return entityBuilder;
     }
 
-    const guiElement = GUIElement.fromView(vElement);
-    entityBuilder.add(guiElement)
-        .add(SerializationMetadata.Transient);
+    /**
+     *
+     * @param {View} content
+     * @param {string} title
+     * @param {number} priority
+     * @returns {SimpleLifecycle}
+     */
+    createModal({content, title, priority = 0}) {
+        const entityManager = this.entityManager;
 
-    const dataset = this.entityManager.dataset;
+        const self = this;
+        let window = null;
+        let overlay = null;
 
-    animateView(windowView, dataset);
 
-    entityBuilder.build(dataset);
+        function destroy() {
+            window.destroy();
+            overlay.destroy();
+        }
 
-    return entityBuilder;
-};
+        function makeOverlay() {
+            const overlay = new View();
+            overlay.el = document.createElement('div');
+            overlay.el.classList.add('ui-modal-overlay');
+            //make overlay dismiss modal
+            overlay.el.addEventListener('click', function (event) {
+                event.stopPropagation();
+                lifecycle.makeDestroyed();
+            });
 
-/**
- *
- * @param {View} view
- * @param {EntityComponentDataset} ecd
- */
-function animateView(view, ecd) {
+            const builder = new Entity();
 
-    const animationTrack = new AnimationTrack(["alpha", "scale"]);
-    animationTrack.addKey(0, [0, 0.95]);
-    animationTrack.addKey(0.2, [1, 1]);
+            builder.add(SerializationMetadata.Transient);
+            builder.add(GUIElement.fromView(overlay));
+            return builder;
+        }
 
-    animationTrack.addTransition(0, TransitionFunctions.Linear);
+        function build() {
+            overlay = makeOverlay();
 
-    const playback = new AnimationTrackPlayback(animationTrack, function (alpha, scale) {
-        this.el.style.opacity = alpha;
-        this.scale.set(scale, scale);
-    }, view);
+            overlay.build(entityManager.dataset);
 
-    //force view status to initial key of animation
-    playback.update();
+            const view = content;
 
-    playTrackRealTime(playback, ecd);
-}
+            const vModalContainer = new EmptyView({classList: ['ui-modal-window-container']});
 
-/**
- *
- * @param {View} content
- * @param {string} title
- * @param {number} priority
- * @returns {SimpleLifecycle}
- */
-GUIEngine.prototype.createModal = function ({ content, title, priority = 0 }) {
-    const entityManager = this.entityManager;
+            window = self.openWindow({
+                title: title,
+                content: view,
+                closeable: false,
+                wrapper: vModalContainer
+            });
 
-    const self = this;
-    let window = null;
-    let overlay = null;
+            const windowGuiElement = window.getComponent(GUIElement);
+            windowGuiElement.anchor.set(0.5, 0.5);
 
+            window.removeComponent(ViewportPosition);
 
-    function destroy() {
-        window.destroy();
-        overlay.destroy();
-    }
+        }
 
-    function makeOverlay() {
-        const overlay = new View();
-        overlay.el = document.createElement('div');
-        overlay.el.classList.add('ui-modal-overlay');
-        //make overlay dismiss modal
-        overlay.el.addEventListener('click', function (event) {
-            event.stopPropagation();
-            lifecycle.makeDestroyed();
-        });
+        const lifecycle = new SimpleLifecycle({priority});
 
-        const builder = new Entity();
+        lifecycle.sm.addEventHandlerStateEntry(SimpleLifecycleStateType.Active, build);
+        lifecycle.sm.addEventHandlerStateExit(SimpleLifecycleStateType.Active, destroy);
+
+        this.getActiveSceneContext().modals.add(lifecycle);
 
-        builder.add(SerializationMetadata.Transient);
-        builder.add(GUIElement.fromView(overlay));
-        return builder;
+        return lifecycle;
     }
 
-    function build() {
-        overlay = makeOverlay();
+    /**
+     *
+     * @param {string} title
+     * @param {View} content
+     * @param {ObservedBoolean|ReactiveExpression} [confirmationEnabled]
+     * @returns {Promise<any>}
+     */
+    createModalConfirmation({title, content, confirmationEnabled}) {
 
-        overlay.build(entityManager.dataset);
+        const self = this;
 
-        const view = content;
+        let lifecycle = null;
 
-        const vModalContainer = new EmptyView({ classList: ['ui-modal-window-container'] });
 
-        window = self.openWindow({
-            title: title,
-            content: view,
-            closeable: false,
-            wrapper: vModalContainer
-        });
+        const result = new Promise(function (resolve, reject) {
+            //make view
 
-        const windowGuiElement = window.getComponent(GUIElement);
-        windowGuiElement.anchor.set(0.5, 0.5);
+            let resolved = false;
 
-        window.removeComponent(ViewportPosition);
+            function clear() {
+                lifecycle.makeDestroyed();
+            }
 
-    }
+            function callbackYes() {
+                resolved = true;
+                clear();
+                resolve();
+            }
 
-    const lifecycle = new SimpleLifecycle({ priority });
+            function callbackNo() {
+                resolved = true;
+                clear();
+                reject();
+            }
 
-    lifecycle.sm.addEventHandlerStateEntry(SimpleLifecycleStateType.Active, build);
-    lifecycle.sm.addEventHandlerStateExit(SimpleLifecycleStateType.Active, destroy);
+            const view = new ConfirmationDialogView(content,
+                [{
+                    name: "yes",
+                    displayName: self.localization.getString("system_confirmation_confirm"),
+                    callback: callbackYes,
+                    enabled: confirmationEnabled
+                }, {
+                    name: "no",
+                    displayName: self.localization.getString("system_confirmation_cancel"),
+                    callback: callbackNo
+                }]
+            );
 
-    this.getActiveSceneContext().modals.add(lifecycle);
+            lifecycle = self.createModal({
+                content: view,
+                title: title
+            });
 
-    return lifecycle;
-};
+            lifecycle.sm.addEventHandlerStateEntry(SimpleLifecycleStateType.Destroyed, function () {
+                if (!resolved) {
+                    //if destroyed without resolution, reject the promise
+                    reject();
+                }
+            });
+        });
 
-/**
- *
- * @param {string} title
- * @param {View} content
- * @param {ObservedBoolean|ReactiveExpression} [confirmationEnabled]
- * @returns {Promise<any>}
- */
-GUIEngine.prototype.createModalConfirmation = function ({ title, content, confirmationEnabled }) {
 
-    const self = this;
+        return result;
+    }
 
-    let lifecycle = null;
+    /**
+     * @param {string} text
+     * @param {string} title
+     * @returns {Promise} will be resolved or rejected based on user choice
+     */
+    confirmTextDialog({text, title}) {
+        const content = createTextView(text);
 
+        return this.createModalConfirmation({
+            title,
+            content: content
+        });
+    }
 
-    const result = new Promise(function (resolve, reject) {
-        //make view
+    /**
+     *
+     * @param {string} text
+     * @param {string} title
+     * @returns {Promise}
+     */
+    createTextAlert({text, title}) {
+        const content = createTextView(text);
+        return this.createAlert({
+            content,
+            title
+        });
+    }
 
-        let resolved = false;
+    /**
+     *
+     * @param {View} content
+     * @param {string} title
+     * @param {View[]} [marks]
+     * @param {number} priority
+     * @param {function(SimpleLifecycle)} [lifecycleHook]
+     * @returns {Promise}
+     */
+    createAlert(
+        {
+            content,
+            title,
+            marks = [],
+            priority = 0,
+            lifecycleHook = noop
+        }
+    ) {
+        /**
+         *
+         * @type {SimpleLifecycle|null}
+         */
+        let lifecycle = null;
 
         function clear() {
             lifecycle.makeDestroyed();
         }
 
-        function callbackYes() {
-            resolved = true;
-            clear();
-            resolve();
-        }
-
-        function callbackNo() {
-            resolved = true;
-            clear();
-            reject();
-        }
+        const localization = this.localization;
 
         const view = new ConfirmationDialogView(content,
             [{
-                name: "yes",
-                displayName: self.localization.getString("system_confirmation_confirm"),
-                callback: callbackYes,
-                enabled: confirmationEnabled
-            }, {
-                name: "no",
-                displayName: self.localization.getString("system_confirmation_cancel"),
-                callback: callbackNo
+                name: "ok",
+                displayName: localization.getString("system_confirmation_continue"),
+                callback: clear
             }]
         );
 
-        lifecycle = self.createModal({
-            content: view,
-            title: title
-        });
-
-        lifecycle.sm.addEventHandlerStateEntry(SimpleLifecycleStateType.Destroyed, function () {
-            if (!resolved) {
-                //if destroyed without resolution, reject the promise
-                reject();
-            }
-        });
-    });
-
+        if (marks.length > 0) {
+            const vMarks = new EmptyView({classList: ['marks']});
 
-    return result;
-};
+            marks.forEach(vMarks.addChild, vMarks);
 
-/**
- *
- * @param {string} text
- * @return {View}
- */
-function createTextView(text) {
-    const content = new View();
-    content.el = document.createElement('div');
-    content.el.classList.add('text');
-    content.el.innerText = text;
+            view.addChild(vMarks);
+        }
 
-    content.size.set(300, 100);
-    return content;
-}
 
-/**
- * @param {string} text
- * @param {string} title
- * @returns {Promise} will be resolved or rejected based on user choice
- */
-GUIEngine.prototype.confirmTextDialog = function ({ text, title }) {
-    const content = createTextView(text);
+        lifecycle = this.createModal({
+            content: view,
+            title,
+            priority
+        });
 
-    return this.createModalConfirmation({
-        title,
-        content: content
-    });
-};
+        const result = new Promise(function (resolve, reject) {
+            lifecycle.sm.addEventHandlerStateEntry(SimpleLifecycleStateType.Destroyed, resolve);
+        });
 
-/**
- *
- * @param {string} text
- * @param {string} title
- * @returns {Promise}
- */
-GUIEngine.prototype.createTextAlert = function ({ text, title }) {
-    const content = createTextView(text);
-    return this.createAlert({
-        content,
-        title
-    });
-};
+        lifecycleHook(lifecycle);
 
-/**
- *
- * @param {View} content
- * @param {string} title
- * @param {View[]} [marks]
- * @param {number} priority
- * @param {function(SimpleLifecycle)} [lifecycleHook]
- * @returns {Promise}
- */
-GUIEngine.prototype.createAlert = function (
-    {
-        content,
-        title,
-        marks = [],
-        priority = 0,
-        lifecycleHook = noop
+        return result;
     }
-) {
+
     /**
      *
-     * @type {SimpleLifecycle|null}
+     * @param {Scene} scene
+     * @return {SceneGUIContext}
      */
-    let lifecycle = null;
+    obtainSceneContext(scene) {
 
-    function clear() {
-        lifecycle.makeDestroyed();
-    }
-
-    const localization = this.localization;
+        let context = this.sceneContexts.get(scene);
 
-    const view = new ConfirmationDialogView(content,
-        [{
-            name: "ok",
-            displayName: localization.getString("system_confirmation_continue"),
-            callback: clear
-        }]
-    );
+        if (context === undefined) {
+            context = new SceneGUIContext();
 
-    if (marks.length > 0) {
-        const vMarks = new EmptyView({ classList: ['marks'] });
+            context.initialize(scene);
+            context.startup();
 
-        marks.forEach(vMarks.addChild, vMarks);
+            this.sceneContexts.set(scene, context);
+        }
 
-        view.addChild(vMarks);
+        return context;
     }
 
+    /**
+     * @returns {SceneGUIContext|null}
+     */
+    getActiveSceneContext() {
+        const engine = this.engine;
 
-    lifecycle = this.createModal({
-        content: view,
-        title,
-        priority
-    });
-
-    const result = new Promise(function (resolve, reject) {
-        lifecycle.sm.addEventHandlerStateEntry(SimpleLifecycleStateType.Destroyed, resolve);
-    });
-
-    lifecycleHook(lifecycle);
+        if (engine === null) {
+            throw new Error(`Engine is not set`);
+        }
 
-    return result;
-};
+        const sm = engine.sceneManager;
 
-/**
- *
- * @param {Scene} scene
- * @return {SceneGUIContext}
- */
-GUIEngine.prototype.obtainSceneContext = function (scene) {
+        const scene = sm.current_scene;
 
-    let context = this.sceneContexts.get(scene);
+        if (scene === null) {
+            return null;
+        }
 
-    if (context === undefined) {
-        context = new SceneGUIContext();
+        return this.obtainSceneContext(scene);
+    }
 
-        context.initialize(scene);
-        context.startup();
+    /**
+     * Invoked when locale is updated
+     * @private
+     */
+    __update_localization() {
+        // write locale to the view class so that CSS can be modifier on per-locale basis
+        this.view.removeClassesByPattern(/locale-/);
 
-        this.sceneContexts.set(scene, context);
+        this.view.addClass(`locale-${this.localization.locale.getValue()}`);
     }
 
-    return context;
-};
-
-/**
- * @returns {SceneGUIContext|null}
- */
-GUIEngine.prototype.getActiveSceneContext = function () {
-    const engine = this.engine;
+    /**
+     *
+     * @param {Engine} engine
+     */
+    startup(engine) {
+        this.engine = engine;
+        this.entityManager = engine.entityManager;
 
-    if (engine === null) {
-        throw new Error(`Engine is not set`);
-    }
+        const self = this;
 
-    const sm = engine.sceneManager;
+        /**
+         *
+         * @type {Localization}
+         */
+        const localization = engine.localization;
 
-    const scene = sm.current_scene;
+        this.gml.initialize(engine.staticKnowledge, localization);
 
-    if (scene === null) {
-        return null;
-    }
+        this.tooltips.initialize(this.gml, engine.devices.pointer);
 
-    return this.obtainSceneContext(scene);
-};
+        //attach tooltips to GML
+        this.gml.tooltips = this.viewTooltips;
 
-/**
- * Invoked when locale is updated
- * @private
- */
-GUIEngine.prototype.__update_localization = function () {
-    // write locale to the view class so that CSS can be modifier on per-locale basis
-    this.view.removeClassesByPattern(/locale-/);
+        this.view.addChild(this.tooltips.contextView);
 
-    this.view.addClass(`locale-${this.localization.locale.getValue()}`);
-};
+        engine.gameView.addChild(this.view);
 
-/**
- *
- * @param {Engine} engine
- */
-GUIEngine.prototype.startup = function (engine) {
-    this.engine = engine;
-    this.entityManager = engine.entityManager;
+        engine.gameView.size.process(function (x, y) {
+            self.view.size.set(x, y);
 
-    const self = this;
+            self.tooltips.contextView.size.set(x, y);
+        });
 
-    /**
-     *
-     * @type {Localization}
-     */
-    const localization = engine.localization;
+        this.ticker.start();
 
-    this.gml.initialize(engine.staticKnowledge, localization);
+        this.localization = localization;
 
-    this.tooltips.initialize(this.gml, engine.devices.pointer);
 
-    //attach tooltips to GML
-    this.gml.tooltips = this.viewTooltips;
+        //register cursor propagation
+        this.cursor.process(function (newValue, oldValue) {
+            function className(cursorName) {
+                return `cursor-${cursorName}`;
+            }
 
-    this.view.addChild(this.tooltips.contextView);
+            const classList = engine.graphics.domElement.classList;
 
-    engine.gameView.addChild(this.view);
+            if (typeof oldValue === 'string') {
+                classList.remove(className(oldValue));
+            }
 
-    engine.gameView.size.process(function (x, y) {
-        self.view.size.set(x, y);
+            if (typeof newValue === 'string') {
+                classList.add(className(newValue));
+            }
+        });
 
-        self.tooltips.contextView.size.set(x, y);
-    });
+        // subscribe to localization changes
+        this.localization.locale.onChanged.add(this.__update_localization, this);
+        this.__update_localization();
 
-    this.ticker.start();
+        return Promise.all([
+            this.tooltips.startup()
+        ]);
+    }
 
-    this.localization = localization;
+    shutdown() {
+        this.windows.reset();
+        this.entityManager = null;
 
+        const pTooltips = this.tooltips.shutdown();
 
-    //register cursor propagation
-    this.cursor.process(function (newValue, oldValue) {
-        function className(cursorName) {
-            return `cursor-${cursorName}`;
-        }
+        // unsubscribe from localization changes
+        this.localization.locale.onChanged.remove(this.__update_localization, this);
 
-        const classList = engine.graphics.domElement.classList;
+        return Promise.all([
+            pTooltips
+        ]);
+    }
+}
 
-        if (typeof oldValue === 'string') {
-            classList.remove(className(oldValue));
-        }
+/**
+ *
+ * @param {View} view
+ * @param {EntityComponentDataset} ecd
+ */
+function animateView(view, ecd) {
 
-        if (typeof newValue === 'string') {
-            classList.add(className(newValue));
-        }
-    });
+    const animationTrack = new AnimationTrack(["alpha", "scale"]);
+    animationTrack.addKey(0, [0, 0.95]);
+    animationTrack.addKey(0.2, [1, 1]);
 
-    // subscribe to localization changes
-    this.localization.locale.onChanged.add(this.__update_localization, this);
-    this.__update_localization();
+    animationTrack.addTransition(0, TransitionFunctions.Linear);
 
-    return Promise.all([
-        this.tooltips.startup()
-    ]);
-};
+    const playback = new AnimationTrackPlayback(animationTrack, function (alpha, scale) {
+        this.el.style.opacity = alpha;
+        this.scale.set(scale, scale);
+    }, view);
 
-GUIEngine.prototype.shutdown = function () {
-    this.windows.reset();
-    this.entityManager = null;
+    //force view status to initial key of animation
+    playback.update();
 
-    const pTooltips = this.tooltips.shutdown();
+    playTrackRealTime(playback, ecd);
+}
 
-    // unsubscribe from localization changes
-    this.localization.locale.onChanged.remove(this.__update_localization, this);
+/**
+ *
+ * @param {string} text
+ * @return {View}
+ */
+function createTextView(text) {
+    const content = new View();
+    content.el = document.createElement('div');
+    content.el.classList.add('text');
+    content.el.innerText = text;
 
-    return Promise.all([
-        pTooltips
-    ]);
-};
+    content.size.set(300, 100);
+    return content;
+}
 
 /**
  * Created by Alex on 04/11/2016.
@@ -121033,7 +121099,7 @@ class EngineHarness {
             autoClip: cameraAutoClip
         });
 
-        const cameraEntity = camera.entity;
+        const cameraEntity = camera.id;
 
         if (enableTerrain) {
             await EngineHarness.buildTerrain({