@canvasengine/presets 2.0.0-beta.2 → 2.0.0-beta.21

package/src/Tilemap/TileLayer.ts

@@ -0,0 +1,146 @@
+import {
+  CompositeTilemap,
+  POINT_STRUCT_SIZE,
+  Tilemap,
+  settings,
+} from "@canvasengine/tilemap";
+import { Layer, Tile as TileClass } from "@rpgjs/tiled";
+import {
+  createComponent,
+  registerComponent,
+  DisplayObject,
+  Signal,
+} from "canvasengine";
+import { Tile } from "./Tile";
+import { TileSet } from "./TileSet";
+import { Subscription } from "rxjs";
+
+settings.use32bitIndex = true;
+
+export class CanvasTileLayer extends DisplayObject(CompositeTilemap) {
+  private _tiles: any = {};
+  tiles: (TileClass | null)[];
+  private _layer: any; // TODO: fix this, remove any. replace with Layer
+  private frameTile: number = 0;
+  private frameRateAnimation: number = 10;
+  private subscriptionTick: Subscription;
+
+  static findTileSet(gid: number, tileSets: TileSet[]) {
+    let tileset: TileSet | undefined;
+    for (let i = tileSets.length - 1; i >= 0; i--) {
+      tileset = tileSets[i];
+      if (tileset.firstgid && tileset.firstgid <= gid) {
+        break;
+      }
+    }
+    return tileset;
+  }
+
+  /** @internal */
+  createTile(x: number, y: number, options: any = {}): Tile | undefined {
+    const { real, filter } = options;
+    const { tilewidth, tileheight, width } = this._layer;
+    if (real) {
+      x = Math.floor(x / tilewidth);
+      y = Math.floor(y / tileheight);
+    }
+    const i = x + y * width;
+    const tiledTile = this._layer.getTileByIndex(i);
+
+    if (!tiledTile || (tiledTile && tiledTile.gid == 0)) return;
+
+    const tileset = CanvasTileLayer.findTileSet(tiledTile.gid, this.tileSets);
+
+    if (!tileset) return;
+
+    const tile = new Tile(tiledTile, tileset);
+
+    tile.x = x * tilewidth;
+    tile.y = y * tileheight + (tileheight - tile.texture.height);
+
+    tile._x = x;
+    tile._y = y;
+
+    if (tileset.tileoffset) {
+      tile.x += tileset.tileoffset.x ?? 0;
+      tile.y += tileset.tileoffset.y ?? 0;
+    }
+
+    if (filter) {
+      const ret = filter(tile);
+      if (!ret) return;
+    }
+
+    return tile;
+  }
+
+  private _addFrame(tile: Tile, x: number, y: number) {
+    const frame = this.tile(tile.texture, tile.x, tile.y, {
+      rotate: tile.texture.rotate,
+    });
+    // const pb = this.pointsBuf
+    // if (!pb) return null
+    // tile.pointsBufIndex = pb.length - POINT_STRUCT_SIZE
+    tile.setAnimation(frame);
+    this._tiles[x + ";" + y] = tile;
+  }
+
+  async onMount(args) {
+    const { props } = args;
+
+    this.tileSets = props.tilesets;
+    this._layer = new Layer(
+      {
+        ...props,
+      },
+      this.tileSets
+    );
+
+    const tick: Signal = props.context.tick;
+
+    this.subscriptionTick = tick.observable.subscribe(({ value }) => {
+        if (value.frame % this.frameRateAnimation == 0) {
+            this.tileAnim = [this.frameTile, this.frameTile];
+            this.frameTile++
+         }
+    });
+
+    super.onMount(args);
+  }
+
+  onUpdate(props) {
+    super.onUpdate(props);
+    if (!this.isMounted) return;
+    if (props.tileheight) this._layer.tileheight = props.tileheight;
+    if (props.tilewidth) this._layer.tilewidth = props.tilewidth;
+    if (props.width) this._layer.width = props.width;
+    if (props.height) this._layer.height = props.height;
+    if (props.parallaxX) this._layer.parallaxX = props.parallaxx;
+    if (props.parallaxY) this._layer.parallaxY = props.parallaxy;
+
+    this.removeChildren();
+
+    for (let y = 0; y < this._layer.height; y++) {
+      for (let x = 0; x < this._layer.width; x++) {
+        const tile = this.createTile(x, y);
+        if (tile) {
+          this._addFrame(tile, x, y);
+        }
+      }
+    }
+  }
+
+  async onDestroy(parent: any) {
+    this.subscriptionTick.unsubscribe();
+    await super.onDestroy(parent);
+  }
+}
+
+// @ts-ignore
+export interface CanvasTileLayer extends CompositeTilemap {}
+
+registerComponent("CompositeTileLayer", CanvasTileLayer);
+
+export function CompositeTileLayer(props) {
+  return createComponent("CompositeTileLayer", props);
+}

