dacha 0.13.0

package/build/contrib/systems/sprite-renderer/light-subsystem/index.js

@@ -0,0 +1,51 @@
+import { Light } from '../../../components/light';
+import { Transform } from '../../../components/transform';
+import { RemoveActor } from '../../../../engine/events';
+import { createLight, updateLight } from './light-factory';
+export class LightSubsystem {
+    renderScene;
+    lightsCollection;
+    lightsMap;
+    constructor(renderScene, lightsCollection) {
+        this.renderScene = renderScene;
+        this.lightsCollection = lightsCollection;
+        this.lightsMap = {};
+    }
+    mount() {
+        this.lightsCollection.addEventListener(RemoveActor, this.handleLightRemove);
+    }
+    unmount() {
+        this.lightsCollection.removeEventListener(RemoveActor, this.handleLightRemove);
+    }
+    handleLightRemove = (event) => {
+        const { actor } = event;
+        const object = this.renderScene.getObjectById(this.lightsMap[actor.id]);
+        if (object) {
+            this.renderScene.remove(object);
+        }
+        delete this.lightsMap[actor.id];
+    };
+    setUpActor(actor) {
+        const { type } = actor.getComponent(Light);
+        const light = createLight(type);
+        light.userData.actor = actor;
+        this.lightsMap[actor.id] = light.id;
+        this.renderScene.add(light);
+    }
+    update() {
+        this.lightsCollection.forEach((actor) => {
+            const transform = actor.getComponent(Transform);
+            const { type, options } = actor.getComponent(Light);
+            if (!this.lightsMap[actor.id]) {
+                this.setUpActor(actor);
+            }
+            const light = this.renderScene.getObjectById(this.lightsMap[actor.id]);
+            if (!light) {
+                return;
+            }
+            light.position.setX(transform.offsetX);
+            light.position.setY(transform.offsetY);
+            updateLight(type, light, options);
+        });
+    }
+}

package/build/contrib/systems/sprite-renderer/light-subsystem/light-factory.d.ts

@@ -0,0 +1,4 @@
+import type { Light as ThreeJSLight } from 'three/src/Three';
+import type { LightType, LightOptions } from '../../../components/light';
+export declare const createLight: (type: LightType) => ThreeJSLight;
+export declare const updateLight: (type: LightType, light: ThreeJSLight, options: LightOptions) => void;

package/build/contrib/systems/sprite-renderer/light-subsystem/light-factory.js

@@ -0,0 +1,27 @@
+import { AmbientLight, PointLight, Color, } from 'three/src/Three';
+const updateAmbientLight = (light, options) => {
+    const { color, intensity } = options;
+    light.position.setZ(1);
+    light.color = new Color(color);
+    light.intensity = intensity;
+};
+const DISTANCE_FACTOR = 0.875;
+const updatePointLight = (light, options) => {
+    const { color, intensity, distance } = options;
+    light.position.setZ(distance / 2);
+    light.color = new Color(color);
+    light.intensity = intensity;
+    light.distance = distance / DISTANCE_FACTOR;
+};
+const lightUpdateStrategyMap = {
+    ambient: updateAmbientLight,
+    point: updatePointLight,
+};
+const lightMap = {
+    ambient: AmbientLight,
+    point: PointLight,
+};
+export const createLight = (type) => new lightMap[type]();
+export const updateLight = (type, light, options) => {
+    lightUpdateStrategyMap[type](light, options);
+};

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

@@ -0,0 +1,4 @@
+import type { Material, Texture } from 'three/src/Three';
+import type { MaterialType, BasicMaterialOptions } from '../../../components/sprite';
+export declare const createMaterial: (type: MaterialType) => Material;
+export declare const updateMaterial: (type: MaterialType, material: Material, options: BasicMaterialOptions, texture?: Texture) => void;

package/build/contrib/systems/sprite-renderer/material-factory/index.js

@@ -0,0 +1,32 @@
+import { MeshBasicMaterial, MeshStandardMaterial, Color, NormalBlending, AdditiveBlending, SubtractiveBlending, MultiplyBlending, DataTexture, } from 'three/src/Three';
+const DEFAULT_COLOR = '#ffffff';
+const DEFAULT_BLENDING = 'normal';
+const DEFAULT_OPACITY = 1;
+const DEFAULT_TEXTURE = new DataTexture(new Uint8Array([255, 255, 255, 255]), 1, 1);
+DEFAULT_TEXTURE.needsUpdate = true;
+const blendingMap = {
+    normal: NormalBlending,
+    addition: AdditiveBlending,
+    substract: SubtractiveBlending,
+    multiply: MultiplyBlending,
+};
+const updateBasicMaterial = (material, componentOptions, texture = DEFAULT_TEXTURE) => {
+    const { color = DEFAULT_COLOR, blending = DEFAULT_BLENDING, opacity = DEFAULT_OPACITY, } = componentOptions;
+    const basicMaterial = material;
+    basicMaterial.transparent = true;
+    basicMaterial.map = texture;
+    basicMaterial.blending = blendingMap[blending];
+    basicMaterial.opacity = opacity;
+    const currentColor = `#${basicMaterial.color.getHexString()}`;
+    if (color !== currentColor) {
+        basicMaterial.color = new Color(color);
+    }
+};
+const materialMap = {
+    lightsensitive: MeshStandardMaterial,
+    basic: MeshBasicMaterial,
+};
+export const createMaterial = (type) => new materialMap[type]();
+export const updateMaterial = (type, material, options, texture) => {
+    updateBasicMaterial(material, options, texture);
+};

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

