dacha 0.15.2 → 0.16.0

package/build/contrib/systems/sprite-renderer/renderer.js

@@ -1,249 +0,0 @@
-import { Scene as ThreeJSScene, OrthographicCamera, WebGLRenderer, PlaneGeometry, Mesh, Color, } from 'three/src/Three';
-import { AddActor, RemoveActor } from '../../../engine/events';
-import { WorldSystem } from '../../../engine/system';
-import { ActorCollection } from '../../../engine/actor';
-import { Transform } from '../../components/transform';
-import { Sprite } from '../../components/sprite';
-import { Camera } from '../../components/camera';
-import { CameraService } from '../camera-system';
-import { MathOps } from '../../../engine/math-lib';
-import { CacheStore } from '../../../engine/data-lib';
-import { getWindowNode } from '../../utils/get-window-node';
-import { SpriteRendererService } from './service';
-import { composeSort, createSortByLayer, sortByYAxis, sortByXAxis, sortByZAxis, sortByFit, } from './sort';
-import { parseSortingLayers } from './sort/utils';
-import { LightSubsystem } from './light-subsystem';
-import { createMaterial, updateMaterial } from './material-factory';
-import { loadImage, prepareSprite, getAllSources, getTextureMapKey, cloneTexture, } from './utils';
-export class SpriteRenderer extends WorldSystem {
-    actorCollection;
-    window;
-    renderScene;
-    currentCamera;
-    renderer;
-    imageStore;
-    spriteCache;
-    textureMap;
-    actorsMap;
-    sortFn;
-    lightSubsystem;
-    viewWidth;
-    viewHeight;
-    templateCollection;
-    cameraService;
-    constructor(options) {
-        super();
-        const { globalOptions, windowNodeId, backgroundColor, backgroundAlpha, templateCollection, world, } = options;
-        this.templateCollection = templateCollection;
-        this.window = getWindowNode(windowNodeId);
-        this.sortFn = composeSort([
-            createSortByLayer(parseSortingLayers(globalOptions.sortingLayers?.layers)),
-            sortByYAxis,
-            sortByXAxis,
-            sortByZAxis,
-            sortByFit,
-        ]);
-        this.viewWidth = 0;
-        this.viewHeight = 0;
-        this.renderScene = new ThreeJSScene();
-        this.currentCamera = new OrthographicCamera();
-        this.renderer = new WebGLRenderer();
-        this.renderer.setClearColor(new Color(backgroundColor), backgroundAlpha);
-        this.renderer.setPixelRatio(window.devicePixelRatio);
-        this.lightSubsystem = new LightSubsystem(this.renderScene);
-        // TODO: Figure out how to set up camera correctly to avoid scale usage
-        this.renderScene.scale.set(1, -1, 1);
-        this.imageStore = new CacheStore();
-        this.actorsMap = new Map();
-        this.spriteCache = new Map();
-        this.textureMap = new Map();
-        this.cameraService = world.getService(CameraService);
-        world.addService(new SpriteRendererService({
-            threeScene: this.renderScene,
-            threeCamera: this.currentCamera,
-            window: this.window,
-            sortFn: this.sortFn,
-            cameraService: this.cameraService,
-        }));
-        window.addEventListener('resize', this.handleWindowResize);
-        this.window.appendChild(this.renderer.domElement);
-    }
-    async onSceneLoad(scene) {
-        const allSources = [
-            ...getAllSources(this.templateCollection.getAll()),
-            ...getAllSources(scene.children),
-        ];
-        const uniqueSources = [...new Set(allSources)];
-        const images = await Promise.all(uniqueSources.map((src) => {
-            return !this.imageStore.has(src) ? this.loadImage(src) : undefined;
-        }));
-        uniqueSources.forEach((src, index) => {
-            if (images[index]) {
-                this.imageStore.add(src, images[index]);
-            }
-        });
-        allSources.forEach((src) => this.imageStore.retain(src));
-    }
-    onSceneEnter(scene) {
-        this.actorCollection = new ActorCollection(scene, {
-            components: [Sprite, Transform],
-        });
-        this.handleWindowResize();
-        this.lightSubsystem.onSceneEnter(scene);
-        this.actorCollection.addEventListener(AddActor, this.handleActorAdd);
-        this.actorCollection.addEventListener(RemoveActor, this.handleActorRemove);
-    }
-    onSceneExit() {
-        this.actorCollection?.removeEventListener(AddActor, this.handleActorAdd);
-        this.actorCollection?.removeEventListener(RemoveActor, this.handleActorRemove);
-        this.lightSubsystem.onSceneExit();
-        this.actorsMap.clear();
-        this.spriteCache.clear();
-        this.textureMap.clear();
-        this.renderScene.clear();
-        this.actorCollection = undefined;
-    }
-    onSceneDestroy(scene) {
-        const allSources = [
-            ...getAllSources(this.templateCollection.getAll()),
-            ...getAllSources(scene.children),
-        ];
-        allSources.forEach((src) => this.imageStore.release(src));
-        this.imageStore.cleanReleased();
-    }
-    onWorldDestroy() {
-        window.removeEventListener('resize', this.handleWindowResize);
-        this.window.removeChild(this.renderer.domElement);
-    }
-    handleActorAdd = (event) => {
-        const { actor } = event;
-        const { src } = actor.getComponent(Sprite);
-        if (this.imageStore.has(src)) {
-            this.imageStore.retain(src);
-        }
-        else {
-            void this.loadImage(src).then((image) => {
-                if (image) {
-                    this.imageStore.add(src, image);
-                    this.imageStore.retain(src);
-                }
-            });
-        }
-    };
-    handleActorRemove = (event) => {
-        const { actor } = event;
-        const { src } = actor.getComponent(Sprite);
-        this.imageStore.release(src);
-        const objectId = this.actorsMap.get(actor.id);
-        if (objectId) {
-            const object = this.renderScene.getObjectById(objectId);
-            if (object) {
-                this.renderScene.remove(object);
-            }
-        }
-        this.actorsMap.delete(actor.id);
-    };
-    handleWindowResize = () => {
-        this.viewWidth = this.window.clientWidth;
-        this.viewHeight = this.window.clientHeight;
-        this.currentCamera.left = this.viewWidth / -2;
-        this.currentCamera.top = this.viewHeight / 2;
-        this.currentCamera.right = this.viewWidth / 2;
-        this.currentCamera.bottom = this.viewHeight / -2;
-        this.currentCamera.updateProjectionMatrix();
-        this.renderer.setSize(this.viewWidth, this.viewHeight);
-    };
-    async loadImage(src) {
-        if (!src) {
-            return undefined;
-        }
-        try {
-            const image = await loadImage(src);
-            return image;
-        }
-        catch (error) {
-            console.warn(`Can't load image by the following url: ${src}`, error);
-            return undefined;
-        }
-    }
-    getTextureArray(sprite) {
-        const { src, slice } = sprite;
-        const image = this.imageStore.get(src);
-        if (!image) {
-            return undefined;
-        }
-        if (!this.spriteCache.has(src)) {
-            this.spriteCache.set(src, {});
-        }
-        const spriteCache = this.spriteCache.get(src);
-        if (!spriteCache[slice]) {
-            spriteCache[slice] = prepareSprite(image, sprite);
-        }
-        const textureKey = getTextureMapKey(sprite);
-        if (!this.textureMap.has(textureKey)) {
-            this.textureMap.set(textureKey, spriteCache[slice].map((frame) => cloneTexture(sprite, frame)));
-        }
-        return this.textureMap.get(textureKey);
-    }
-    setUpActor(actor) {
-        const sprite = actor.getComponent(Sprite);
-        const material = createMaterial(sprite.material.type);
-        const geometry = new PlaneGeometry(sprite.width, sprite.height);
-        const object = new Mesh(geometry, material);
-        object.userData.actor = actor;
-        this.actorsMap.set(actor.id, object.id);
-        this.renderScene.add(object);
-    }
-    normalizeOffset(value) {
-        const currentCamera = this.cameraService.getCurrentCamera();
-        const camera = currentCamera?.getComponent(Camera);
-        const zoom = camera?.zoom ?? 1;
-        const ratio = 1 / (window.devicePixelRatio * zoom);
-        return Math.round(value / ratio) * ratio;
-    }
-    updateCamera() {
-        const currentCamera = this.cameraService.getCurrentCamera();
-        const transform = currentCamera?.getComponent(Transform);
-        const camera = currentCamera?.getComponent(Camera);
-        const offsetX = transform?.offsetX ?? 0;
-        const offsetY = transform?.offsetY ?? 0;
-        const zoom = camera?.zoom ?? 1;
-        this.currentCamera.zoom = zoom;
-        // TODO: Figure out how to set up camera correctly to avoid negative transform by y axis
-        this.currentCamera.position.set(this.normalizeOffset(offsetX), -this.normalizeOffset(offsetY), 1);
-        this.currentCamera.updateProjectionMatrix();
-    }
-    updateActors() {
-        this.actorCollection?.forEach((actor, index) => {
-            const transform = actor.getComponent(Transform);
-            const sprite = actor.getComponent(Sprite);
-            if (!this.actorsMap.has(actor.id)) {
-                this.setUpActor(actor);
-            }
-            const object = this.renderScene.getObjectById(this.actorsMap.get(actor.id));
-            if (!object) {
-                return;
-            }
-            object.visible = !sprite.disabled;
-            if (!object.visible) {
-                return;
-            }
-            object.scale.set((sprite.flipX ? -1 : 1) * transform.scaleX, (sprite.flipY ? -1 : 1) * transform.scaleY, 1);
-            object.rotation.set(0, 0, MathOps.degToRad(transform.rotation + sprite.rotation));
-            object.position.set(this.normalizeOffset(transform.offsetX), this.normalizeOffset(transform.offsetY), 0);
-            object.renderOrder = index;
-            const material = object.material;
-            const textureArray = this.getTextureArray(sprite);
-            const texture = textureArray?.[sprite.currentFrame || 0];
-            updateMaterial(sprite.material.type, material, sprite.material.options, texture);
-        });
-    }
-    update() {
-        this.updateCamera();
-        this.lightSubsystem.update();
-        this.actorCollection?.sort(this.sortFn);
-        this.updateActors();
-        this.renderer.render(this.renderScene, this.currentCamera);
-    }
-}
-SpriteRenderer.systemName = 'SpriteRenderer';