package/src/Tilemap/TileSet.ts

@@ -0,0 +1,41 @@
+import { TiledTileset, Tileset as TiledTilesetClass } from "@rpgjs/tiled";
+import { Assets, Rectangle, Texture } from "pixi.js";
+
+export class TileSet extends TiledTilesetClass {
+  public textures: Texture[] = [];
+  private tileGroups = {};
+
+  constructor(tileSet: TiledTileset) {
+    super(tileSet);
+  }
+
+  loadGroup() {
+    // for (let tile of this.tileset.tiles) {
+    // }
+  }
+
+  /** @internal */
+  async load(image: string) {
+    const texture = await Assets.load(image);
+    for (
+      let y = this.margin;
+      y < this.image.height;
+      y += this.tileheight + this.spacing
+    ) {
+      for (
+        let x = this.margin;
+        x < this.image.width;
+        x += this.tilewidth + this.spacing
+      ) {
+        this.textures.push(
+          new Texture({
+            source: texture.source,
+            frame: new Rectangle(+x, +y, +this.tilewidth, +this.tileheight),
+          })
+        );
+      }
+    }
+    this.loadGroup();
+    return this;
+  }
+}

package/src/Tilemap/index.ts

@@ -0,0 +1,222 @@
+import { TiledLayer, TiledLayerType, TiledMap, TiledParserFile, TiledTileset } from "@rpgjs/tiled"
+import { loop, h, Container, TilingSprite, useProps, effect, signal } from "canvasengine"
+import { CompositeTileLayer } from "./TileLayer"
+import { TileSet } from "./TileSet"
+
+/**
+ * Reorganizes tile layers based on the z property of tiles
+ * 
+ * This function analyzes each tile in the layer data and groups them by their z property.
+ * If a tile has a z property different from 0, it creates new layers for each z value.
+ * 
+ * @param {TiledLayer[]} originalLayers - The original layers from the tilemap
+ * @param {TileSet[]} tilesets - Array of loaded tilesets
+ * @param {TiledMap} mapData - The complete map data
+ * @returns {TiledLayer[]} - Reorganized layers with tiles grouped by z property
+ * 
+ * @example
+ * ```typescript
+ * const reorganizedLayers = reorganizeLayersByTileZ(mapData.layers, tilesets, mapData);
+ * ```
+ */
+function reorganizeLayersByTileZ(originalLayers: TiledLayer[], tilesets: TileSet[], mapData: TiledMap): TiledLayer[] {
+    const reorganizedLayers: TiledLayer[] = [];
+    
+    for (const layer of originalLayers) {
+        if (layer.type !== TiledLayerType.Tile) {
+            // Keep non-tile layers as they are
+            reorganizedLayers.push(layer);
+            continue;
+        }
+
+        // Group tiles by their z property
+        const layersByZ = new Map<number, number[]>();
+        
+        // Initialize empty arrays for all z values we'll find
+        // Don't pre-populate with original data anymore
+        
+        // Ensure layer data is number array
+        let layerData: number[];
+        if (Array.isArray(layer.data)) {
+            layerData = layer.data.map(gid => {
+                if (typeof gid === 'number') {
+                    return gid;
+                } else {
+                    return parseInt(String(gid), 10);
+                }
+            });
+        } else {
+            // If data is a string, it might be compressed - for now, skip this layer
+            reorganizedLayers.push(layer);
+            continue;
+        }
+        
+        let tilesProcessed = 0;
+        let tilesWithZ = 0;
+        
+        // Analyze each tile in the layer
+        for (let i = 0; i < layerData.length; i++) {
+            const gid = layerData[i];
+            
+            if (gid === 0) continue; // Empty tile
+            
+            tilesProcessed++;
+            
+            // Find the corresponding tileset
+            let tileset: TileSet | undefined;
+            for (let j = tilesets.length - 1; j >= 0; j--) {
+                if (tilesets[j].firstgid && tilesets[j].firstgid <= gid) {
+                    tileset = tilesets[j];
+                    break;
+                }
+            }
+            
+            if (!tileset) {
+                // If no tileset found, put tile in z=0 layer
+                if (!layersByZ.has(0)) {
+                    layersByZ.set(0, new Array(layerData.length).fill(0));
+                }
+                layersByZ.get(0)![i] = gid;
+                continue;
+            }
+            
+            // Get tile properties from tileset
+            const localTileId = gid - tileset.firstgid;
+            // @ts-ignore
+            const tileProperties = tileset.tileset.tiles?.[localTileId]?.properties;
+            const zValue = tileProperties?.z ?? 0;
+            
+            // Count tiles with explicit z property
+            if (tileProperties?.z !== undefined) {
+                tilesWithZ++;
+            }
+            
+            // Create or get the layer for this z value
+            if (!layersByZ.has(zValue)) {
+                layersByZ.set(zValue, new Array(layerData.length).fill(0));
+            }
+            
+            // Place tile in the appropriate z layer
+            layersByZ.get(zValue)![i] = gid;
+        }
+        
+        // Create layers for each z value, ensuring z=0 comes first
+        const sortedZValues = Array.from(layersByZ.keys()).sort((a, b) => a - b);
+        
+        for (const zValue of sortedZValues) {
+            const layerDataForZ = layersByZ.get(zValue)!;
+            
+            // Only create layer if it has tiles
+            if (layerDataForZ.some(gid => gid !== 0)) {
+                const newLayer = {
+                    ...layer,
+                    name: `${layer.name}_z${zValue}`, // Always add _z suffix
+                    data: layerDataForZ,
+                    properties: {
+                        ...layer.properties,
+                        z: zValue
+                    }
+                };
+                
+                reorganizedLayers.push(newLayer);
+            }
+        }
+    }
+    
+    // Sort final layers to ensure z=0 layers come first, then by z value
+    reorganizedLayers.sort((a, b) => {
+        const zA = a.properties?.z ?? 0.5;
+        const zB = b.properties?.z ?? 0.5;
+        return zA - zB;
+    });
+    
+    return reorganizedLayers;
+}
+
+export function TiledMap(props) {
+    const { map, basePath, createLayersPerTilesZ } = useProps(props, {
+        createLayersPerTilesZ: false,
+        basePath: ''
+    })
+    const layers = signal<TiledLayer[]>([])
+    const objectLayer = props.objectLayer
+    let tilesets: TileSet[] = []
+    let mapData: TiledMap = {} as TiledMap
+
+    const parseTmx = async (file: string, relativePath: string = '') => {
+        if (typeof file !== 'string') {
+            return file
+        }
+        // @ts-ignore
+        const parser = new TiledParserFile(
+            file,
+            {
+                basePath: '',
+                staticDir: '',
+                relativePath
+            }
+        )
+        const data = await parser.parseFilePromise({
+            getOnlyBasename: false
+        })
+
+        return data
+    }
+
+    effect(async () => {
+        const _map = map()
+        if (_map) {
+            mapData = await parseTmx(_map, basePath())
+            tilesets = [] // Reset tilesets array
+            for (let tileSet of mapData.tilesets) {
+                // @ts-ignore
+                if (tileSet.tile) tileSet.tiles = tileSet.tile
+                if (!tileSet.tiles) tileSet.tiles = []
+                tilesets.push(await new TileSet(tileSet).load(tileSet.image.source))
+            }
+            
+            // Reorganize layers by tile z property if enabled
+            let finalLayers = mapData.layers;
+            if (createLayersPerTilesZ()) {
+                finalLayers = reorganizeLayersByTileZ(mapData.layers, tilesets, mapData);
+            }
+            
+            layers.set(finalLayers)
+        }
+    })
+
+    const createLayer = (layers, props = {}) => {
+        return h(Container, props, loop<any>(layers, (layer) => {
+            switch (layer.type) {
+                case TiledLayerType.Tile:
+                    return h(CompositeTileLayer, {
+                        tilewidth: mapData.tilewidth,
+                        tileheight: mapData.tileheight,
+                        // @ts-ignore
+                        width: mapData.width,
+                        // @ts-ignore
+                        height: mapData.height,
+                        ...layer,
+                        tilesets
+                    })
+                case TiledLayerType.Image:
+                    const { width, height, source } = layer.image
+                    return h(TilingSprite, {
+                        image: source,
+                        ...layer,
+                        width: layer.repeatx ? layer.width * layer.tilewidth : width,
+                        height: layer.repeaty ? layer.height * layer.tileheight : height
+                    })
+                case TiledLayerType.Group:
+                    return createLayer(signal(layer.layers), layer)
+                case TiledLayerType.ObjectGroup:
+                    const child = objectLayer?.(layer)
+                    return h(Container, layer, child)
+                default:
+                    return h(Container)
+            }
+        }))
+    }
+
+    return h(Container, props, createLayer(layers))
+}