@@ -0,0 +1,32 @@
+import { System } from '../../../engine/system';
+import type { SystemOptions } from '../../../engine/system';
+export declare class SpriteRenderer extends System {
+    private actorCollection;
+    private window;
+    private renderScene;
+    private currentCamera;
+    private renderer;
+    private imageCache;
+    private spriteCache;
+    private textureMap;
+    private actorsMap;
+    private sortFn;
+    private lightSubsystem;
+    private viewWidth;
+    private viewHeight;
+    private templateCollection;
+    private cameraService;
+    constructor(options: SystemOptions);
+    load(): Promise<void>;
+    private loadImage;
+    private getTextureArray;
+    mount(): void;
+    unmount(): void;
+    private getImagesToLoad;
+    private handleActorRemove;
+    private handleWindowResize;
+    private setUpActor;
+    private updateCamera;
+    private updateActors;
+    update(): void;
+}

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

@@ -0,0 +1,214 @@
+import { Scene, OrthographicCamera, WebGLRenderer, PlaneGeometry, Mesh, Color, } from 'three/src/Three';
+import { RemoveActor } from '../../../engine/events';
+import { System } from '../../../engine/system';
+import { ActorCollection } from '../../../engine/actor';
+import { Transform } from '../../components/transform';
+import { Sprite } from '../../components/sprite';
+import { Light } from '../../components/light';
+import { Camera } from '../../components/camera';
+import { CameraService } from '../camera-system';
+import { MathOps } from '../../../engine/math-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, getImagesFromTemplate, getTextureMapKey, cloneTexture, } from './utils';
+export class SpriteRenderer extends System {
+    actorCollection;
+    window;
+    renderScene;
+    currentCamera;
+    renderer;
+    imageCache;
+    spriteCache;
+    textureMap;
+    actorsMap;
+    sortFn;
+    lightSubsystem;
+    viewWidth;
+    viewHeight;
+    templateCollection;
+    cameraService;
+    constructor(options) {
+        super();
+        const { globalOptions, windowNodeId, backgroundColor, backgroundAlpha, templateCollection, scene, } = options;
+        this.actorCollection = new ActorCollection(scene, {
+            components: [
+                Sprite,
+                Transform,
+            ],
+        });
+        this.templateCollection = templateCollection;
+        this.window = getWindowNode(windowNodeId);
+        this.sortFn = composeSort([
+            createSortByLayer(parseSortingLayers(globalOptions.sortingLayers)),
+            sortByYAxis,
+            sortByXAxis,
+            sortByZAxis,
+            sortByFit,
+        ]);
+        this.actorsMap = {};
+        this.viewWidth = 0;
+        this.viewHeight = 0;
+        this.renderScene = new Scene();
+        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, new ActorCollection(scene, {
+            components: [
+                Light,
+                Transform,
+            ],
+        }));
+        // TODO: Figure out how to set up camera correctly to avoid scale usage
+        this.renderScene.scale.set(1, -1, 1);
+        this.imageCache = {};
+        this.spriteCache = {};
+        this.textureMap = {};
+        this.cameraService = scene.getService(CameraService);
+        scene.addService(new SpriteRendererService({
+            threeScene: this.renderScene,
+            threeCamera: this.currentCamera,
+            window: this.window,
+            sortFn: this.sortFn,
+            cameraService: this.cameraService,
+        }));
+    }
+    async load() {
+        const imagesToLoad = this.getImagesToLoad();
+        await Promise.all(Object.keys(imagesToLoad).map((key) => this.loadImage(imagesToLoad[key])));
+    }
+    async loadImage(sprite) {
+        const { src, slice } = sprite;
+        this.imageCache[src] = null;
+        return loadImage(sprite)
+            .then((image) => {
+            this.imageCache[src] = image;
+            const spriteTextures = prepareSprite(image, sprite);
+            this.spriteCache[src] ??= {};
+            this.spriteCache[src][slice] = spriteTextures;
+            this.textureMap[getTextureMapKey(sprite)] = spriteTextures.map((frame) => cloneTexture(sprite, frame));
+        })
+            .catch(() => {
+            console.warn(`Can't load image by the following url: ${src}`);
+        });
+    }
+    getTextureArray(sprite) {
+        const { src, slice } = sprite;
+        const image = this.imageCache[src];
+        if (image === null) {
+            return void 0;
+        }
+        if (image === undefined) {
+            void this.loadImage(sprite);
+            return void 0;
+        }
+        if (image && !this.spriteCache[src][slice]) {
+            this.spriteCache[src][slice] = prepareSprite(image, sprite);
+        }
+        const textureKey = getTextureMapKey(sprite);
+        if (image && this.spriteCache[src][slice] && !this.textureMap[textureKey]) {
+            this.textureMap[textureKey] = this.spriteCache[src][slice].map((frame) => cloneTexture(sprite, frame));
+        }
+        return this.textureMap[textureKey];
+    }
+    mount() {
+        this.handleWindowResize();
+        window.addEventListener('resize', this.handleWindowResize);
+        this.actorCollection.addEventListener(RemoveActor, this.handleActorRemove);
+        this.lightSubsystem.mount();
+        this.window.appendChild(this.renderer.domElement);
+    }
+    unmount() {
+        window.removeEventListener('resize', this.handleWindowResize);
+        this.actorCollection.removeEventListener(RemoveActor, this.handleActorRemove);
+        this.lightSubsystem.unmount();
+        this.window.removeChild(this.renderer.domElement);
+    }
+    getImagesToLoad() {
+        const imagesToLoad = {};
+        this.templateCollection.getAll().forEach((template) => getImagesFromTemplate(imagesToLoad, template));
+        this.actorCollection.forEach((actor) => {
+            const sprite = actor.getComponent(Sprite);
+            if (!imagesToLoad[sprite.src]) {
+                imagesToLoad[sprite.src] = sprite;
+            }
+        });
+        return imagesToLoad;
+    }
+    handleActorRemove = (event) => {
+        const { actor } = event;
+        const object = this.renderScene.getObjectById(this.actorsMap[actor.id]);
+        if (object) {
+            this.renderScene.remove(object);
+        }
+        delete this.actorsMap[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);
+    };
+    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[actor.id] = object.id;
+        this.renderScene.add(object);
+    }
+    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(offsetX, -offsetY, 1);
+        this.currentCamera.updateProjectionMatrix();
+    }
+    updateActors() {
+        this.actorCollection.forEach((actor, index) => {
+            const transform = actor.getComponent(Transform);
+            const sprite = actor.getComponent(Sprite);
+            if (!this.actorsMap[actor.id]) {
+                this.setUpActor(actor);
+            }
+            const object = this.renderScene.getObjectById(this.actorsMap[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(transform.offsetX, 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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,52 @@
+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/index.d.ts

@@ -0,0 +1,8 @@
+import { SortFn } from './types';
+export { createSortByLayer } from './sort-by-layer';
+export { sortByXAxis } from './sort-by-x-axis';
+export { sortByYAxis } from './sort-by-y-axis';
+export { sortByZAxis } from './sort-by-z-axis';
+export { sortByFit } from './sort-by-fit';
+export declare const composeSort: (sortFns: Array<SortFn>) => SortFn;
+export type { SortFn };

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

@@ -0,0 +1,15 @@
+export { createSortByLayer } from './sort-by-layer';
+export { sortByXAxis } from './sort-by-x-axis';
+export { sortByYAxis } from './sort-by-y-axis';
+export { sortByZAxis } from './sort-by-z-axis';
+export { sortByFit } from './sort-by-fit';
+export const composeSort = (sortFns) => (a, b) => {
+    let result = 0;
+    for (let i = 0; i < sortFns.length; i += 1) {
+        result = sortFns[i](a, b);
+        if (result !== 0) {
+            return result;
+        }
+    }
+    return result;
+};

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

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

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

@@ -0,0 +1,12 @@
+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

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

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

@@ -0,0 +1,14 @@
+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

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

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

@@ -0,0 +1,15 @@
+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

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

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

@@ -0,0 +1,15 @@
+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

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

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

@@ -0,0 +1,6 @@
+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

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

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export declare const parseSortingLayers: (sortingLayers: unknown) => Array<string>;

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

@@ -0,0 +1,6 @@
+export const parseSortingLayers = (sortingLayers) => {
+    if (Array.isArray(sortingLayers)) {
+        return sortingLayers.map((layer) => String(layer));
+    }
+    return [];
+};

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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,30 @@
+import { Texture } from 'three/src/Three';
+export class SpriteCropper {
+    canvas;
+    canvasContext;
+    constructor() {
+        this.canvas = document.createElement('canvas');
+        this.canvasContext = this.canvas.getContext('2d');
+    }
+    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/utils.d.ts

@@ -0,0 +1,8 @@
+import { Texture } from 'three/src/Three';
+import { Sprite } from '../../components/sprite';
+import type { Template } from '../../../engine/template';
+export declare const loadImage: (sprite: Sprite) => Promise<HTMLImageElement>;
+export declare const prepareSprite: (image: HTMLImageElement, sprite: Sprite) => Array<Texture>;
+export declare const getImagesFromTemplate: (images: Record<string, Sprite>, template: Template) => void;
+export declare const getTextureMapKey: ({ slice, fit, width, height, src, }: Sprite) => string;
+export declare const cloneTexture: (sprite: Sprite, texture: Texture) => Texture;