package/build/contrib/systems/sprite-renderer/service/index.d.ts

@@ -1,24 +0,0 @@
-import type { Scene, Camera } from 'three/src/Three';
-import type { CameraService } from '../../camera-system';
-import type { Actor } from '../../../../engine/actor';
-import type { SortFn } from '../sort';
-interface SpriteRendererServiceOptions {
-    threeScene: Scene;
-    threeCamera: Camera;
-    window: HTMLElement;
-    sortFn: SortFn;
-    cameraService: CameraService;
-}
-export declare class SpriteRendererService {
-    private threeScene;
-    private threeCamera;
-    private window;
-    private raycaster;
-    private sortFn;
-    private cameraService;
-    constructor({ threeScene, threeCamera, window, sortFn, cameraService, }: SpriteRendererServiceOptions);
-    private getNormalizedCoordinates;
-    intersectsWithPoint(x: number, y: number): Actor[];
-    intersectsWithRectangle(minX: number, minY: number, maxX: number, maxY: number): Actor[];
-}
-export {};

package/build/contrib/systems/sprite-renderer/service/index.js

@@ -1,52 +0,0 @@
-import { Raycaster, Vector2 } from 'three/src/Three';
-import { getProjectedX, getProjectedY } from '../../../utils/coordinates-projection';
-export class SpriteRendererService {
-    threeScene;
-    threeCamera;
-    window;
-    raycaster;
-    sortFn;
-    cameraService;
-    constructor({ threeScene, threeCamera, window, sortFn, cameraService, }) {
-        this.threeScene = threeScene;
-        this.threeCamera = threeCamera;
-        this.window = window;
-        this.sortFn = sortFn;
-        this.cameraService = cameraService;
-        this.raycaster = new Raycaster();
-    }
-    getNormalizedCoordinates(x, y) {
-        const { clientWidth, clientHeight } = this.window;
-        return new Vector2((x / clientWidth) * 2 - 1, -(y / clientHeight) * 2 + 1);
-    }
-    intersectsWithPoint(x, y) {
-        this.raycaster.setFromCamera(this.getNormalizedCoordinates(x, y), this.threeCamera);
-        const intersects = this.raycaster.intersectObjects(this.threeScene.children, true);
-        const actors = intersects.map((intersect) => intersect.object.userData.actor);
-        // TODO: Find more efficient way to return intersected objects in right order
-        // according to posititon and sorting layer
-        return actors
-            .sort(this.sortFn)
-            .reverse();
-    }
-    intersectsWithRectangle(minX, minY, maxX, maxY) {
-        const actors = [];
-        const camera = this.cameraService.getCurrentCamera();
-        if (!camera) {
-            return actors;
-        }
-        const projectedMinX = getProjectedX(minX, camera);
-        const projectedMinY = getProjectedY(minY, camera);
-        const projectedMaxX = getProjectedX(maxX, camera);
-        const projectedMaxY = getProjectedY(maxY, camera);
-        this.threeScene.traverse((object) => {
-            if (object.userData.actor !== undefined) {
-                const { x, y } = object.position;
-                if (x >= projectedMinX && x <= projectedMaxX && y >= projectedMinY && y <= projectedMaxY) {
-                    actors.push(object.userData.actor);
-                }
-            }
-        });
-        return actors;
-    }
-}

