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

package/dist/index.js

@@ -0,0 +1,956 @@
+// src/Bar.ts
+import { Graphics, h, useProps } from "canvasengine";
+function componentToHex(c) {
+  var hex = c.toString(16);
+  return hex.length == 1 ? "0" + hex : hex;
+}
+function rgbToHex(r, g, b) {
+  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
+}
+function Bar(opts) {
+  const {
+    width,
+    height,
+    value,
+    maxValue,
+    backgroundColor,
+    foregroundColor,
+    border,
+    innerMargin,
+    borderRadius
+  } = useProps(opts, {
+    backgroundColor: "#000000",
+    foregroundColor: "#FFFFFF",
+    innerMargin: 0,
+    borderRadius: 0
+  });
+  return h(
+    Graphics,
+    {
+      ...opts,
+      width,
+      height,
+      draw(graphics) {
+        if (borderRadius()) {
+          graphics.roundRect(0, 0, width(), height(), borderRadius());
+        } else {
+          graphics.rect(0, 0, width(), height());
+        }
+        if (border) {
+          graphics.stroke(border);
+        }
+        graphics.fill(backgroundColor());
+      }
+    },
+    h(Graphics, {
+      width,
+      height,
+      draw(graphics) {
+        const margin = innerMargin();
+        const _borderRadius = borderRadius();
+        const w = Math.max(
+          0,
+          Math.min(
+            width() - 2 * margin,
+            value() / maxValue() * (width() - 2 * margin)
+          )
+        );
+        const h7 = height() - 2 * margin;
+        if (borderRadius) {
+          graphics.roundRect(margin, margin, w, h7, _borderRadius);
+        } else {
+          graphics.rect(margin, margin, w, h7);
+        }
+        const color = foregroundColor();
+        if (color.startsWith("rgba")) {
+          const [r, g, b, a] = color.match(/\d+(\.\d+)?/g).map(Number);
+          graphics.fill({ color: rgbToHex(r, g, b), alpha: a });
+        } else {
+          graphics.fill(color);
+        }
+      }
+    })
+  );
+}
+
+// src/Particle.ts
+import * as PIXI from "pixi.js";
+import { FX } from "revolt-fx";
+import { h as h2, mount, tick, Container, on, useProps as useProps2 } from "canvasengine";
+function Particle(options) {
+  const { emit, settings: settings2 = {} } = options;
+  const { name } = useProps2(options);
+  const fx = new FX();
+  let element;
+  PIXI.Assets.add({ alias: "fx_settings", src: "/default-bundle.json" });
+  PIXI.Assets.add({
+    alias: "fx_spritesheet",
+    src: "/revoltfx-spritesheet.json"
+  });
+  tick(({ deltaRatio }) => {
+    fx.update(deltaRatio);
+  });
+  mount(async (_element) => {
+    element = _element;
+    const data = await PIXI.Assets.load(["fx_settings", "fx_spritesheet"]);
+    let fxSettings = { ...data.fx_settings };
+    if (settings2.emitters) {
+      const lastId = 1e4;
+      const emittersWithIds = settings2.emitters.map((emitter, index) => ({
+        ...emitter,
+        id: lastId + index
+      }));
+      fxSettings.emitters = [
+        ...fxSettings.emitters,
+        ...emittersWithIds
+      ];
+    }
+    fx.initBundle(fxSettings, true);
+  });
+  on(emit, () => {
+    const emitter = fx.getParticleEmitter(name());
+    emitter.init(element.componentInstance);
+  });
+  return h2(Container);
+}
+
+// src/NightAmbiant.ts
+import { Container as Container2, Graphics as Graphics2, h as h3, mount as mount2, useProps as useProps3, animatedSignal, RadialGradient, effect, isSignal, signal, isObservable } from "canvasengine";
+function LightSpot(opts) {
+  const { radius } = useProps3(opts);
+  const scale = animatedSignal(1);
+  const minScale = 1;
+  const maxScale = 2;
+  const scintillationSpeed = 1e-3;
+  const animate = () => {
+    const time = Date.now() * scintillationSpeed;
+    const scintillationFactor = (Math.sin(time) + Math.sin(time * 1.3) + Math.sin(time * 0.7)) / 3;
+    const newScale = minScale + (maxScale - minScale) * (scintillationFactor * 0.5 + 0.5);
+    scale.update(() => newScale);
+    requestAnimationFrame(animate);
+  };
+  animate();
+  const draw = (g) => {
+    const size = radius() * 2;
+    const gradient = new RadialGradient(size, size, 0, size, size, 0);
+    gradient.addColorStop(0, "rgba(255, 255, 0, 1)");
+    gradient.addColorStop(0.5, "rgba(255, 255, 0, 0.3)");
+    gradient.addColorStop(0.8, "rgba(255, 255, 0, 0)");
+    const translate = size / 2;
+    g.rect(-translate, -translate, size, size).fill(
+      gradient.render({ translate: { x: translate, y: translate } })
+    );
+  };
+  return h3(Graphics2, {
+    draw,
+    ...opts,
+    scale
+  });
+}
+function NightAmbiant(props) {
+  const { children } = props;
+  let el;
+  const width = signal(0);
+  const height = signal(0);
+  let subscription;
+  const draw = (rectAndHole) => {
+    const margin = 80;
+    rectAndHole.rect(-margin, -margin, width() + margin * 2, height() + margin * 2);
+    rectAndHole.fill(0);
+    const applyChildren = (child) => {
+      const x = isSignal(child.propObservables.x) ? child.propObservables.x() : child.props.x;
+      const y = isSignal(child.propObservables.y) ? child.propObservables.y() : child.props.y;
+      const radius = isSignal(child.propObservables.radius) ? child.propObservables.radius() : child.props.radius;
+      rectAndHole.circle(x, y, radius);
+      rectAndHole.cut();
+    };
+    for (let child of children) {
+      if (isObservable(child)) {
+        if (subscription) {
+          subscription.unsubscribe();
+        }
+        subscription = child.subscribe((event) => {
+          for (let child2 of event.fullElements) {
+            applyChildren(child2);
+          }
+        });
+        return;
+      }
+      applyChildren(child);
+    }
+  };
+  mount2((el2) => {
+    effect(() => {
+      const { displayWidth, displayHeight } = el2.componentInstance;
+      const w = +displayWidth();
+      const h7 = +displayHeight();
+      setTimeout(() => {
+        width.update(() => w);
+        height.update(() => h7);
+      }, 0);
+    });
+  });
+  return h3(
+    Container2,
+    {
+      width: "100%",
+      height: "100%",
+      ...props
+    },
+    h3(Graphics2, {
+      draw,
+      alpha: 0.8,
+      blur: 80
+    }),
+    ...children
+  );
+}
+
+// src/Joystick.ts
+import * as PIXI2 from "pixi.js";
+import { Container as Container3, Graphics as Graphics3, Sprite, h as h4, signal as signal2 } from "canvasengine";
+var Direction = /* @__PURE__ */ ((Direction2) => {
+  Direction2["LEFT"] = "left";
+  Direction2["TOP"] = "top";
+  Direction2["BOTTOM"] = "bottom";
+  Direction2["RIGHT"] = "right";
+  Direction2["TOP_LEFT"] = "top_left";
+  Direction2["TOP_RIGHT"] = "top_right";
+  Direction2["BOTTOM_LEFT"] = "bottom_left";
+  Direction2["BOTTOM_RIGHT"] = "bottom_right";
+  return Direction2;
+})(Direction || {});
+function Joystick(opts = {}) {
+  const settings2 = Object.assign(
+    {
+      outerScale: { x: 1, y: 1 },
+      innerScale: { x: 1, y: 1 }
+    },
+    opts
+  );
+  let outerRadius = 70;
+  let innerRadius = 10;
+  const innerAlphaStandby = 0.5;
+  let dragging = false;
+  let startPosition = null;
+  let power = 0;
+  const innerPositionX = signal2(0);
+  const innerPositionY = signal2(0);
+  const innerAlpha = signal2(innerAlphaStandby);
+  function getPower(centerPoint) {
+    const a = centerPoint.x - 0;
+    const b = centerPoint.y - 0;
+    return Math.min(1, Math.sqrt(a * a + b * b) / outerRadius);
+  }
+  function getDirection(center) {
+    let rad = Math.atan2(center.y, center.x);
+    if (rad >= -Math.PI / 8 && rad < 0 || rad >= 0 && rad < Math.PI / 8) {
+      return "right" /* RIGHT */;
+    } else if (rad >= Math.PI / 8 && rad < 3 * Math.PI / 8) {
+      return "bottom_right" /* BOTTOM_RIGHT */;
+    } else if (rad >= 3 * Math.PI / 8 && rad < 5 * Math.PI / 8) {
+      return "bottom" /* BOTTOM */;
+    } else if (rad >= 5 * Math.PI / 8 && rad < 7 * Math.PI / 8) {
+      return "bottom_left" /* BOTTOM_LEFT */;
+    } else if (rad >= 7 * Math.PI / 8 && rad < Math.PI || rad >= -Math.PI && rad < -7 * Math.PI / 8) {
+      return "left" /* LEFT */;
+    } else if (rad >= -7 * Math.PI / 8 && rad < -5 * Math.PI / 8) {
+      return "top_left" /* TOP_LEFT */;
+    } else if (rad >= -5 * Math.PI / 8 && rad < -3 * Math.PI / 8) {
+      return "top" /* TOP */;
+    } else {
+      return "top_right" /* TOP_RIGHT */;
+    }
+  }
+  function handleDragStart(event) {
+    startPosition = event.getLocalPosition(this);
+    dragging = true;
+    innerAlpha.set(1);
+    settings2.onStart?.();
+  }
+  function handleDragEnd() {
+    if (!dragging) return;
+    innerPositionX.set(0);
+    innerPositionY.set(0);
+    dragging = false;
+    innerAlpha.set(innerAlphaStandby);
+    settings2.onEnd?.();
+  }
+  function handleDragMove(event) {
+    if (dragging == false) {
+      return;
+    }
+    let newPosition = event.getLocalPosition(this);
+    let sideX = newPosition.x - (startPosition?.x ?? 0);
+    let sideY = newPosition.y - (startPosition?.y ?? 0);
+    let centerPoint = new PIXI2.Point(0, 0);
+    let angle = 0;
+    if (sideX == 0 && sideY == 0) {
+      return;
+    }
+    let calRadius = 0;
+    if (sideX * sideX + sideY * sideY >= outerRadius * outerRadius) {
+      calRadius = outerRadius;
+    } else {
+      calRadius = outerRadius - innerRadius;
+    }
+    let direction = "left" /* LEFT */;
+    if (sideX == 0) {
+      if (sideY > 0) {
+        centerPoint.set(0, sideY > outerRadius ? outerRadius : sideY);
+        angle = 270;
+        direction = "bottom" /* BOTTOM */;
+      } else {
+        centerPoint.set(
+          0,
+          -(Math.abs(sideY) > outerRadius ? outerRadius : Math.abs(sideY))
+        );
+        angle = 90;
+        direction = "top" /* TOP */;
+      }
+      innerPositionX.set(centerPoint.x);
+      innerPositionY.set(centerPoint.y);
+      power = getPower(centerPoint);
+      settings2.onChange?.({ angle, direction, power });
+      return;
+    }
+    if (sideY == 0) {
+      if (sideX > 0) {
+        centerPoint.set(
+          Math.abs(sideX) > outerRadius ? outerRadius : Math.abs(sideX),
+          0
+        );
+        angle = 0;
+        direction = "left" /* LEFT */;
+      } else {
+        centerPoint.set(
+          -(Math.abs(sideX) > outerRadius ? outerRadius : Math.abs(sideX)),
+          0
+        );
+        angle = 180;
+        direction = "right" /* RIGHT */;
+      }
+      innerPositionX.set(centerPoint.x);
+      innerPositionY.set(centerPoint.y);
+      power = getPower(centerPoint);
+      settings2.onChange?.({ angle, direction, power });
+      return;
+    }
+    let tanVal = Math.abs(sideY / sideX);
+    let radian = Math.atan(tanVal);
+    angle = radian * 180 / Math.PI;
+    let centerX = 0;
+    let centerY = 0;
+    if (sideX * sideX + sideY * sideY >= outerRadius * outerRadius) {
+      centerX = outerRadius * Math.cos(radian);
+      centerY = outerRadius * Math.sin(radian);
+    } else {
+      centerX = Math.abs(sideX) > outerRadius ? outerRadius : Math.abs(sideX);
+      centerY = Math.abs(sideY) > outerRadius ? outerRadius : Math.abs(sideY);
+    }
+    if (sideY < 0) {
+      centerY = -Math.abs(centerY);
+    }
+    if (sideX < 0) {
+      centerX = -Math.abs(centerX);
+    }
+    if (sideX > 0 && sideY < 0) {
+    } else if (sideX < 0 && sideY < 0) {
+      angle = 180 - angle;
+    } else if (sideX < 0 && sideY > 0) {
+      angle = angle + 180;
+    } else if (sideX > 0 && sideY > 0) {
+      angle = 360 - angle;
+    }
+    centerPoint.set(centerX, centerY);
+    power = getPower(centerPoint);
+    direction = getDirection(centerPoint);
+    innerPositionX.set(centerPoint.x);
+    innerPositionY.set(centerPoint.y);
+    settings2.onChange?.({ angle, direction, power });
+  }
+  let innerElement;
+  let outerElement;
+  if (!settings2.outer) {
+    outerElement = h4(Graphics3, {
+      draw: (g) => {
+        g.circle(0, 0, outerRadius).fill(0);
+      },
+      alpha: 0.5
+    });
+  } else {
+    outerElement = h4(Sprite, {
+      image: settings2.outer,
+      anchor: { x: 0.5, y: 0.5 },
+      scale: settings2.outerScale
+    });
+  }
+  const innerOptions = {
+    scale: settings2.innerScale,
+    x: innerPositionX,
+    y: innerPositionY,
+    alpha: innerAlpha
+  };
+  if (!settings2.inner) {
+    innerElement = h4(Graphics3, {
+      draw: (g) => {
+        g.circle(0, 0, innerRadius * 2.5).fill(0);
+      },
+      ...innerOptions
+    });
+  } else {
+    innerElement = h4(Sprite, {
+      image: settings2.inner,
+      anchor: { x: 0.5, y: 0.5 },
+      ...innerOptions
+    });
+  }
+  return h4(
+    Container3,
+    {
+      ...opts,
+      pointerdown: handleDragStart,
+      pointerup: handleDragEnd,
+      pointerupoutside: handleDragEnd,
+      pointermove: handleDragMove
+    },
+    outerElement,
+    innerElement
+  );
+}
+
+// src/Tilemap/index.ts
+import { TiledLayerType, TiledParserFile } from "@rpgjs/tiled";
+import { loop, h as h5, Container as Container4, TilingSprite, useProps as useProps4, effect as effect2, signal as signal3 } from "canvasengine";
+
+// src/Tilemap/TileLayer.ts
+import {
+  CompositeTilemap,
+  settings
+} from "@canvasengine/tilemap";
+import { Layer } from "@rpgjs/tiled";
+import {
+  createComponent,
+  registerComponent,
+  DisplayObject
+} from "canvasengine";
+
+// src/Tilemap/Tile.ts
+import { AnimatedSprite, groupD8 } from "pixi.js";
+var Tile = class _Tile extends AnimatedSprite {
+  constructor(tile, tileSet) {
+    super(_Tile.getTextures(tile, tileSet));
+    this.tile = tile;
+    this.tileSet = tileSet;
+    this.animations = [];
+    this._x = 0;
+    this._y = 0;
+    this.properties = {};
+    this.animations = tile.animations || [];
+    this.properties = tile.properties;
+    this.textures = _Tile.getTextures(tile, tileSet);
+    this.texture = this.textures[0];
+    this.flip();
+  }
+  static getTextures(tile, tileSet) {
+    const textures = [];
+    if (tile.animations && tile.animations.length) {
+      tile.animations.forEach((frame) => {
+        textures.push(tileSet.textures[frame.tileid]);
+      });
+    } else {
+      textures.push(tileSet.textures[tile.gid - tileSet.firstgid]);
+    }
+    return textures;
+  }
+  get z() {
+    return this.properties.z ?? 0;
+  }
+  get gid() {
+    return this.tile.gid;
+  }
+  setAnimation(frame) {
+    const size = this.animations.length;
+    if (size > 1) {
+      const offset = (this.animations[1].tileid - this.animations[0].tileid) * this.width;
+      frame.tileAnimX(offset, size);
+    }
+  }
+  flip() {
+    let symmetry;
+    let i = 0;
+    const add = (symmetrySecond) => {
+      i++;
+      if (symmetry) symmetry = groupD8.add(symmetry, symmetrySecond);
+      else symmetry = symmetrySecond;
+    };
+    if (this.tile.horizontalFlip) {
+      add(groupD8.MIRROR_HORIZONTAL);
+    }
+    if (this.tile.verticalFlip) {
+      add(groupD8.MIRROR_VERTICAL);
+    }
+    if (this.tile.diagonalFlip) {
+      if (i % 2 == 0) {
+        add(groupD8.MAIN_DIAGONAL);
+      } else {
+        add(groupD8.REVERSE_DIAGONAL);
+      }
+    }
+  }
+};
+
+// src/Tilemap/TileLayer.ts
+settings.use32bitIndex = true;
+var CanvasTileLayer = class _CanvasTileLayer extends DisplayObject(CompositeTilemap) {
+  constructor() {
+    super(...arguments);
+    this._tiles = {};
+    // TODO: fix this, remove any. replace with Layer
+    this.frameTile = 0;
+    this.frameRateAnimation = 10;
+  }
+  static findTileSet(gid, tileSets) {
+    let tileset;
+    for (let i = tileSets.length - 1; i >= 0; i--) {
+      tileset = tileSets[i];
+      if (tileset.firstgid && tileset.firstgid <= gid) {
+        break;
+      }
+    }
+    return tileset;
+  }
+  /** @internal */
+  createTile(x, y, options = {}) {
+    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;
+  }
+  _addFrame(tile, x, y) {
+    const frame = this.tile(tile.texture, tile.x, tile.y, {
+      rotate: tile.texture.rotate
+    });
+    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 tick3 = props.context.tick;
+    this.subscriptionTick = tick3.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) {
+    this.subscriptionTick.unsubscribe();
+    await super.onDestroy(parent);
+  }
+};
+registerComponent("CompositeTileLayer", CanvasTileLayer);
+function CompositeTileLayer(props) {
+  return createComponent("CompositeTileLayer", props);
+}
+
+// src/Tilemap/TileSet.ts
+import { Tileset as TiledTilesetClass } from "@rpgjs/tiled";
+import { Assets as Assets2, Rectangle, Texture as Texture2 } from "pixi.js";
+var TileSet = class extends TiledTilesetClass {
+  constructor(tileSet) {
+    super(tileSet);
+    this.textures = [];
+    this.tileGroups = {};
+  }
+  loadGroup() {
+  }
+  /** @internal */
+  async load(image) {
+    const texture = await Assets2.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 Texture2({
+            source: texture.source,
+            frame: new Rectangle(+x, +y, +this.tilewidth, +this.tileheight)
+          })
+        );
+      }
+    }
+    this.loadGroup();
+    return this;
+  }
+};
+
+// src/Tilemap/index.ts
+function reorganizeLayersByTileZ(originalLayers, tilesets, mapData) {
+  const reorganizedLayers = [];
+  for (const layer of originalLayers) {
+    if (layer.type !== TiledLayerType.Tile) {
+      reorganizedLayers.push(layer);
+      continue;
+    }
+    const layersByZ = /* @__PURE__ */ new Map();
+    let layerData;
+    if (Array.isArray(layer.data)) {
+      layerData = layer.data.map((gid) => {
+        if (typeof gid === "number") {
+          return gid;
+        } else {
+          return parseInt(String(gid), 10);
+        }
+      });
+    } else {
+      reorganizedLayers.push(layer);
+      continue;
+    }
+    let tilesProcessed = 0;
+    let tilesWithZ = 0;
+    for (let i = 0; i < layerData.length; i++) {
+      const gid = layerData[i];
+      if (gid === 0) continue;
+      tilesProcessed++;
+      let tileset;
+      for (let j = tilesets.length - 1; j >= 0; j--) {
+        if (tilesets[j].firstgid && tilesets[j].firstgid <= gid) {
+          tileset = tilesets[j];
+          break;
+        }
+      }
+      if (!tileset) {
+        if (!layersByZ.has(0)) {
+          layersByZ.set(0, new Array(layerData.length).fill(0));
+        }
+        layersByZ.get(0)[i] = gid;
+        continue;
+      }
+      const localTileId = gid - tileset.firstgid;
+      const tileProperties = tileset.tileset.tiles?.[localTileId]?.properties;
+      const zValue = tileProperties?.z ?? 0;
+      if (tileProperties?.z !== void 0) {
+        tilesWithZ++;
+      }
+      if (!layersByZ.has(zValue)) {
+        layersByZ.set(zValue, new Array(layerData.length).fill(0));
+      }
+      layersByZ.get(zValue)[i] = gid;
+    }
+    const sortedZValues = Array.from(layersByZ.keys()).sort((a, b) => a - b);
+    for (const zValue of sortedZValues) {
+      const layerDataForZ = layersByZ.get(zValue);
+      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);
+      }
+    }
+  }
+  reorganizedLayers.sort((a, b) => {
+    const zA = a.properties?.z ?? 0.5;
+    const zB = b.properties?.z ?? 0.5;
+    return zA - zB;
+  });
+  return reorganizedLayers;
+}
+function TiledMap(props) {
+  const { map, basePath, createLayersPerTilesZ } = useProps4(props, {
+    createLayersPerTilesZ: false,
+    basePath: ""
+  });
+  const layers = signal3([]);
+  const objectLayer = props.objectLayer;
+  let tilesets = [];
+  let mapData = {};
+  const parseTmx = async (file, relativePath = "") => {
+    if (typeof file !== "string") {
+      return file;
+    }
+    const parser = new TiledParserFile(
+      file,
+      {
+        basePath: "",
+        staticDir: "",
+        relativePath
+      }
+    );
+    const data = await parser.parseFilePromise({
+      getOnlyBasename: false
+    });
+    return data;
+  };
+  effect2(async () => {
+    const _map = map();
+    if (_map) {
+      mapData = await parseTmx(_map, basePath());
+      tilesets = [];
+      for (let tileSet of mapData.tilesets) {
+        if (tileSet.tile) tileSet.tiles = tileSet.tile;
+        if (!tileSet.tiles) tileSet.tiles = [];
+        tilesets.push(await new TileSet(tileSet).load(tileSet.image.source));
+      }
+      let finalLayers = mapData.layers;
+      if (createLayersPerTilesZ()) {
+        finalLayers = reorganizeLayersByTileZ(mapData.layers, tilesets, mapData);
+      }
+      layers.set(finalLayers);
+    }
+  });
+  const createLayer = (layers2, props2 = {}) => {
+    return h5(Container4, props2, loop(layers2, (layer) => {
+      switch (layer.type) {
+        case TiledLayerType.Tile:
+          return h5(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 h5(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(signal3(layer.layers), layer);
+        case TiledLayerType.ObjectGroup:
+          const child = objectLayer?.(layer);
+          return h5(Container4, layer, child);
+        default:
+          return h5(Container4);
+      }
+    }));
+  };
+  return h5(Container4, props, createLayer(layers));
+}
+
+// src/Weathers/index.ts
+import {
+  tick as tick2,
+  useProps as useProps5,
+  h as h6,
+  Mesh,
+  signal as signal4
+} from "canvasengine";
+import { Geometry, Shader, GlProgram, UniformGroup } from "pixi.js";
+var WeatherEffect = (options) => {
+  const {
+    speed = signal4(0.5),
+    windDirection = signal4(0),
+    windStrength = signal4(0.2),
+    density = signal4(180),
+    resolution = signal4([1e3, 1e3])
+  } = useProps5(options);
+  const speedSignal = typeof speed === "function" ? speed : signal4(speed);
+  const windDirectionSignal = typeof windDirection === "function" ? windDirection : signal4(windDirection);
+  const windStrengthSignal = typeof windStrength === "function" ? windStrength : signal4(windStrength);
+  const densitySignal = typeof density === "function" ? density : signal4(density);
+  const resolutionSignal = typeof resolution === "function" ? resolution : signal4(resolution);
+  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);
+          }
+      `
+  );
+  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);
+          }
+      `
+  );
+  const glProgram = new GlProgram({ vertex: vertexSrc, fragment: fragmentSrc });
+  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" }
+  });
+  const shader = new Shader({
+    glProgram,
+    resources: {
+      uniforms: uniformGroup
+    }
+  });
+  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]
+  });
+  tick2(({ deltaTime }) => {
+    uniformGroup.uniforms.uTime += deltaTime;
+    uniformGroup.uniforms.uRainSpeed = speedSignal();
+    uniformGroup.uniforms.uWindDirection = windDirectionSignal();
+    uniformGroup.uniforms.uWindStrength = windStrengthSignal();
+    uniformGroup.uniforms.uRainDensity = densitySignal();
+    uniformGroup.uniforms.uResolution = resolutionSignal();
+  });
+  return h6(Mesh, {
+    geometry,
+    shader
+  });
+};
+var Weather = WeatherEffect;
+export {
+  Bar,
+  Direction,
+  Joystick,
+  LightSpot,
+  NightAmbiant,
+  Particle,
+  TiledMap,
+  Weather,
+  WeatherEffect
+};
+//# sourceMappingURL=index.js.map