package/src/Weathers/index.ts

@@ -0,0 +1,224 @@
+import {
+  tick,
+  useProps,
+  h,
+  Mesh,
+  signal,
+} from "canvasengine";
+import { Geometry, Shader, GlProgram, UniformGroup } from "pixi.js";
+
+/**
+ * Weather Effect Component
+ * 
+ * Creates a realistic rain effect using WebGL shaders with customizable parameters.
+ * The effect simulates raindrops falling with wind influence, density control, and speed adjustment.
+ * 
+ * ## Design
+ * 
+ * The component uses a fragment shader to generate procedural rain drops with:
+ * - **Procedural generation**: Each raindrop is generated using hash functions for randomness
+ * - **Wind simulation**: Raindrops are affected by wind direction and strength as they fall
+ * - **Density control**: Number of visible raindrops can be adjusted
+ * - **Speed variation**: Each drop has slightly different falling speed for realism
+ * - **Visual styling**: Zelda-inspired rain appearance with proper fade effects
+ * 
+ * @param {Object} options - Configuration options for the weather effect
+ * @param {number} [options.speed=0.5] - Rain falling speed (0.1 = slow, 2.0 = fast)
+ * @param {number} [options.windDirection=0.0] - Wind direction (-1.0 = left, 1.0 = right)
+ * @param {number} [options.windStrength=0.2] - Wind strength (0.0 = no wind, 1.0 = strong)
+ * @param {number} [options.density=180.0] - Rain density (number of raindrops, 50-400)
+ * @param {Array<number>} [options.resolution=[1000, 1000]] - Screen resolution for proper scaling
+ * 
+ * @example
+ * ```jsx
+ * // Basic usage with default settings
+ * <Weather />
+ * 
+ * // Customized heavy rain with strong wind
+ * <Weather 
+ *   speed={1.5}
+ *   windDirection={0.8}
+ *   windStrength={0.6}
+ *   density={300}
+ * />
+ * 
+ * // Light drizzle
+ * <Weather 
+ *   speed={0.2}
+ *   density={80}
+ *   windStrength={0.1}
+ * />
+ * 
+ * // Using signals for dynamic control
+ * const rainSpeed = signal(0.5);
+ * const windDir = signal(0.0);
+ * 
+ * <Weather 
+ *   speed={rainSpeed}
+ *   windDirection={windDir}
+ * />
+ * ```
+ * 
+ * @returns {JSX.Element} A mesh component with the weather shader effect
+ */
+export const WeatherEffect = (options) => {
+  const { 
+    speed = signal(0.5),
+    windDirection = signal(0.0),
+    windStrength = signal(0.2),
+    density = signal(180.0),
+    resolution = signal([1000, 1000])
+  } = useProps(options);
+
+  // Convert to signals if not already
+  const speedSignal = typeof speed === 'function' ? speed : signal(speed);
+  const windDirectionSignal = typeof windDirection === 'function' ? windDirection : signal(windDirection);
+  const windStrengthSignal = typeof windStrength === 'function' ? windStrength : signal(windStrength);
+  const densitySignal = typeof density === 'function' ? density : signal(density);
+  const resolutionSignal = typeof resolution === 'function' ? resolution : signal(resolution);
+
+  // Vertex shader - handles vertex positioning and UV mapping
+  const vertexSrc = /* glsl */ `
+          precision mediump float;
+          attribute vec2 aPosition;
+          attribute vec2 aUV;
+          varying   vec2 vUV;
+          void main() {
+              vUV = aUV;
+              gl_Position = vec4(aPosition, 0.0, 1.0);
+          }
+      `;
+
+  // Fragment shader - generates the rain effect
+  const fragmentSrc = /* glsl */ `
+          precision mediump float;
+          varying vec2 vUV;
+          uniform float uTime;
+          uniform vec2  uResolution;
+          uniform float uRainSpeed;
+          uniform float uWindDirection;
+          uniform float uWindStrength;
+          uniform float uRainDensity;
+    
+          // Hash function for pseudo-random number generation
+          float hash(float n){ return fract(sin(n)*43758.5453); }
+    
+          // Generate a single raindrop at given UV coordinates
+          float rainDrop(vec2 uv, float t, float seed) {
+              // Random X position with wider coverage for screen edges
+              float x = hash(seed) * 2.4 - 1.2;
+              
+              // Falling speed with variation per drop
+              float baseSpeed = 1.0 + hash(seed + 1.0) * 1.5;
+              float speed = baseSpeed * uRainSpeed;
+              
+              // Y position falling from top (1.0) to bottom (-1.0)
+              float y = 1.2 - fract(t * speed + hash(seed + 2.0)) * 2.4;
+              
+              // Wind effect: more drift as drop falls further
+              float fallProgress = (1.2 - y) / 2.4; // 0 = top, 1 = bottom
+              float windOffset = uWindDirection * uWindStrength * fallProgress * 0.5;
+              x += windOffset;
+              
+              vec2 dropPos = vec2(x, y);
+              vec2 diff = uv - dropPos;
+              
+              // Raindrop shape (thin streaks)
+              float dropWidth = 0.0015 + hash(seed + 3.0) * 0.0005;
+              float dropLength = 0.025 + hash(seed + 4.0) * 0.015;
+              
+              // Slight tilt based on wind
+              float windAngle = uWindDirection * uWindStrength * 0.2;
+              float cosA = cos(windAngle);
+              float sinA = sin(windAngle);
+              vec2 rotatedDiff = vec2(
+                  diff.x * cosA - diff.y * sinA,
+                  diff.x * sinA + diff.y * cosA
+              );
+              
+              // Distance calculation for thin streaks
+              float distX = abs(rotatedDiff.x) / dropWidth;
+              float distY = abs(rotatedDiff.y) / dropLength;
+              float dist = max(distX, distY * 0.4);
+              
+              // Intensity with fade and variation (Zelda-style)
+              float intensity = 1.0 - smoothstep(0.0, 1.2, dist);
+              intensity *= 0.7 + 0.3 * hash(seed + 5.0);
+              
+              // Natural fade at top and bottom edges
+              intensity *= smoothstep(-1.2, -0.8, y) * smoothstep(1.2, 0.8, y);
+              
+              return intensity;
+          }
+    
+          void main(){
+              // Normalized UV coordinates centered on screen
+              vec2 uv = (gl_FragCoord.xy - 0.5 * uResolution.xy) / min(uResolution.x, uResolution.y);
+              
+              float rain = 0.0;
+              
+              // Generate multiple raindrops
+              for(float i = 0.0; i < 200.0; i++) {
+                  rain += rainDrop(uv, uTime, i * 12.34);
+              }
+              
+              // Adjust intensity based on density setting
+              rain *= (uRainDensity / 200.0);
+              
+              // Zelda-style rain color (bright and visible)
+              vec3 rainColor = vec3(0.85, 0.9, 1.0);
+              
+              gl_FragColor = vec4(rainColor * rain, rain * 0.8);
+          }
+      `;
+
+  // Create WebGL program
+  const glProgram = new GlProgram({ vertex: vertexSrc, fragment: fragmentSrc });
+
+  // Uniform group for shader parameters
+  const uniformGroup = new UniformGroup({
+    uTime: { value: 0, type: "f32" },
+    uResolution: { value: resolutionSignal(), type: "vec2<f32>" },
+    uRainSpeed: { value: speedSignal(), type: "f32" },
+    uWindDirection: { value: windDirectionSignal(), type: "f32" },
+    uWindStrength: { value: windStrengthSignal(), type: "f32" },
+    uRainDensity: { value: densitySignal(), type: "f32" },
+  });
+
+  // Create shader with program and resources
+  const shader = new Shader({
+    glProgram,
+    resources: {
+      uniforms: uniformGroup,
+    },
+  });
+
+  // Full-screen quad geometry
+  const geometry = new Geometry({
+    attributes: {
+      aPosition: [-1, -1, 1, -1, 1, 1, -1, 1],
+      aUV: [0, 0, 1, 0, 1, 1, 0, 1],
+    },
+    indexBuffer: [0, 1, 2, 0, 2, 3],
+  });
+
+  // Animation loop - update time and reactive uniforms
+  tick(({ deltaTime }) => {
+    uniformGroup.uniforms.uTime += deltaTime;
+    
+    // Update uniforms from signals
+    uniformGroup.uniforms.uRainSpeed = speedSignal();
+    uniformGroup.uniforms.uWindDirection = windDirectionSignal();
+    uniformGroup.uniforms.uWindStrength = windStrengthSignal();
+    uniformGroup.uniforms.uRainDensity = densitySignal();
+    uniformGroup.uniforms.uResolution = resolutionSignal();
+  });
+
+  return h(Mesh, {
+    geometry,
+    shader,
+  });
+};
+
+// Export as Weather for easier usage
+export const Weather = WeatherEffect;

package/src/index.ts

@@ -1,4 +1,6 @@
 export * from './Bar'
 export * from './Particle'
 export * from './NightAmbiant'
-export * from './Joystick'
+export * from './Joystick'
+export * from './Tilemap'
+export * from './Weathers'