package/build/contrib/systems/sprite-renderer/sort/sort-by-fit.d.ts

@@ -1,2 +0,0 @@
-import type { SortFn } from './types';
-export declare const sortByFit: SortFn;

package/build/contrib/systems/sprite-renderer/sort/sort-by-fit.js

@@ -1,12 +0,0 @@
-import { Sprite } from '../../../components/sprite';
-export const sortByFit = (a, b) => {
-    const aSprite = a.getComponent(Sprite);
-    const bSprite = b.getComponent(Sprite);
-    if (aSprite.fit > bSprite.fit) {
-        return 1;
-    }
-    if (aSprite.fit < bSprite.fit) {
-        return -1;
-    }
-    return 0;
-};

package/build/contrib/systems/sprite-renderer/sort/sort-by-layer.d.ts

@@ -1,2 +0,0 @@
-import type { SortFn } from './types';
-export declare const createSortByLayer: (sortingLayers: Array<string>) => SortFn;

package/build/contrib/systems/sprite-renderer/sort/sort-by-layer.js

@@ -1,14 +0,0 @@
-import { Sprite } from '../../../components/sprite';
-export const createSortByLayer = (sortingLayers) => {
-    const sortingLayer = sortingLayers.reduce((storage, layer, index) => {
-        storage[layer] = index;
-        return storage;
-    }, {});
-    return (a, b) => {
-        const aSprite = a.getComponent(Sprite);
-        const bSprite = b.getComponent(Sprite);
-        const aSortingLayerOrder = sortingLayer[aSprite.sortingLayer];
-        const bSortingLayerOrder = sortingLayer[bSprite.sortingLayer];
-        return aSortingLayerOrder - bSortingLayerOrder;
-    };
-};

