canvasengine 1.3.0 → 2.0.1-beta.1

package/src/components/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/components/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/components/Tilemap/TileLayer.ts

@@ -0,0 +1,163 @@
+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

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

package/src/components/Tilemap/index.ts

@@ -0,0 +1,80 @@
+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/components/TilingSprite.ts

@@ -0,0 +1,39 @@
+import { TilingSprite as PixiTilingSprite, Texture } from 'pixi.js';
+import { createComponent, registerComponent } from '../engine/reactive';
+import { DisplayObject } from './DisplayObject';
+import { DisplayObjectProps } from './types/DisplayObject';
+
+interface TilingSpriteProps extends DisplayObjectProps {
+    image?: string;
+    tileScale?: { x: number; y: number };
+    tilePosition?: { x: number; y: number };
+    width?: number;
+    height?: number;
+}
+
+class CanvasTilingSprite extends DisplayObject(PixiTilingSprite) {
+    onUpdate(props: TilingSpriteProps): void {
+        super.onUpdate(props);
+        if (props.image) {
+            this.texture = Texture.from(props.image);
+        }
+        if (props.tileScale) {
+            this.tileScale.set(props.tileScale.x, props.tileScale.y);
+        }
+        if (props.tilePosition) {
+            this.tilePosition.set(props.tilePosition.x, props.tilePosition.y);
+        }
+        if (props.width !== undefined) {
+            this.width = props.width;
+        }
+        if (props.height !== undefined) {
+            this.height = props.height;
+        }
+    }
+}
+
+registerComponent('TilingSprite', CanvasTilingSprite)
+
+export function TilingSprite(props: TilingSpriteProps) {
+    return createComponent('TilingSprite', props)
+}