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

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Bar.ts","../src/Particle.ts","../src/NightAmbiant.ts","../src/Joystick.ts","../src/Tilemap/index.ts","../src/Tilemap/TileLayer.ts","../src/Tilemap/Tile.ts","../src/Tilemap/TileSet.ts","../src/DrawMap/index.ts"],"sourcesContent":["import { Graphics, h, useProps } from \"canvasengine\";\nimport * as PIXI from \"pixi.js\";\n\ninterface BarProps {\n  backgroundColor?: string;\n  foregroundColor?: string;\n  value: number;\n  maxValue: number;\n  width: number;\n  height: number;\n}\n\nfunction componentToHex(c) {\n  var hex = c.toString(16);\n  return hex.length == 1 ? \"0\" + hex : hex;\n}\n\nfunction rgbToHex(r, g, b) {\n  return \"#\" + componentToHex(r) + componentToHex(g) + componentToHex(b);\n}\n\nexport function Bar(opts: BarProps) {\n  const {\n    width,\n    height,\n    value,\n    maxValue,\n    backgroundColor,\n    foregroundColor,\n    border,\n    innerMargin,\n    borderRadius,\n  } = useProps(opts, {\n    backgroundColor: \"#000000\",\n    foregroundColor: \"#FFFFFF\",\n    innerMargin: 0,\n    borderRadius: 0,\n  });\n\n  return h(\n    Graphics,\n    {\n      ...opts,\n      width,\n      height,\n      draw(g: PIXI.Graphics) {\n        if (borderRadius()) {\n          g.roundRect(0, 0, width(), height(), borderRadius());\n        } else {\n          g.rect(0, 0, width(), height());\n        }\n        if (border) {\n          g.stroke(border);\n        }\n        g.fill(backgroundColor());\n      },\n    },\n    h(Graphics, {\n      width,\n      height,\n      draw(g: PIXI.Graphics) {\n        const margin = innerMargin();\n        const _borderRadius = borderRadius();\n        const w = Math.max(\n          0,\n          Math.min(\n            width() - 2 * margin,\n            (value() / maxValue()) * (width() - 2 * margin)\n          )\n        );\n        const h = height() - 2 * margin;\n        if (borderRadius) {\n          g.roundRect(margin, margin, w, h, _borderRadius);\n        } else {\n          g.rect(margin, margin, w, h);\n        }\n        const color = foregroundColor();\n        if (color.startsWith(\"rgba\")) {\n          const [r, g, b, a] = color.match(/\\d+(\\.\\d+)?/g).map(Number);\n          g.fill({ color: rgbToHex(r, g, b), alpha: a });\n        } else {\n          g.fill(color);\n        }\n      },\n    })\n  );\n}\n","import * as PIXI from \"pixi.js\";\nimport { FX } from \"revolt-fx\";\nimport { h, mount, tick, Container, on, useProps } from \"canvasengine\";\n\nexport function Particle(options) {\n  const { emit, settings = {} } = options;\n  const { name } = useProps(options);\n  const fx = new FX();\n  let element;\n\n  PIXI.Assets.add({ alias: \"fx_settings\", src: \"/default-bundle.json\" });\n  PIXI.Assets.add({\n    alias: \"fx_spritesheet\",\n    src: \"/revoltfx-spritesheet.json\",\n  });\n\n  tick(({deltaRatio}) => {\n    fx.update(deltaRatio);\n  });\n\n  mount(async (_element) => {\n    element = _element;\n\n    const data = await PIXI.Assets.load([\"fx_settings\", \"fx_spritesheet\"]);\n    let fxSettings = {...data.fx_settings};\n\n    if (settings.emitters) {\n      const lastId = 10000;\n      const emittersWithIds = settings.emitters.map((emitter, index) => ({\n        ...emitter,\n        id: lastId + index\n      }));\n\n      fxSettings.emitters = [\n        ...fxSettings.emitters,\n        ...emittersWithIds,\n      ];\n\n    }\n\n    fx.initBundle(fxSettings, true);\n  });\n\n  on(emit, () => {\n    const emitter = fx.getParticleEmitter(name());\n    emitter.init(element.componentInstance);\n  });\n\n  return h(Container);\n}\n","import { Container, Graphics, h, mount, useProps, animatedSignal, RadialGradient, effect, isSignal, signal, isObservable } from \"canvasengine\";\n\nexport function LightSpot(opts) {\n  const { radius } = useProps(opts);\n  const scale = animatedSignal(1);\n\n  const minScale = 1;\n  const maxScale = 2; // Reduced max scale for subtler effect\n  const scintillationSpeed = 0.001; // Significantly reduced for slower scintillation\n\n  const animate = () => {\n    // Use time-based animation for smoother, slower scintillation\n    const time = Date.now() * scintillationSpeed;\n\n    // Combine multiple sine waves for a more natural, less predictable effect\n    const scintillationFactor =\n      (Math.sin(time) + Math.sin(time * 1.3) + Math.sin(time * 0.7)) / 3;\n\n    // Map the scintillation factor to the scale range\n    const newScale =\n      minScale + (maxScale - minScale) * (scintillationFactor * 0.5 + 0.5);\n\n    scale.update(() => newScale);\n\n    requestAnimationFrame(animate);\n  };\n\n  animate();\n\n  const draw = (g) => {\n    const size = radius() * 2;\n    const gradient = new RadialGradient(size, size, 0, size, size, 0);\n    gradient.addColorStop(0, \"rgba(255, 255, 0, 1)\");\n    gradient.addColorStop(0.5, \"rgba(255, 255, 0, 0.3)\");\n    gradient.addColorStop(0.8, \"rgba(255, 255, 0, 0)\");\n\n    const translate = size / 2;\n\n    g.rect(-translate, -translate, size, size).fill(\n      gradient.render({ translate: { x: translate, y: translate } })\n    );\n  };\n\n  return h(Graphics, {\n    draw,\n    ...opts,\n    scale,\n  });\n}\n\nexport function NightAmbiant(props) {\n  const { children } = props;\n  let el\n  const width = signal(0);\n  const height = signal(0);\n  let subscription\n  const draw = (rectAndHole) => {\n    const margin = 80\n    rectAndHole.rect(-margin, -margin, width() + margin*2, height() + margin*2);\n    rectAndHole.fill(0x000000);\n    const applyChildren = (child) => {\n      const x = isSignal(child.propObservables.x)\n        ? child.propObservables.x()\n        : child.props.x;\n      const y = isSignal(child.propObservables.y)\n        ? child.propObservables.y()\n        : child.props.y;\n      const radius = isSignal(child.propObservables.radius)\n        ? child.propObservables.radius()\n        : child.props.radius;\n      rectAndHole.circle(x, y, radius);\n      rectAndHole.cut();\n    }\n    for (let child of children) {\n      if (isObservable(child)) {\n        if (subscription) {\n          subscription.unsubscribe()\n        }\n        subscription = child.subscribe((event: any) => {\n           for (let child of event.fullElements) {\n            applyChildren(child)\n           }\n        })\n        return\n      }\n      applyChildren(child)\n    }\n  };\n\n  mount((el) => {\n    effect(() => {\n      const { displayWidth, displayHeight } = el.componentInstance as any\n      const w = +displayWidth()\n      const h = +displayHeight()\n      setTimeout(() => {\n        width.update(() => w)\n        height.update(() => h)\n      }, 0) // hack\n    });\n  });\n\n  return h(\n    Container,\n    {\n      width: \"100%\",\n      height: \"100%\",\n      ...props,\n    },\n    h(Graphics, {\n      draw,\n      alpha: 0.8,\n      blur: 80,\n    }),\n    ...children\n  );\n}\n","/*\n * Joystick\n *\n * Inspired by https://github.com/endel/pixi-virtual-joystick\n */\n\nimport * as PIXI from \"pixi.js\";\nimport { Container, Graphics, Sprite, h, signal } from \"canvasengine\";\n\nexport interface JoystickChangeEvent {\n  angle: number;\n  direction: Direction;\n  power: number;\n}\n\nexport enum Direction {\n  LEFT = \"left\",\n  TOP = \"top\",\n  BOTTOM = \"bottom\",\n  RIGHT = \"right\",\n  TOP_LEFT = \"top_left\",\n  TOP_RIGHT = \"top_right\",\n  BOTTOM_LEFT = \"bottom_left\",\n  BOTTOM_RIGHT = \"bottom_right\",\n}\n\nexport interface JoystickSettings {\n  outer?: string;\n  inner?: string;\n  outerScale?: { x: number; y: number };\n  innerScale?: { x: number; y: number };\n  onChange?: (data: JoystickChangeEvent) => void;\n  onStart?: () => void;\n  onEnd?: () => void;\n}\n\nexport function Joystick(opts: JoystickSettings = {}) {\n  const settings = Object.assign(\n    {\n      outerScale: { x: 1, y: 1 },\n      innerScale: { x: 1, y: 1 },\n    },\n    opts\n  );\n\n  let outerRadius = 70;\n  let innerRadius = 10;\n  const innerAlphaStandby = 0.5;\n\n  let dragging = false;\n  let startPosition: PIXI.PointData | null = null;\n  let power = 0;\n\n  const innerPositionX = signal(0);\n  const innerPositionY = signal(0);\n  const innerAlpha = signal(innerAlphaStandby);\n\n  function getPower(centerPoint: PIXI.Point) {\n    const a = centerPoint.x - 0;\n    const b = centerPoint.y - 0;\n    return Math.min(1, Math.sqrt(a * a + b * b) / outerRadius);\n  }\n\n  function getDirection(center: PIXI.Point) {\n    let rad = Math.atan2(center.y, center.x); // [-PI, PI]\n    if ((rad >= -Math.PI / 8 && rad < 0) || (rad >= 0 && rad < Math.PI / 8)) {\n      return Direction.RIGHT;\n    } else if (rad >= Math.PI / 8 && rad < (3 * Math.PI) / 8) {\n      return Direction.BOTTOM_RIGHT;\n    } else if (rad >= (3 * Math.PI) / 8 && rad < (5 * Math.PI) / 8) {\n      return Direction.BOTTOM;\n    } else if (rad >= (5 * Math.PI) / 8 && rad < (7 * Math.PI) / 8) {\n      return Direction.BOTTOM_LEFT;\n    } else if (\n      (rad >= (7 * Math.PI) / 8 && rad < Math.PI) ||\n      (rad >= -Math.PI && rad < (-7 * Math.PI) / 8)\n    ) {\n      return Direction.LEFT;\n    } else if (rad >= (-7 * Math.PI) / 8 && rad < (-5 * Math.PI) / 8) {\n      return Direction.TOP_LEFT;\n    } else if (rad >= (-5 * Math.PI) / 8 && rad < (-3 * Math.PI) / 8) {\n      return Direction.TOP;\n    } else {\n      return Direction.TOP_RIGHT;\n    }\n  }\n\n  function handleDragStart(event: PIXI.FederatedPointerEvent) {\n    startPosition = event.getLocalPosition(this);\n    dragging = true;\n    innerAlpha.set(1);\n    settings.onStart?.();\n  }\n\n  function handleDragEnd() {\n    if (!dragging) return;\n    innerPositionX.set(0);\n    innerPositionY.set(0);\n    dragging = false;\n    innerAlpha.set(innerAlphaStandby);\n    settings.onEnd?.();\n  }\n\n  function handleDragMove(event: PIXI.FederatedPointerEvent) {\n    if (dragging == false) {\n      return;\n    }\n\n    let newPosition = event.getLocalPosition(this);\n\n    let sideX = newPosition.x - (startPosition?.x ?? 0);\n    let sideY = newPosition.y - (startPosition?.y ?? 0);\n\n    let centerPoint = new PIXI.Point(0, 0);\n    let angle = 0;\n\n    if (sideX == 0 && sideY == 0) {\n      return;\n    }\n\n    let calRadius = 0;\n\n    if (sideX * sideX + sideY * sideY >= outerRadius * outerRadius) {\n      calRadius = outerRadius;\n    } else {\n      calRadius = outerRadius - innerRadius;\n    }\n\n    /**\n     * x:   -1 <-> 1\n     * y:   -1 <-> 1\n     *          Y\n     *          ^\n     *          |\n     *     180  |  90\n     *    ------------> X\n     *     270  |  360\n     *          |\n     *          |\n     */\n\n    let direction = Direction.LEFT;\n\n    if (sideX == 0) {\n      if (sideY > 0) {\n        centerPoint.set(0, sideY > outerRadius ? outerRadius : sideY);\n        angle = 270;\n        direction = Direction.BOTTOM;\n      } else {\n        centerPoint.set(\n          0,\n          -(Math.abs(sideY) > outerRadius ? outerRadius : Math.abs(sideY))\n        );\n        angle = 90;\n        direction = Direction.TOP;\n      }\n      innerPositionX.set(centerPoint.x);\n      innerPositionY.set(centerPoint.y);\n      power = getPower(centerPoint);\n      settings.onChange?.({ angle, direction, power });\n      return;\n    }\n\n    if (sideY == 0) {\n      if (sideX > 0) {\n        centerPoint.set(\n          Math.abs(sideX) > outerRadius ? outerRadius : Math.abs(sideX),\n          0\n        );\n        angle = 0;\n        direction = Direction.LEFT;\n      } else {\n        centerPoint.set(\n          -(Math.abs(sideX) > outerRadius ? outerRadius : Math.abs(sideX)),\n          0\n        );\n        angle = 180;\n        direction = Direction.RIGHT;\n      }\n\n      innerPositionX.set(centerPoint.x);\n      innerPositionY.set(centerPoint.y);\n      power = getPower(centerPoint);\n      settings.onChange?.({ angle, direction, power });\n      return;\n    }\n\n    let tanVal = Math.abs(sideY / sideX);\n    let radian = Math.atan(tanVal);\n    angle = (radian * 180) / Math.PI;\n\n    let centerX = 0;\n    let centerY = 0;\n\n    if (sideX * sideX + sideY * sideY >= outerRadius * outerRadius) {\n      centerX = outerRadius * Math.cos(radian);\n      centerY = outerRadius * Math.sin(radian);\n    } else {\n      centerX = Math.abs(sideX) > outerRadius ? outerRadius : Math.abs(sideX);\n      centerY = Math.abs(sideY) > outerRadius ? outerRadius : Math.abs(sideY);\n    }\n\n    if (sideY < 0) {\n      centerY = -Math.abs(centerY);\n    }\n    if (sideX < 0) {\n      centerX = -Math.abs(centerX);\n    }\n\n    if (sideX > 0 && sideY < 0) {\n      // < 90\n    } else if (sideX < 0 && sideY < 0) {\n      // 90 ~ 180\n      angle = 180 - angle;\n    } else if (sideX < 0 && sideY > 0) {\n      // 180 ~ 270\n      angle = angle + 180;\n    } else if (sideX > 0 && sideY > 0) {\n      // 270 ~ 369\n      angle = 360 - angle;\n    }\n    centerPoint.set(centerX, centerY);\n    power = getPower(centerPoint);\n\n    direction = getDirection(centerPoint);\n    innerPositionX.set(centerPoint.x);\n    innerPositionY.set(centerPoint.y);\n\n    settings.onChange?.({ angle, direction, power });\n  }\n\n  let innerElement;\n  let outerElement;\n\n  if (!settings.outer) {\n    outerElement = h(Graphics, {\n      draw: (g) => {\n        g.circle(0, 0, outerRadius).fill(0x000000);\n      },\n      alpha: 0.5,\n    });\n  } else {\n    outerElement = h(Sprite, {\n      image: settings.outer,\n      anchor: { x: 0.5, y: 0.5 },\n      scale: settings.outerScale,\n    });\n  }\n\n  const innerOptions: any = {\n    scale: settings.innerScale,\n    x: innerPositionX,\n    y: innerPositionY,\n    alpha: innerAlpha,\n  };\n\n  if (!settings.inner) {\n    innerElement = h(Graphics, {\n      draw: (g) => {\n        g.circle(0, 0, innerRadius * 2.5).fill(0x000000);\n      },\n      ...innerOptions,\n    });\n  } else {\n    innerElement = h(Sprite, {\n      image: settings.inner,\n      anchor: { x: 0.5, y: 0.5 },\n      ...innerOptions,\n    });\n  }\n\n  return h(\n    Container,\n    {\n      ...opts,\n      pointerdown: handleDragStart,\n      pointerup: handleDragEnd,\n      pointerupoutside: handleDragEnd,\n      pointermove: handleDragMove,\n    },\n    outerElement,\n    innerElement\n  );\n}\n","import { TiledLayer, TiledLayerType, TiledMap, TiledParserFile, TiledTileset } from \"@rpgjs/tiled\"\nimport { loop, h, Container, TilingSprite, useProps, effect, signal } from \"canvasengine\"\nimport { CompositeTileLayer } from \"./TileLayer\"\nimport { TileSet } from \"./TileSet\"\n\nexport function TiledMap(props) {\n    const { map } = useProps(props)\n    const layers = signal<TiledLayer[]>([])\n    const objectLayer = props.objectLayer\n    let tilesets: TiledTileset[] = []\n    let mapData: TiledMap = {} as TiledMap\n\n    const parseTmx = async (file: string, relativePath: string = '') => {\n        if (typeof file !== 'string') {\n            return file\n        }\n        // @ts-ignore\n        const parser = new TiledParserFile(\n            file,\n            {\n                basePath: '',\n                staticDir: '',\n                relativePath\n            }\n        )\n        const data = await parser.parseFilePromise({\n            getOnlyBasename: false\n        })\n\n        return data\n    }\n\n    effect(async () => {\n        mapData = await parseTmx(map())\n        for (let tileSet of mapData.tilesets) {\n            tilesets.push(await new TileSet(tileSet).load(tileSet.image.source))\n        }\n        layers.set(mapData.layers)\n    })\n\n    const createLayer = (layers, props = {}) => {\n        return h(Container, props, loop(layers, (layer) => {\n            switch (layer.type) {\n                case TiledLayerType.Tile:\n                    return h(CompositeTileLayer, {\n                        tilewidth: mapData.tilewidth,\n                        tileheight: mapData.tileheight,\n                        // @ts-ignore\n                        width: mapData.width,\n                        // @ts-ignore\n                        height: mapData.height,\n                        ...layer,\n                        tilesets\n                    })\n                case TiledLayerType.Image:\n                    const { width, height, source } = layer.image\n                    return h(TilingSprite, {\n                        image: source,\n                        ...layer,\n                        width: layer.repeatx ? layer.width * layer.tilewidth : width,\n                        height: layer.repeaty ? layer.height * layer.tileheight : height\n                    })\n                case TiledLayerType.Group:\n                    return createLayer(signal(layer.layers), layer)\n                case TiledLayerType.ObjectGroup:\n                    const child = objectLayer?.(layer)\n                    return h(Container, layer, child)\n                default:\n                    return h(Container)\n            }\n        }))\n    }\n\n    return createLayer(layers)\n}","import { CompositeTilemap, POINT_STRUCT_SIZE, Tilemap, settings } from '@pixi/tilemap';\nimport { Layer, Tile as TileClass } from '@rpgjs/tiled';\nimport { createComponent, registerComponent, DisplayObject } from 'canvasengine';\nimport { Tile } from './Tile';\nimport { TileSet } from './TileSet';\n\nsettings.use32bitIndex = true\n\nexport class CanvasTileLayer extends DisplayObject(CompositeTilemap) {\n    private _tiles: any = {}\n    tiles: (TileClass | null)[]\n    private _layer: any // TODO: fix this, remove any. replace with Layer\n\n    static findTileSet(gid: number, tileSets: TileSet[]) {\n        let tileset: TileSet | undefined\n        for (let i = tileSets.length - 1; i >= 0; i--) {\n            tileset = tileSets[i]\n            if (tileset.firstgid && tileset.firstgid <= gid) {\n                break;\n            }\n        }\n        return tileset;\n    }\n\n    /** @internal */\n    createTile(x: number, y: number, options: any = {}): Tile | undefined {\n        const { real, filter } = options\n        const { tilewidth, tileheight, width } = this._layer\n        if (real) {\n            x = Math.floor(x / tilewidth)\n            y = Math.floor(y / tileheight)\n        }\n        const i = x + y * width;\n        const tiledTile = this._layer.getTileByIndex(i)\n\n        if (!tiledTile || (tiledTile && tiledTile.gid == 0)) return\n\n        const tileset = CanvasTileLayer.findTileSet(\n            tiledTile.gid,\n            this.tileSets\n        )\n\n        if (!tileset) return\n\n        const tile = new Tile(\n            tiledTile,\n            tileset\n        )\n\n        tile.x = x * tilewidth;\n        tile.y =\n            y * tileheight +\n            (tileheight -\n                tile.texture.height);\n\n        tile._x = x;\n        tile._y = y;\n\n        if (tileset.tileoffset) {\n            tile.x += tileset.tileoffset.x ?? 0;\n            tile.y += tileset.tileoffset.y ?? 0;\n        }\n\n        if (filter) {\n            const ret = filter(tile)\n            if (!ret) return\n        }\n\n        return tile\n    }\n\n    /** @internal */\n    changeTile(x: number, y: number) {\n        const { tilewidth, tileheight } = this._layer\n        x = Math.floor(x / tilewidth)\n        y = Math.floor(y / tileheight)\n        const oldTile: Tile = this._tiles[x + ';' + y]\n        const newTile = this.createTile(x, y)\n        if (!oldTile && newTile) {\n            this._addFrame(newTile, x, y)\n        }\n        else {\n            if (newTile) {\n                const bufComposite: CompositeTilemap = new CompositeTilemap()\n                const frame = bufComposite.tile(newTile.texture, newTile.x, newTile.y)\n                newTile.setAnimation(frame)\n                this._tiles[x + ';' + y] = newTile\n                // @ts-ignore\n                const pointsBufComposite = (bufComposite.children[0] as Tilemap).pointsBuf\n                    // Change Texture (=0, 1 and 7, rotate (=4), animX (=5), animY (=6))\n                    ;[0, 1, 4, 6, 7, 8].forEach((i) => {\n                        if (this.pointsBuf) this.pointsBuf[oldTile.pointsBufIndex + i] = pointsBufComposite[i]\n                    })\n                // @ts-ignore\n                this.children[0].modificationMarker = 0\n                this._addFrame(newTile, x, y)\n                this['modificationMarker'] = 0\n            }\n            else {\n                delete this._tiles[x + ';' + y]\n                if (this.pointsBuf) this.pointsBuf.splice(oldTile.pointsBufIndex, POINT_STRUCT_SIZE)\n            }\n        }\n    }\n\n    /** @internal */\n    get pointsBuf(): number[] | null {\n        const child = this.children[0] as Tilemap\n        if (!child) return null\n        return child['pointsBuf']\n    }\n\n    private _addFrame(tile: Tile, x: number, y: number) {\n        const frame = this.tile(tile.texture, tile.x, tile.y, {\n            rotate: tile.texture.rotate\n        })\n        const pb = this.pointsBuf\n        if (!pb) return null\n        tile.pointsBufIndex = pb.length - POINT_STRUCT_SIZE\n        tile.setAnimation(frame)\n        this._tiles[x + ';' + y] = tile\n    }\n\n    onMount(args) {\n        const { props } = args\n        this.tileSets = props.tilesets\n        this._layer = new Layer({\n            ...props\n        }, this.tileSets)\n        super.onMount(args)\n    }\n\n    onUpdate(props) {\n        super.onUpdate(props)\n        if (!this.isMounted) return\n        if (props.tileheight) this._layer.tileheight = props.tileheight\n        if (props.tilewidth) this._layer.tilewidth = props.tilewidth\n        if (props.width) this._layer.width = props.width\n        if (props.height) this._layer.height = props.height\n        if (props.parallaxX) this._layer.parallaxX = props.parallaxx\n        if (props.parallaxY) this._layer.parallaxY = props.parallaxy\n\n        this.removeChildren()\n\n        for (let y = 0; y < this._layer.height; y++) {\n            for (let x = 0; x < this._layer.width; x++) {\n                const tile = this.createTile(x, y)\n                if (tile) {\n                    this._addFrame(tile, x, y)\n                }\n            }\n        }\n    }\n}\n\nexport interface CanvasTileLayer extends CompositeTilemap { }\n\nregisterComponent('CompositeTileLayer', CanvasTileLayer)\n\nexport function CompositeTileLayer(props) {\n    return createComponent('CompositeTileLayer', props)\n}","import { CompositeTilemap } from \"@pixi/tilemap\";\nimport { Tile as TiledTileClass } from '@rpgjs/tiled';\nimport { AnimatedSprite, Texture, groupD8 } from \"pixi.js\";\nimport { TileSet } from \"./TileSet\";\n\nexport class Tile extends AnimatedSprite {\n    static getTextures(tile: TiledTileClass, tileSet: TileSet) {\n        const textures: Texture[] = [];\n\n        if (tile.animations && tile.animations.length) {\n            tile.animations.forEach(frame => {\n                textures.push(tileSet.textures[frame.tileid])\n            });\n        } else {\n            textures.push(tileSet.textures[tile.gid - tileSet.firstgid])\n        }\n\n        return textures;\n    }\n\n    animations: { tileid: number, duration: number }[] = []\n    _x: number = 0\n    _y: number = 0\n    pointsBufIndex: number\n    properties: any = {}\n\n    constructor(\n        private tile: TiledTileClass,\n        private tileSet: TileSet\n    ) {\n        super(Tile.getTextures(tile, tileSet));\n        this.animations = tile.animations || []\n        this.properties = tile.properties\n        this.textures = Tile.getTextures(tile, tileSet)\n        this.texture = this.textures[0] as Texture\n        this.flip()\n    }\n\n    get gid() {\n        return this.tile.gid\n    }\n\n    setAnimation(frame: CompositeTilemap) {\n        const size = this.animations.length\n        if (size > 1) {\n            const offset = (this.animations[1].tileid - this.animations[0].tileid) * this.width\n            frame.tileAnimX(offset, size)\n        }\n    }\n\n    flip() {\n        let symmetry\n        let i = 0\n        const add = (symmetrySecond) => {\n            i++\n            if (symmetry) symmetry = groupD8.add(symmetry, symmetrySecond)\n            else symmetry = symmetrySecond\n        }\n\n        if (this.tile.horizontalFlip) {\n            add(groupD8.MIRROR_HORIZONTAL)\n        }\n\n        if (this.tile.verticalFlip) {\n            add(groupD8.MIRROR_VERTICAL)\n        }\n\n        if (this.tile.diagonalFlip) {\n            if (i % 2 == 0) {\n                add(groupD8.MAIN_DIAGONAL)\n            }\n            else {\n                add(groupD8.REVERSE_DIAGONAL)\n            }\n        }\n\n        //if (symmetry) this.texture.rotate = symmetry\n    }\n}","import { TiledTileset, Tileset as TiledTilesetClass } from \"@rpgjs/tiled\";\nimport { Assets, Rectangle, Texture } from \"pixi.js\";\n\nexport class TileSet extends TiledTilesetClass {\n  public textures: Texture[] = [];\n  private tileGroups = {};\n\n  constructor(tileSet: TiledTileset) {\n    super(tileSet);\n  }\n\n  loadGroup() {\n    // for (let tile of this.tileset.tiles) {\n    // }\n  }\n\n  /** @internal */\n  async load(image: string) {\n    const texture = await Assets.load(image);\n    for (\n      let y = this.margin;\n      y < this.image.height;\n      y += this.tileheight + this.spacing\n    ) {\n      for (\n        let x = this.margin;\n        x < this.image.width;\n        x += this.tilewidth + this.spacing\n      ) {\n        this.textures.push(\n          new Texture({\n            source: texture.source,\n            frame: new Rectangle(+x, +y, +this.tilewidth, +this.tileheight),\n          })\n        );\n      }\n    }\n    this.loadGroup();\n    return this;\n  }\n}\n","import { effect, signal, loop, h, Container, Sprite, useProps } from \"canvasengine\";\n\ninterface TileData {\n  id: number;\n  rect: [number, number, number, number];\n  drawIn: [number, number];\n  layerIndex: number;\n}\n\nexport function ImageMap(props) {\n  const { imageSource, tileData } = useProps(props);\n  const tiles = signal<TileData[]>([]);\n\n  effect(async () => {\n    const data = await fetch(tileData()).then((response) => response.json());\n    const objects = data;\n    if (props.objects) {\n      objects.push(...props.objects(data));\n    }\n    tiles.set(objects);\n  });\n\n  const createLayeredTiles = () => {\n    const layers = [createTileLayer(0), createTileLayer(1, true), createTileLayer(2)];\n\n    return h(Container, props, ...layers);\n  };\n\n  const createTileLayer = (layerIndex: number, sortableChildren = false) => {\n    return h(\n      Container,\n      {\n        sortableChildren,\n      },\n      loop(tiles, (object) => {\n\n        if (object.tag && layerIndex == 1) {\n            return object\n        }\n\n        object.layerIndex ||= 1;\n        if (object.layerIndex !== layerIndex) return null;\n\n        const [x, y, width, height] = object.rect;\n        const [drawX, drawY] = object.drawIn;\n\n        return h(Sprite, {\n          image: imageSource(),\n          x: drawX,\n          y: drawY,\n          rectangle: { x, y, width, height },\n          zIndex: drawY + height - 70,\n        // zIndex: 0\n        });\n      })\n    );\n  };\n\n  return createLayeredTiles();\n}\n"],"mappings":"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","names":["h","g","h","useProps","settings","Container","Graphics","h","mount","useProps","child","el","PIXI","Container","Graphics","h","signal","Direction","settings","h","Container","useProps","effect","signal","Assets","Texture","useProps","signal","effect","layers","props","h","Container","effect","signal","loop","h","Container","Sprite","useProps"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canvasengine/presets",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.4",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -10,11 +10,18 @@
   "dependencies": {
     "pixi.js": "^8.6.4",
     "revolt-fx": "^1.3.5",
-    "canvasengine": "2.0.0-beta.2"
+    "@pixi/tilemap": "^5.0.1",
+    "@rpgjs/tiled": "^4.3.0",
+    "canvasengine": "2.0.0-beta.4"
   },
   "publishConfig": {
     "access": "public"
   },
+  "overrides": {
+    "revolt-fx": {
+      "pixi.js": "^8.6.4"
+    }
+  },
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch"

package/src/DrawMap/index.ts

@@ -0,0 +1,60 @@
+import { effect, signal, loop, h, Container, Sprite, useProps } from "canvasengine";
+
+interface TileData {
+  id: number;
+  rect: [number, number, number, number];
+  drawIn: [number, number];
+  layerIndex: number;
+}
+
+export function ImageMap(props) {
+  const { imageSource, tileData } = useProps(props);
+  const tiles = signal<TileData[]>([]);
+
+  effect(async () => {
+    const data = await fetch(tileData()).then((response) => response.json());
+    const objects = data;
+    if (props.objects) {
+      objects.push(...props.objects(data));
+    }
+    tiles.set(objects);
+  });
+
+  const createLayeredTiles = () => {
+    const layers = [createTileLayer(0), createTileLayer(1, true), createTileLayer(2)];
+
+    return h(Container, props, ...layers);
+  };
+
+  const createTileLayer = (layerIndex: number, sortableChildren = false) => {
+    return h(
+      Container,
+      {
+        sortableChildren,
+      },
+      loop(tiles, (object) => {
+
+        if (object.tag && layerIndex == 1) {
+            return object
+        }
+
+        object.layerIndex ||= 1;
+        if (object.layerIndex !== layerIndex) return null;
+
+        const [x, y, width, height] = object.rect;
+        const [drawX, drawY] = object.drawIn;
+
+        return h(Sprite, {
+          image: imageSource(),
+          x: drawX,
+          y: drawY,
+          rectangle: { x, y, width, height },
+          zIndex: drawY + height - 70,
+        // zIndex: 0
+        });
+      })
+    );
+  };
+
+  return createLayeredTiles();
+}

package/src/Tilemap/Tile.ts

@@ -0,0 +1,79 @@
+import { CompositeTilemap } from "@pixi/tilemap";
+import { Tile as TiledTileClass } from '@rpgjs/tiled';
+import { AnimatedSprite, Texture, groupD8 } from "pixi.js";
+import { TileSet } from "./TileSet";
+
+export class Tile extends AnimatedSprite {
+    static getTextures(tile: TiledTileClass, tileSet: TileSet) {
+        const textures: Texture[] = [];
+
+        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;
+    }
+
+    animations: { tileid: number, duration: number }[] = []
+    _x: number = 0
+    _y: number = 0
+    pointsBufIndex: number
+    properties: any = {}
+
+    constructor(
+        private tile: TiledTileClass,
+        private tileSet: TileSet
+    ) {
+        super(Tile.getTextures(tile, tileSet));
+        this.animations = tile.animations || []
+        this.properties = tile.properties
+        this.textures = Tile.getTextures(tile, tileSet)
+        this.texture = this.textures[0] as Texture
+        this.flip()
+    }
+
+    get gid() {
+        return this.tile.gid
+    }
+
+    setAnimation(frame: CompositeTilemap) {
+        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)
+            }
+        }
+
+        //if (symmetry) this.texture.rotate = symmetry
+    }
+}