package/build/contrib/systems/sprite-renderer/sort/sort-by-x-axis.d.ts

@@ -1,2 +0,0 @@
-import type { SortFn } from './types';
-export declare const sortByXAxis: SortFn;

package/build/contrib/systems/sprite-renderer/sort/sort-by-x-axis.js

@@ -1,15 +0,0 @@
-import { Sprite } from '../../../components/sprite';
-import { Transform } from '../../../components/transform';
-export const sortByXAxis = (a, b) => {
-    const aSprite = a.getComponent(Sprite);
-    const bSprite = b.getComponent(Sprite);
-    const aTransform = a.getComponent(Transform);
-    const bTransform = b.getComponent(Transform);
-    const aOffsetX = aTransform.offsetX
-        + aSprite.sortCenter[0]
-        + ((aTransform.scaleX * aSprite.width) / 2);
-    const bOffsetX = bTransform.offsetX
-        + bSprite.sortCenter[0]
-        + ((bTransform.scaleX * bSprite.width) / 2);
-    return aOffsetX - bOffsetX;
-};

package/build/contrib/systems/sprite-renderer/sort/sort-by-y-axis.d.ts

@@ -1,2 +0,0 @@
-import type { SortFn } from './types';
-export declare const sortByYAxis: SortFn;

package/build/contrib/systems/sprite-renderer/sort/sort-by-y-axis.js

