@canvasengine/presets 2.0.0-beta.10

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, basePath } = useProps(props)\n    const layers = signal<TiledLayer[]>([])\n    const objectLayer = props.objectLayer\n    const child = props.children[0]\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        const _map = map()\n        if (_map) {\n            mapData = await parseTmx(_map, basePath())\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\n    const createLayer = (layers, props = {}) => {\n        return h(Container, props, loop<any>(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 h(Container, props, 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      // TODO: fix this (remove any)\n      loop(tiles, (object: any) => {\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","child","effect","signal","loop","h","Container","Sprite","useProps"]}

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@canvasengine/presets",
+  "version": "2.0.0-beta.10",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "pixi.js": "^8.6.4",
+    "revolt-fx": "^1.3.5",
+    "@pixi/tilemap": "^5.0.1",
+    "@rpgjs/tiled": "^4.3.0",
+    "canvasengine": "2.0.0-beta.10"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "overrides": {
+    "revolt-fx": {
+      "pixi.js": "^8.6.4"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  }
+}

package/src/Bar.ts

@@ -0,0 +1,87 @@
+import { Graphics, h, useProps } from "canvasengine";
+import * as PIXI from "pixi.js";
+
+interface BarProps {
+  backgroundColor?: string;
+  foregroundColor?: string;
+  value: number;
+  maxValue: number;
+  width: number;
+  height: number;
+}
+
+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);
+}
+
+export function Bar(opts: BarProps) {
+  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(g: PIXI.Graphics) {
+        if (borderRadius()) {
+          g.roundRect(0, 0, width(), height(), borderRadius());
+        } else {
+          g.rect(0, 0, width(), height());
+        }
+        if (border) {
+          g.stroke(border);
+        }
+        g.fill(backgroundColor());
+      },
+    },
+    h(Graphics, {
+      width,
+      height,
+      draw(g: PIXI.Graphics) {
+        const margin = innerMargin();
+        const _borderRadius = borderRadius();
+        const w = Math.max(
+          0,
+          Math.min(
+            width() - 2 * margin,
+            (value() / maxValue()) * (width() - 2 * margin)
+          )
+        );
+        const h = height() - 2 * margin;
+        if (borderRadius) {
+          g.roundRect(margin, margin, w, h, _borderRadius);
+        } else {
+          g.rect(margin, margin, w, h);
+        }
+        const color = foregroundColor();
+        if (color.startsWith("rgba")) {
+          const [r, g, b, a] = color.match(/\d+(\.\d+)?/g).map(Number);
+          g.fill({ color: rgbToHex(r, g, b), alpha: a });
+        } else {
+          g.fill(color);
+        }
+      },
+    })
+  );
+}

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,
+      },
+      // TODO: fix this (remove any)
+      loop(tiles, (object: any) => {
+        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/Joystick.ts

@@ -0,0 +1,284 @@
+/*
+ * Joystick
+ *
+ * Inspired by https://github.com/endel/pixi-virtual-joystick
+ */
+
+import * as PIXI from "pixi.js";
+import { Container, Graphics, Sprite, h, signal } from "canvasengine";
+
+export interface JoystickChangeEvent {
+  angle: number;
+  direction: Direction;
+  power: number;
+}
+
+export enum Direction {
+  LEFT = "left",
+  TOP = "top",
+  BOTTOM = "bottom",
+  RIGHT = "right",
+  TOP_LEFT = "top_left",
+  TOP_RIGHT = "top_right",
+  BOTTOM_LEFT = "bottom_left",
+  BOTTOM_RIGHT = "bottom_right",
+}
+
+export interface JoystickSettings {
+  outer?: string;
+  inner?: string;
+  outerScale?: { x: number; y: number };
+  innerScale?: { x: number; y: number };
+  onChange?: (data: JoystickChangeEvent) => void;
+  onStart?: () => void;
+  onEnd?: () => void;
+}
+
+export function Joystick(opts: JoystickSettings = {}) {
+  const settings = 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: PIXI.PointData | null = null;
+  let power = 0;
+
+  const innerPositionX = signal(0);
+  const innerPositionY = signal(0);
+  const innerAlpha = signal(innerAlphaStandby);
+
+  function getPower(centerPoint: PIXI.Point) {
+    const a = centerPoint.x - 0;
+    const b = centerPoint.y - 0;
+    return Math.min(1, Math.sqrt(a * a + b * b) / outerRadius);
+  }
+
+  function getDirection(center: PIXI.Point) {
+    let rad = Math.atan2(center.y, center.x); // [-PI, PI]
+    if ((rad >= -Math.PI / 8 && rad < 0) || (rad >= 0 && rad < Math.PI / 8)) {
+      return Direction.RIGHT;
+    } else if (rad >= Math.PI / 8 && rad < (3 * Math.PI) / 8) {
+      return Direction.BOTTOM_RIGHT;
+    } else if (rad >= (3 * Math.PI) / 8 && rad < (5 * Math.PI) / 8) {
+      return Direction.BOTTOM;
+    } else if (rad >= (5 * Math.PI) / 8 && rad < (7 * Math.PI) / 8) {
+      return Direction.BOTTOM_LEFT;
+    } else if (
+      (rad >= (7 * Math.PI) / 8 && rad < Math.PI) ||
+      (rad >= -Math.PI && rad < (-7 * Math.PI) / 8)
+    ) {
+      return Direction.LEFT;
+    } else if (rad >= (-7 * Math.PI) / 8 && rad < (-5 * Math.PI) / 8) {
+      return Direction.TOP_LEFT;
+    } else if (rad >= (-5 * Math.PI) / 8 && rad < (-3 * Math.PI) / 8) {
+      return Direction.TOP;
+    } else {
+      return Direction.TOP_RIGHT;
+    }
+  }
+
+  function handleDragStart(event: PIXI.FederatedPointerEvent) {
+    startPosition = event.getLocalPosition(this);
+    dragging = true;
+    innerAlpha.set(1);
+    settings.onStart?.();
+  }
+
+  function handleDragEnd() {
+    if (!dragging) return;
+    innerPositionX.set(0);
+    innerPositionY.set(0);
+    dragging = false;
+    innerAlpha.set(innerAlphaStandby);
+    settings.onEnd?.();
+  }
+
+  function handleDragMove(event: PIXI.FederatedPointerEvent) {
+    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 PIXI.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;
+    }
+
+    /**
+     * x:   -1 <-> 1
+     * y:   -1 <-> 1
+     *          Y
+     *          ^
+     *          |
+     *     180  |  90
+     *    ------------> X
+     *     270  |  360
+     *          |
+     *          |
+     */
+
+    let direction = Direction.LEFT;
+
+    if (sideX == 0) {
+      if (sideY > 0) {
+        centerPoint.set(0, sideY > outerRadius ? outerRadius : sideY);
+        angle = 270;
+        direction = Direction.BOTTOM;
+      } else {
+        centerPoint.set(
+          0,
+          -(Math.abs(sideY) > outerRadius ? outerRadius : Math.abs(sideY))
+        );
+        angle = 90;
+        direction = Direction.TOP;
+      }
+      innerPositionX.set(centerPoint.x);
+      innerPositionY.set(centerPoint.y);
+      power = getPower(centerPoint);
+      settings.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 = Direction.LEFT;
+      } else {
+        centerPoint.set(
+          -(Math.abs(sideX) > outerRadius ? outerRadius : Math.abs(sideX)),
+          0
+        );
+        angle = 180;
+        direction = Direction.RIGHT;
+      }
+
+      innerPositionX.set(centerPoint.x);
+      innerPositionY.set(centerPoint.y);
+      power = getPower(centerPoint);
+      settings.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) {
+      // < 90
+    } else if (sideX < 0 && sideY < 0) {
+      // 90 ~ 180
+      angle = 180 - angle;
+    } else if (sideX < 0 && sideY > 0) {
+      // 180 ~ 270
+      angle = angle + 180;
+    } else if (sideX > 0 && sideY > 0) {
+      // 270 ~ 369
+      angle = 360 - angle;
+    }
+    centerPoint.set(centerX, centerY);
+    power = getPower(centerPoint);
+
+    direction = getDirection(centerPoint);
+    innerPositionX.set(centerPoint.x);
+    innerPositionY.set(centerPoint.y);
+
+    settings.onChange?.({ angle, direction, power });
+  }
+
+  let innerElement;
+  let outerElement;
+
+  if (!settings.outer) {
+    outerElement = h(Graphics, {
+      draw: (g) => {
+        g.circle(0, 0, outerRadius).fill(0x000000);
+      },
+      alpha: 0.5,
+    });
+  } else {
+    outerElement = h(Sprite, {
+      image: settings.outer,
+      anchor: { x: 0.5, y: 0.5 },
+      scale: settings.outerScale,
+    });
+  }
+
+  const innerOptions: any = {
+    scale: settings.innerScale,
+    x: innerPositionX,
+    y: innerPositionY,
+    alpha: innerAlpha,
+  };
+
+  if (!settings.inner) {
+    innerElement = h(Graphics, {
+      draw: (g) => {
+        g.circle(0, 0, innerRadius * 2.5).fill(0x000000);
+      },
+      ...innerOptions,
+    });
+  } else {
+    innerElement = h(Sprite, {
+      image: settings.inner,
+      anchor: { x: 0.5, y: 0.5 },
+      ...innerOptions,
+    });
+  }
+
+  return h(
+    Container,
+    {
+      ...opts,
+      pointerdown: handleDragStart,
+      pointerup: handleDragEnd,
+      pointerupoutside: handleDragEnd,
+      pointermove: handleDragMove,
+    },
+    outerElement,
+    innerElement
+  );
+}