package/src/Tilemap/TileGroup.ts

@@ -0,0 +1,207 @@
+interface TileOptions {
+    tilesetIndex?: number
+    tileId: number
+    x: number
+    y: number
+}
+
+interface TilesGroupOptions {
+    ignore?: boolean
+    probability?: number
+    baseHeight?: number
+    baseWidth?: number
+    rectMargin?: number
+    baseOffsetX?: number
+    baseOffsetY?: number
+}
+
+export class TileInfo {
+    tilesetIndex?: number
+    tileId: number
+    flags: Map<string, any> = new Map()
+    id: number = Math.random()
+
+    constructor(obj: TileOptions) {
+        this.tilesetIndex = obj.tilesetIndex ?? 0
+        this.tileId = obj.tileId
+    }
+
+    addFlag(key: string, value: any) {
+        this.flags.set(key, value)
+    }
+}
+
+export class TilesGroup {
+    tiles: (TileInfo | null)[][] = []
+    width: number
+    height: number
+    ignore: boolean = false
+    probability: number = 1
+    baseHeight: number = 1
+    baseWidth?: number
+    baseOffsetX: number = 0
+    baseOffsetY: number = 0
+    rectMargin: number = 0
+
+    constructor(tiles: TileOptions[], public tilesetIndex: number = 0, options: TilesGroupOptions = {}) {
+        const pointsX = tiles.map(tile => tile.x)
+        const pointsY = tiles.map(tile => tile.y)
+        const offsetX = Math.min(...pointsX)
+        const offsetY = Math.min(...pointsY)
+        this.width = Math.max(...pointsX) - offsetX + 1
+        this.height = Math.max(...pointsY) - offsetY + 1
+        this.ignore = !!options.ignore
+        this.probability = options.probability ?? 1
+        this.baseHeight = options.baseHeight ?? 1
+        this.baseWidth = options.baseWidth
+        this.rectMargin = options.rectMargin ?? 0
+        this.baseOffsetX = options.baseOffsetX ?? 0
+        this.baseOffsetY = options.baseOffsetY ?? 0
+        this.fillTiles()
+        for (let tile of tiles) {
+            this.addTile(tile.x - offsetX, tile.y - offsetY, tile)
+        }
+    }
+
+    getRect(x: number, y: number): { minX: number, minY: number, maxX: number, maxY: number } {
+        const margin = this.rectMargin
+        return {
+            minX: x - margin + this.baseOffsetX,
+            minY: y - this.tilesBaseHeight - margin - this.baseOffsetY,
+            maxX: x + this.tilesBaseWidth + margin,
+            maxY: y + margin
+        }
+    }
+
+    get tilesBase() {
+        return this.tiles[this.tiles.length - 1]
+    }
+
+    get tilesBaseWidth(): number {
+        return this.baseWidth ?? this.tilesBase.length
+    }
+
+    get tilesBaseHeight(): number {
+        return this.baseHeight
+    }
+
+    forEach(cb: (tileInfo: TileInfo | null, x: number, y: number) => void) {
+        for (let i = 0; i < this.tiles.length; i++) {
+            for (let j = 0; j < this.tiles[i].length; j++) {
+                cb(this.tiles[i][j], j, i)
+            }
+        }
+    }
+
+    find(cb: (tileInfo: TileInfo | null, x: number, y: number) => boolean): TileInfo | null {
+        let found: TileInfo | null = null
+        this.forEach((tileInfo, x, y) => {
+            const bool = cb(tileInfo, x, y)
+            if (bool) found = tileInfo
+        })
+        return found
+    }
+
+    getOffsetY(): number {
+        const tilesBase = this.tilesBase
+        let offset = 0
+        this.forEach((tile, x, y) => {
+            if (tile?.tileId == (tilesBase?.[0]?.tileId)) {
+                offset = y
+            }
+        })
+        return offset
+    }
+
+    fillTiles() {
+        for (let i = 0; i < this.height; i++) {
+            this.tiles[i] = []
+            for (let j = 0; j < this.width; j++) {
+                this.tiles[i][j] = null
+            }
+        }
+    }
+
+    shiftToTopLeft(): void {
+        const matrix = this.tiles
+
+        // Find the first non-undefined element and its position
+        const foundFirst = () => {
+            let firstElementRow = -1;
+            let firstElementColumn = -1;
+
+            for (let col = 0; col < matrix.length; col++) {
+                if (!matrix[col]) matrix[col] = []
+                for (let row = 0; row < matrix[col].length; row++) {
+                    if (matrix[col][row] !== undefined) {
+                        firstElementRow = row;
+                        firstElementColumn = col;
+                        return {
+                            firstElementRow,
+                            firstElementColumn
+                        };
+                    }
+                }
+            }
+
+            return {
+                firstElementRow,
+                firstElementColumn
+            }
+        }
+
+        const { firstElementRow, firstElementColumn } = foundFirst()
+
+        // If no non-undefined element is found, return the original matrix
+        if (firstElementRow === -1) {
+            return;
+        }
+
+        // Shift the matrix elements
+        const newMatrix: (TileInfo | null)[][] = [];
+        for (let col = firstElementColumn; col < matrix.length; col++) {
+            const newRow: (TileInfo | null)[] = [];
+            for (let row = firstElementRow; row < matrix[col].length; row++) {
+                newRow.push(matrix[col][row]);
+            }
+            newMatrix.push(newRow);
+        }
+
+        this.tiles = newMatrix;
+
+        this.width = this.tiles[0].length
+        this.height = this.tiles.length
+    }
+
+    addTile(x: number, y: number, tileOptions: TileOptions) {
+        if (!this.tiles[y]) this.tiles[y] = []
+        this.tiles[y][x] = new TileInfo(tileOptions)
+    }
+
+    addTileFlag(x: number, y: number, key: string, value: any) {
+        this.getTile(x, y)?.addFlag(key, value)
+    }
+
+    getTile(x: number, y: number): TileInfo | null {
+        return this.tiles[y]?.[x]
+    }
+
+    getTilesByFlag(key: string, value: any): { tileInfo: TileInfo, x: number, y: number }[] {
+        const array: any = []
+        this.forEach((tileInfo, x, y) => {
+            const flag = tileInfo?.flags.get(key)
+            if (flag && flag == value) {
+                array.push({
+                    tileInfo,
+                    x,
+                    y
+                })
+            }
+        })
+        return array
+    }
+
+    isTileBase(tileInfo: TileInfo): boolean {
+        return !!this.tilesBase.find(tile => tile?.id == tileInfo.id)
+    }
+}

