dacha 0.18.0 → 0.18.1

package/build/contrib/components/bitmap-text/index.d.ts

@@ -8,17 +8,17 @@ interface RenderData {
 }
 type TextAlign = 'left' | 'center' | 'right';
 export interface BitmapTextConfig {
-    text: string;
-    font: string;
-    fontSize: number;
-    align: TextAlign;
-    color: string;
-    opacity: number;
-    blending: BlendingMode;
-    disabled: boolean;
-    sortingLayer: string;
-    sortOffsetX: number;
-    sortOffsetY: number;
+    text?: string;
+    font?: string;
+    fontSize?: number;
+    align?: TextAlign;
+    color?: string;
+    opacity?: number;
+    blending?: BlendingMode;
+    disabled?: boolean;
+    sortingLayer?: string;
+    sortOffsetX?: number;
+    sortOffsetY?: number;
 }
 /**
  * BitmapText component for rendering text using a bitmap font.

package/build/contrib/components/bitmap-text/index.js

@@ -60,16 +60,19 @@ export class BitmapText extends Component {
     renderData;
     constructor(config) {
         super();
-        this.text = config.text;
-        this.font = config.font;
-        this.fontSize = config.fontSize;
-        this.align = config.align;
-        this.color = config.color;
-        this.opacity = config.opacity;
-        this.blending = config.blending;
-        this.disabled = config.disabled;
-        this.sortingLayer = config.sortingLayer;
-        this.sortOffset = { x: config.sortOffsetX, y: config.sortOffsetY };
+        this.text = config.text ?? 'Text';
+        this.font = config.font ?? '';
+        this.fontSize = config.fontSize ?? 10;
+        this.align = config.align ?? 'center';
+        this.color = config.color ?? '#000000';
+        this.opacity = config.opacity ?? 1;
+        this.blending = config.blending ?? 'normal';
+        this.disabled = config.disabled ?? false;
+        this.sortingLayer = config.sortingLayer ?? 'default';
+        this.sortOffset = {
+            x: config.sortOffsetX ?? 0,
+            y: config.sortOffsetY ?? 0,
+        };
     }
 }
 BitmapText.componentName = 'BitmapText';

package/build/contrib/components/mesh/index.d.ts

@@ -13,20 +13,20 @@ export interface MaterialConfig {
     options: Record<string, unknown>;
 }
 export interface MeshConfig {
-    src: string;
-    width: number;
-    height: number;
-    slice: number;
-    flipX: boolean;
-    flipY: boolean;
-    sortingLayer: string;
-    sortOffsetX: number;
-    sortOffsetY: number;
-    color: string;
-    blending: BlendingMode;
-    opacity: number;
+    src?: string;
+    width?: number;
+    height?: number;
+    slice?: number;
+    flipX?: boolean;
+    flipY?: boolean;
+    sortingLayer?: string;
+    sortOffsetX?: number;
+    sortOffsetY?: number;
+    color?: string;
+    blending?: BlendingMode;
+    opacity?: number;
     material?: MaterialConfig;
-    disabled: boolean;
+    disabled?: boolean;
 }
 /**
  * Mesh component for rendering 2D textures with a custom shader.

package/build/contrib/components/mesh/index.js

@@ -78,16 +78,19 @@ export class Mesh extends Component {
      */
     constructor(config) {
         super();
-        this.src = config.src;
-        this.width = config.width;
-        this.height = config.height;
-        this.slice = config.slice;
+        this.src = config.src ?? '';
+        this.width = config.width ?? 10;
+        this.height = config.height ?? 10;
+        this.slice = config.slice ?? 1;
         this.currentFrame = 0;
-        this.flipX = config.flipX;
-        this.flipY = config.flipY;
-        this.disabled = config.disabled;
-        this.sortingLayer = config.sortingLayer;
-        this.sortOffset = { x: config.sortOffsetX, y: config.sortOffsetY };
+        this.flipX = config.flipX ?? false;
+        this.flipY = config.flipY ?? false;
+        this.disabled = config.disabled ?? false;
+        this.sortingLayer = config.sortingLayer ?? 'default';
+        this.sortOffset = {
+            x: config.sortOffsetX ?? 0,
+            y: config.sortOffsetY ?? 0,
+        };
         this.color = config.color ?? '#ffffff';
         this.blending = config.blending ?? 'normal';
         this.opacity = config.opacity ?? 1;

package/build/contrib/components/pixi-view/index.d.ts

@@ -5,10 +5,10 @@ interface RenderData {
     view: ViewContainer;
 }
 export interface PixiViewConfig {
-    createView: () => ViewContainer;
-    sortingLayer: string;
-    sortOffsetX: number;
-    sortOffsetY: number;
+    createView?: () => ViewContainer;
+    sortingLayer?: string;
+    sortOffsetX?: number;
+    sortOffsetY?: number;
 }
 /**
  * PixiView component for rendering a view.
@@ -41,7 +41,7 @@ export interface PixiViewConfig {
  */
 export declare class PixiView extends Component {
     /** Function to create a custom pixi.js view */
-    createView: () => ViewContainer;
+    createView?: () => ViewContainer;
     /** Sorting layer of the pixi view */
     sortingLayer: string;
     /** Center point of the pixi view */

package/build/contrib/components/pixi-view/index.js

@@ -45,8 +45,11 @@ export class PixiView extends Component {
     constructor(config) {
         super();
         this.createView = config.createView;
-        this.sortingLayer = config.sortingLayer;
-        this.sortOffset = { x: config.sortOffsetX, y: config.sortOffsetY };
+        this.sortingLayer = config.sortingLayer ?? 'default';
+        this.sortOffset = {
+            x: config.sortOffsetX ?? 0,
+            y: config.sortOffsetY ?? 0,
+        };
     }
     /** Get the pixi.js view. It's only available after the actor with this component is added to a scene */
     get view() {

package/build/contrib/components/shape/index.d.ts

@@ -9,45 +9,29 @@ interface RenderData {
 export type ShapeType = 'rectangle' | 'roundRectangle' | 'circle' | 'ellipse' | 'line';
 export interface BaseShapeConfig {
     strokeColor?: string;
-    strokeWidth: number;
-    strokeAlignment: number;
-    pixelLine: boolean;
+    strokeWidth?: number;
+    strokeAlignment?: number;
+    pixelLine?: boolean;
     fill?: string;
-    opacity: number;
-    blending: BlendingMode;
-    disabled: boolean;
-    sortingLayer: string;
-    sortOffsetX: number;
-    sortOffsetY: number;
-}
-export interface RectangleShapeConfig extends BaseShapeConfig {
-    type: 'rectangle';
-    sizeX: number;
-    sizeY: number;
+    opacity?: number;
+    blending?: BlendingMode;
+    disabled?: boolean;
+    sortingLayer?: string;
+    sortOffsetX?: number;
+    sortOffsetY?: number;
 }
-export interface RoundRectangleShapeConfig extends BaseShapeConfig {
-    type: 'roundRectangle';
-    sizeX: number;
-    sizeY: number;
-    radius: number;
-}
-export interface CircleShapeConfig extends BaseShapeConfig {
-    type: 'circle';
-    radius: number;
-}
-export interface EllipseShapeConfig extends BaseShapeConfig {
-    type: 'ellipse';
-    radiusX: number;
-    radiusY: number;
-}
-export interface LineShapeConfig extends BaseShapeConfig {
-    type: 'line';
-    point1X: number;
-    point1Y: number;
-    point2X: number;
-    point2Y: number;
+export interface ShapeConfig extends BaseShapeConfig {
+    type?: ShapeType;
+    sizeX?: number;
+    sizeY?: number;
+    radius?: number;
+    radiusX?: number;
+    radiusY?: number;
+    point1X?: number;
+    point1Y?: number;
+    point2X?: number;
+    point2Y?: number;
 }
-export type ShapeConfig = RectangleShapeConfig | RoundRectangleShapeConfig | CircleShapeConfig | EllipseShapeConfig | LineShapeConfig;
 export interface RectangleShapeGeometry {
     type: 'rectangle';
     size: Point;

package/build/contrib/components/shape/index.js

@@ -71,47 +71,51 @@ export class Shape extends Component {
      */
     constructor(config) {
         super();
-        this.strokeColor = config.strokeColor;
-        this.strokeWidth = config.strokeWidth;
-        this.strokeAlignment = config.strokeAlignment;
-        this.pixelLine = config.pixelLine;
-        this.fill = config.fill;
-        this.opacity = config.opacity;
-        this.blending = config.blending;
-        this.disabled = config.disabled;
-        this.sortingLayer = config.sortingLayer;
-        this.sortOffset = { x: config.sortOffsetX, y: config.sortOffsetY };
-        switch (config.type) {
+        this.strokeColor = config.strokeColor ?? '#ffffff';
+        this.strokeWidth = config.strokeWidth ?? 0;
+        this.strokeAlignment = config.strokeAlignment ?? 0.5;
+        this.pixelLine = config.pixelLine ?? false;
+        this.fill = config.fill ?? '#ffffff';
+        this.opacity = config.opacity ?? 1;
+        this.blending = config.blending ?? 'normal';
+        this.disabled = config.disabled ?? false;
+        this.sortingLayer = config.sortingLayer ?? 'default';
+        this.sortOffset = {
+            x: config.sortOffsetX ?? 0,
+            y: config.sortOffsetY ?? 0,
+        };
+        const type = config.type ?? 'rectangle';
+        switch (type) {
             case 'rectangle':
                 this.geometry = {
-                    type: config.type,
-                    size: { x: config.sizeX, y: config.sizeY },
+                    type,
+                    size: { x: config.sizeX ?? 10, y: config.sizeY ?? 10 },
                 };
                 break;
             case 'roundRectangle':
                 this.geometry = {
-                    type: config.type,
-                    size: { x: config.sizeX, y: config.sizeY },
-                    radius: config.radius,
+                    type,
+                    size: { x: config.sizeX ?? 10, y: config.sizeY ?? 10 },
+                    radius: config.radius ?? 2,
                 };
                 break;
             case 'circle':
                 this.geometry = {
-                    type: config.type,
-                    radius: config.radius,
+                    type,
+                    radius: config.radius ?? 5,
                 };
                 break;
             case 'ellipse':
                 this.geometry = {
-                    type: config.type,
-                    radius: { x: config.radiusX, y: config.radiusY },
+                    type,
+                    radius: { x: config.radiusX ?? 5, y: config.radiusY ?? 5 },
                 };
                 break;
             case 'line':
                 this.geometry = {
-                    type: config.type,
-                    point1: { x: config.point1X, y: config.point1Y },
-                    point2: { x: config.point2X, y: config.point2Y },
+                    type,
+                    point1: { x: config.point1X ?? -5, y: config.point1Y ?? 0 },
+                    point2: { x: config.point2X ?? 5, y: config.point2Y ?? 0 },
                 };
         }
     }

package/build/contrib/components/sprite/index.d.ts

@@ -10,20 +10,22 @@ interface RenderData {
 type FitType = 'stretch' | 'repeat';
 export { type BlendingMode } from '../../types/view';
 export interface SpriteConfig {
-    src: string;
-    width: number;
-    height: number;
-    slice: number;
-    flipX: boolean;
-    flipY: boolean;
-    sortingLayer: string;
-    sortOffsetX: number;
-    sortOffsetY: number;
-    fit: FitType;
-    color: string;
-    blending: BlendingMode;
-    opacity: number;
-    disabled: boolean;
+    src?: string;
+    width?: number;
+    height?: number;
+    slice?: number;
+    flipX?: boolean;
+    flipY?: boolean;
+    sortingLayer?: string;
+    sortOffsetX?: number;
+    sortOffsetY?: number;
+    textureOffsetX?: number;
+    textureOffsetY?: number;
+    fit?: FitType;
+    color?: string;
+    blending?: BlendingMode;
+    opacity?: number;
+    disabled?: boolean;
 }
 /**
  * Sprite component for rendering 2D textures.
@@ -80,6 +82,12 @@ export declare class Sprite extends Component {
     sortingLayer: string;
     /** Center point for sorting calculations */
     sortOffset: Point;
+    /**
+     * Texture sampling offset in pixels. Only applies to `fit: 'repeat'`
+     * With flipX/flipY the tile is mirrored, so a positive offset scrolls in
+     * the mirrored direction.
+     */
+    textureOffset: Point;
     /** Current frame to render */
     currentFrame?: number;
     /** How the texture should fit within the sprite bounds */

package/build/contrib/components/sprite/index.js

@@ -54,6 +54,12 @@ export class Sprite extends Component {
     sortingLayer;
     /** Center point for sorting calculations */
     sortOffset;
+    /**
+     * Texture sampling offset in pixels. Only applies to `fit: 'repeat'`
+     * With flipX/flipY the tile is mirrored, so a positive offset scrolls in
+     * the mirrored direction.
+     */
+    textureOffset;
     /** Current frame to render */
     currentFrame;
     /** How the texture should fit within the sprite bounds */
@@ -73,17 +79,24 @@ export class Sprite extends Component {
      */
     constructor(config) {
         super();
-        this.src = config.src;
-        this.width = config.width;
-        this.height = config.height;
-        this.slice = config.slice;
+        this.src = config.src ?? '';
+        this.width = config.width ?? 10;
+        this.height = config.height ?? 10;
+        this.slice = config.slice ?? 1;
         this.currentFrame = 0;
-        this.flipX = config.flipX;
-        this.flipY = config.flipY;
-        this.disabled = config.disabled;
-        this.sortingLayer = config.sortingLayer;
-        this.sortOffset = { x: config.sortOffsetX, y: config.sortOffsetY };
-        this.fit = config.fit;
+        this.flipX = config.flipX ?? false;
+        this.flipY = config.flipY ?? false;
+        this.disabled = config.disabled ?? false;
+        this.sortingLayer = config.sortingLayer ?? 'default';
+        this.sortOffset = {
+            x: config.sortOffsetX ?? 0,
+            y: config.sortOffsetY ?? 0,
+        };
+        this.textureOffset = {
+            x: config.textureOffsetX ?? 0,
+            y: config.textureOffsetY ?? 0,
+        };
+        this.fit = config.fit ?? 'stretch';
         this.color = config.color ?? '#ffffff';
         this.blending = config.blending ?? 'normal';
         this.opacity = config.opacity ?? 1;

package/build/contrib/systems/renderer/builders/mesh-builder/index.d.ts

@@ -16,7 +16,6 @@ export declare class MeshBuilder implements Builder<Mesh> {
     destroy(mesh: Mesh): void;
     buildView(mesh: Mesh, actor: Actor): PixiMesh;
     updateView(mesh: Mesh): void;
-    private updateGeometry;
     private updateTexture;
 }
 export {};

package/build/contrib/systems/renderer/builders/mesh-builder/index.js

@@ -75,26 +75,6 @@ export class MeshBuilder {
         }
         this.materialSystem.updateShader(mesh);
     }
-    updateGeometry(mesh) {
-        const view = mesh.renderData.view;
-        const texture = view.texture;
-        const geometry = view.geometry;
-        const uvs = texture?.uvs;
-        if (!uvs) {
-            return;
-        }
-        const uvAttr = geometry.getAttribute('aUV');
-        const uvBuffer = uvAttr.buffer.data;
-        uvBuffer[0] = uvs.x0;
-        uvBuffer[1] = uvs.y0;
-        uvBuffer[2] = uvs.x1;
-        uvBuffer[3] = uvs.y1;
-        uvBuffer[4] = uvs.x2;
-        uvBuffer[5] = uvs.y2;
-        uvBuffer[6] = uvs.x3;
-        uvBuffer[7] = uvs.y3;
-        uvAttr.buffer.update();
-    }
     updateTexture(mesh) {
         const view = mesh.renderData.view;
         const meta = view.__dacha.meta;
@@ -109,6 +89,5 @@ export class MeshBuilder {
         const texture = textureArray?.[mesh.currentFrame];
         view.texture = texture ?? Texture.WHITE;
         meta.currentFrame = mesh.currentFrame;
-        this.updateGeometry(mesh);
     }
 }

package/build/contrib/systems/renderer/builders/pixi-view-builder/index.js

@@ -1,3 +1,4 @@
+import { Graphics } from 'pixi.js';
 import { PixiView } from '../../../../components/pixi-view';
 export class PixiViewBuilder {
     destroy(pixiView) {
@@ -5,7 +6,7 @@ export class PixiViewBuilder {
         pixiView.renderData = undefined;
     }
     buildView(pixiView, actor) {
-        const view = pixiView.createView();
+        const view = pixiView.createView ? pixiView.createView() : new Graphics();
         pixiView.renderData = { view };
         view.__dacha = {
             actor,

package/build/contrib/systems/renderer/builders/sprite-builder/index.js

@@ -78,5 +78,13 @@ export class SpriteBuilder {
             meta.width = sprite.width;
             meta.height = sprite.height;
         }
+        if (sprite.fit === 'repeat') {
+            if (sprite.textureOffset.x !== meta.textureOffsetX ||
+                sprite.textureOffset.y !== meta.textureOffsetY) {
+                view.tilePosition.set(sprite.textureOffset.x, sprite.textureOffset.y);
+                meta.textureOffsetX = sprite.textureOffset.x;
+                meta.textureOffsetY = sprite.textureOffset.y;
+            }
+        }
     }
 }

package/build/contrib/systems/renderer/material/consts.d.ts

@@ -1,2 +1,2 @@
 export declare const DEFAULT_VERTEX_SHADER = "\n  precision mediump float;\n\n  attribute vec2 aPosition;\n  attribute vec2 aUV;\n\n  uniform mat3 uProjectionMatrix;\n  uniform mat3 uWorldTransformMatrix;\n  uniform mat3 uTransformMatrix;\n\n  varying vec2 vUV;\n\n  void main() {\n    vUV = aUV;\n\n    mat3 mvp = uProjectionMatrix * uWorldTransformMatrix * uTransformMatrix;\n    vec3 pos = mvp * vec3(aPosition, 1.0);\n    gl_Position = vec4(pos.xy, 0.0, 1.0);\n  }\n";
-export declare const DEFAULT_FRAGMENT_SHADER = "\n  precision mediump float;\n\n  varying vec2 vUV;\n\n  uniform sampler2D uSampler;\n  uniform vec3 uTint;\n  uniform float uAlpha;\n\n  void main() {\n    vec4 color = texture2D(uSampler, vUV);\n    color.rgb *= uTint;\n    color *= uAlpha;\n    gl_FragColor = color;\n  }\n";
+export declare const DEFAULT_FRAGMENT_SHADER = "\n  precision mediump float;\n\n  varying vec2 vUV;\n\n  uniform sampler2D uSampler;\n  uniform vec2 uUVOffset;\n  uniform vec2 uUVScale;\n  uniform vec3 uTint;\n  uniform float uAlpha;\n\n  void main() {\n    vec4 color = texture2D(uSampler, uUVOffset + vUV * uUVScale);\n    color.rgb *= uTint;\n    color *= uAlpha;\n    gl_FragColor = color;\n  }\n";

package/build/contrib/systems/renderer/material/consts.js

@@ -24,11 +24,13 @@ export const DEFAULT_FRAGMENT_SHADER = `
   varying vec2 vUV;
 
   uniform sampler2D uSampler;
+  uniform vec2 uUVOffset;
+  uniform vec2 uUVScale;
   uniform vec3 uTint;
   uniform float uAlpha;
 
   void main() {
-    vec4 color = texture2D(uSampler, vUV);
+    vec4 color = texture2D(uSampler, uUVOffset + vUV * uUVScale);
     color.rgb *= uTint;
     color *= uAlpha;
     gl_FragColor = color;

package/build/contrib/systems/renderer/material/index.js

@@ -35,7 +35,9 @@ export class MaterialSystem {
                     uTime: { value: 0.0, type: 'f32' },
                     uTint: { value: [1.0, 1.0, 1.0], type: 'vec3<f32>' },
                     uAlpha: { value: 1.0, type: 'f32' },
-                    uTextureSize: { value: [0.0, 0.0], type: 'vec2<f32>' },
+                    uFrameSize: { value: [0.0, 0.0], type: 'vec2<f32>' },
+                    uUVOffset: { value: [0.0, 0.0], type: 'vec2<f32>' },
+                    uUVScale: { value: [1.0, 1.0], type: 'vec2<f32>' },
                     ...(config && builder?.uniforms?.(config.options)),
                 },
             },
@@ -78,10 +80,14 @@ export class MaterialSystem {
                 .setValue(tint)
                 .toRgbArray([]);
         }
-        view.shader.resources.uniformsGroup.uniforms.uTextureSize[0] =
-            view.texture.source.width;
-        view.shader.resources.uniformsGroup.uniforms.uTextureSize[1] =
-            view.texture.source.height;
+        if (meta.materialTexture !== view.texture) {
+            meta.materialTexture = view.texture;
+            const { uvs, frame } = view.texture;
+            const uniforms = view.shader.resources.uniformsGroup.uniforms;
+            uniforms.uUVOffset = [uvs.x0, uvs.y0];
+            uniforms.uUVScale = [uvs.x1 - uvs.x0, uvs.y2 - uvs.y0];
+            uniforms.uFrameSize = [frame.width, frame.height];
+        }
         if (!material || !builder) {
             return;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dacha",
-  "version": "0.18.0",
+  "version": "0.18.1",
   "main": "./build/index.js",
   "types": "./build/index.d.ts",
   "exports": {