package/src/NightAmbiant.ts

@@ -0,0 +1,116 @@
+import { Container, Graphics, h, mount, useProps, animatedSignal, RadialGradient, effect, isSignal, signal, isObservable } from "canvasengine";
+
+export function LightSpot(opts) {
+  const { radius } = useProps(opts);
+  const scale = animatedSignal(1);
+
+  const minScale = 1;
+  const maxScale = 2; // Reduced max scale for subtler effect
+  const scintillationSpeed = 0.001; // Significantly reduced for slower scintillation
+
+  const animate = () => {
+    // Use time-based animation for smoother, slower scintillation
+    const time = Date.now() * scintillationSpeed;
+
+    // Combine multiple sine waves for a more natural, less predictable effect
+    const scintillationFactor =
+      (Math.sin(time) + Math.sin(time * 1.3) + Math.sin(time * 0.7)) / 3;
+
+    // Map the scintillation factor to the scale range
+    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 h(Graphics, {
+    draw,
+    ...opts,
+    scale,
+  });
+}
+
+export 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(0x000000);
+    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: any) => {
+           for (let child of event.fullElements) {
+            applyChildren(child)
+           }
+        })
+        return
+      }
+      applyChildren(child)
+    }
+  };
+
+  mount((el) => {
+    effect(() => {
+      const { displayWidth, displayHeight } = el.componentInstance as any
+      const w = +displayWidth()
+      const h = +displayHeight()
+      setTimeout(() => {
+        width.update(() => w)
+        height.update(() => h)
+      }, 0) // hack
+    });
+  });
+
+  return h(
+    Container,
+    {
+      width: "100%",
+      height: "100%",
+      ...props,
+    },
+    h(Graphics, {
+      draw,
+      alpha: 0.8,
+      blur: 80,
+    }),
+    ...children
+  );
+}