package/src/Tilemap/TileLayer.ts

@@ -0,0 +1,162 @@
+import { CompositeTilemap, POINT_STRUCT_SIZE, Tilemap, settings } from '@pixi/tilemap';
+import { Layer, Tile as TileClass } from '@rpgjs/tiled';
+import { createComponent, registerComponent, DisplayObject } from 'canvasengine';
+import { Tile } from './Tile';
+import { TileSet } from './TileSet';
+
+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
+
+    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
+    }
+
+    /** @internal */
+    changeTile(x: number, y: number) {
+        const { tilewidth, tileheight } = this._layer
+        x = Math.floor(x / tilewidth)
+        y = Math.floor(y / tileheight)
+        const oldTile: Tile = this._tiles[x + ';' + y]
+        const newTile = this.createTile(x, y)
+        if (!oldTile && newTile) {
+            this._addFrame(newTile, x, y)
+        }
+        else {
+            if (newTile) {
+                const bufComposite: CompositeTilemap = new CompositeTilemap()
+                const frame = bufComposite.tile(newTile.texture, newTile.x, newTile.y)
+                newTile.setAnimation(frame)
+                this._tiles[x + ';' + y] = newTile
+                // @ts-ignore
+                const pointsBufComposite = (bufComposite.children[0] as Tilemap).pointsBuf
+                    // Change Texture (=0, 1 and 7, rotate (=4), animX (=5), animY (=6))
+                    ;[0, 1, 4, 6, 7, 8].forEach((i) => {
+                        if (this.pointsBuf) this.pointsBuf[oldTile.pointsBufIndex + i] = pointsBufComposite[i]
+                    })
+                // @ts-ignore
+                this.children[0].modificationMarker = 0
+                this._addFrame(newTile, x, y)
+                this['modificationMarker'] = 0
+            }
+            else {
+                delete this._tiles[x + ';' + y]
+                if (this.pointsBuf) this.pointsBuf.splice(oldTile.pointsBufIndex, POINT_STRUCT_SIZE)
+            }
+        }
+    }
+
+    /** @internal */
+    get pointsBuf(): number[] | null {
+        const child = this.children[0] as Tilemap
+        if (!child) return null
+        return child['pointsBuf']
+    }
+
+    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
+    }
+
+    onMount(args) {
+        const { props } = args
+        this.tileSets = props.tilesets
+        this._layer = new Layer({
+            ...props
+        }, this.tileSets)
+        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)
+                }
+            }
+        }
+    }
+}
+
+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;
+  }
+}