@@ -1,15 +0,0 @@
-import { Sprite } from '../../../components/sprite';
-import { Transform } from '../../../components/transform';
-export const sortByYAxis = (a, b) => {
-    const aSprite = a.getComponent(Sprite);
-    const bSprite = b.getComponent(Sprite);
-    const aTransform = a.getComponent(Transform);
-    const bTransform = b.getComponent(Transform);
-    const aOffsetY = aTransform.offsetY
-        + aSprite.sortCenter[1]
-        + ((aTransform.scaleY * aSprite.height) / 2);
-    const bOffsetY = bTransform.offsetY
-        + bSprite.sortCenter[1]
-        + ((bTransform.scaleY * bSprite.height) / 2);
-    return aOffsetY - bOffsetY;
-};

package/build/contrib/systems/sprite-renderer/sort/sort-by-z-axis.d.ts

@@ -1,2 +0,0 @@
-import type { SortFn } from './types';
-export declare const sortByZAxis: SortFn;

package/build/contrib/systems/sprite-renderer/sort/sort-by-z-axis.js

@@ -1,6 +0,0 @@
-import { Transform } from '../../../components/transform';
-export const sortByZAxis = (a, b) => {
-    const aTransform = a.getComponent(Transform);
-    const bTransform = b.getComponent(Transform);
-    return aTransform.offsetZ - bTransform.offsetZ;
-};

package/build/contrib/systems/sprite-renderer/sort/types.d.ts

@@ -1,2 +0,0 @@
-import type { Actor } from '../../../../engine/actor';
-export type SortFn = (a: Actor, b: Actor) => number;

package/build/contrib/systems/sprite-renderer/sprite-cropper.d.ts

@@ -1,8 +0,0 @@
-import { Texture } from 'three/src/Three';
-import type { Sprite } from '../../components/sprite';
-export declare class SpriteCropper {
-    private canvas;
-    private canvasContext;
-    constructor();
-    crop(spriteTexture: HTMLImageElement, sprite: Sprite): Array<Texture>;
-}

package/build/contrib/systems/sprite-renderer/sprite-cropper.js

