canvasengine 2.0.1-beta.1 → 2.0.1

package/src/components/Tilemap/TileLayer.ts

@@ -1,163 +0,0 @@
-import { CompositeTilemap, POINT_STRUCT_SIZE, Tilemap, settings } from '@pixi/tilemap';
-import { Layer, Tile as TileClass } from '@rpgjs/tiled';
-import { createComponent, registerComponent } from '../../engine/reactive';
-import { DisplayObject } from '../DisplayObject';
-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: 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/components/Tilemap/TileSet.ts

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

package/src/components/Tilemap/index.ts

@@ -1,80 +0,0 @@
-import { TiledLayer, TiledLayerType, TiledMap, TiledParserFile, TiledTileset } from "@rpgjs/tiled"
-import { effect, signal } from '@signe/reactive'
-import { loop } from "../../engine/reactive"
-import { h } from "../../engine/signal"
-import { useProps } from "../../hooks/useProps"
-import { Container } from "../Container"
-import { TilingSprite } from "../TilingSprite"
-import { CompositeTileLayer } from "./TileLayer"
-import { TileSet } from "./TileSet"
-
-export function TiledMap(props) {
-    const { map } = useProps(props)
-    const layers = signal<TiledLayer[]>([])
-    const objectLayer = props.objectLayer
-    let tilesets: TiledTileset[] = []
-    let mapData: TiledMap = {} as TiledMap
-
-    const parseTmx = async (file: string, relativePath: string = '') => {
-        if (typeof file !== 'string') {
-            return file
-        }
-        // @ts-ignore
-        const parser = new TiledParserFile(
-            file,
-            {
-                basePath: '',
-                staticDir: '',
-                relativePath
-            }
-        )
-        const data = await parser.parseFilePromise({
-            getOnlyBasename: false
-        })
-
-        return data
-    }
-
-    effect(async () => {
-        mapData = await parseTmx(map())
-        for (let tileSet of mapData.tilesets) {
-            tilesets.push(await new TileSet(tileSet).load(tileSet.image.source))
-        }
-        layers.set(mapData.layers)
-    })
-
-    const createLayer = (layers, props = {}) => {
-        return h(Container, props, loop(layers, (layer) => {
-            switch (layer.type) {
-                case TiledLayerType.Tile:
-                    return h(CompositeTileLayer, {
-                        tilewidth: mapData.tilewidth,
-                        tileheight: mapData.tileheight,
-                        // @ts-ignore
-                        width: mapData.width,
-                        // @ts-ignore
-                        height: mapData.height,
-                        ...layer,
-                        tilesets
-                    })
-                case TiledLayerType.Image:
-                    const { width, height, source } = layer.image
-                    return h(TilingSprite, {
-                        image: source,
-                        ...layer,
-                        width: layer.repeatx ? layer.width * layer.tilewidth : width,
-                        height: layer.repeaty ? layer.height * layer.tileheight : height
-                    })
-                case TiledLayerType.Group:
-                    return createLayer(signal(layer.layers), layer)
-                case TiledLayerType.ObjectGroup:
-                    const child = objectLayer?.(layer)
-                    return h(Container, layer, child)
-                default:
-                    return h(Container)
-            }
-        }))
-    }
-
-    return createLayer(layers)
-}

package/src/presets/Bar.ts

@@ -1,89 +0,0 @@
-import { Graphics } from "../components";
-import { h } from "../engine/signal";
-import * as PIXI from "pixi.js";
-import { useProps } from "../hooks/useProps";
-
-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/presets/Joystick.ts

@@ -1,286 +0,0 @@
-/*
- * Joystick
- *
- * Inspired by https://github.com/endel/pixi-virtual-joystick
- */
-
-import * as PIXI from "pixi.js";
-import { Container, Graphics, Sprite } from "../components";
-import { h } from "../engine/signal";
-import { signal } from "@signe/reactive";
-
-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
-  );
-}