@@ -1,30 +0,0 @@
-import { Texture } from 'three/src/Three';
-export class SpriteCropper {
-    canvas;
-    canvasContext;
-    constructor() {
-        this.canvas = document.createElement('canvas');
-        this.canvasContext = this.canvas.getContext('2d', { willReadFrequently: true });
-    }
-    crop(spriteTexture, sprite) {
-        const frames = sprite.slice;
-        if (frames <= 0) {
-            return [];
-        }
-        const width = Math.max(spriteTexture.width / frames, 1);
-        const height = Math.max(spriteTexture.height, 1);
-        this.canvas.width = width;
-        this.canvas.height = height;
-        const textures = new Array(frames);
-        for (let i = 0; i < frames; i += 1) {
-            this.canvasContext.clearRect(0, 0, width, height);
-            this.canvasContext.drawImage(spriteTexture, width * i, 0, width, height, 0, 0, width, height);
-            const frameImageData = this.canvasContext.getImageData(0, 0, width, height);
-            // Some issue with three.js d.ts probably,
-            // cause it should take ImageData as first argument
-            const texture = new Texture(frameImageData);
-            textures[i] = texture;
-        }
-        return textures;
-    }
-}

package/build/contrib/systems/sprite-renderer/types.d.ts

@@ -1,7 +0,0 @@
-export type SortingLayer = {
-    id: string;
-    name: string;
-};
-export type SortingLayers = {
-    layers: SortingLayer[];
-};

package/build/contrib/systems/sprite-renderer/utils.d.ts

@@ -1,9 +0,0 @@
-import { Texture } from 'three/src/Three';
-import { Sprite } from '../../components/sprite';
-import type { Actor } from '../../../engine/actor';
-import type { Template } from '../../../engine/template';
-export declare const loadImage: (spriteSourcePath: string) => Promise<HTMLImageElement>;
-export declare const prepareSprite: (image: HTMLImageElement, sprite: Sprite) => Texture[];
-export declare const getAllSources: (actors: (Actor | Template)[]) => string[];
-export declare const getTextureMapKey: ({ slice, fit, width, height, src, }: Sprite) => string;
-export declare const cloneTexture: (sprite: Sprite, texture: Texture) => Texture;

package/build/contrib/systems/sprite-renderer/utils.js

@@ -1,47 +0,0 @@
-import { NearestFilter, RepeatWrapping, ClampToEdgeWrapping, } from 'three/src/Three';
-import { Sprite } from '../../components/sprite';
-import { ResourceLoader } from '../../../engine/resource-loader';
-import { traverseEntity } from '../../../engine/entity';
-import { SpriteCropper } from './sprite-cropper';
-const spriteCropper = new SpriteCropper();
-const resourceLoader = new ResourceLoader();
-export const loadImage = (spriteSourcePath) => resourceLoader.load(spriteSourcePath);
-export const prepareSprite = (image, sprite) => {
-    const textures = spriteCropper.crop(image, sprite);
-    textures.forEach((texture) => {
-        texture.magFilter = NearestFilter;
-        texture.minFilter = NearestFilter;
-        texture.flipY = false;
-    });
-    return textures;
-};
-export const getAllSources = (actors) => {
-    const sources = [];
-    actors.forEach((actor) => {
-        traverseEntity(actor, (entity) => {
-            const sprite = entity.getComponent(Sprite);
-            if (sprite?.src) {
-                sources.push(sprite.src);
-            }
-        });
-    });
-    return sources;
-};
-export const getTextureMapKey = ({ slice, fit, width = 0, height = 0, src, }) => `${slice}_${fit}_${width}_${height}_${src}`;
-export const cloneTexture = (sprite, texture) => {
-    const { fit, width = 0, height = 0 } = sprite;
-    const repeatX = fit === 'repeat' ? width / texture.image.width : 1;
-    const repeatY = fit === 'repeat' ? height / texture.image.height : 1;
-    const newTexture = texture.clone();
-    if (fit === 'repeat') {
-        newTexture.wrapS = RepeatWrapping;
-        newTexture.wrapT = RepeatWrapping;
-    }
-    else {
-        newTexture.wrapS = ClampToEdgeWrapping;
-        newTexture.wrapT = ClampToEdgeWrapping;
-    }
-    newTexture.repeat.set(repeatX, repeatY);
-    newTexture.needsUpdate = true;
-    return newTexture;
-};