@rpgjs/client 4.3.0 → 5.0.0-alpha.0

package/src/Sprite/Spritesheet.ts

@@ -1,392 +0,0 @@
-import { constructor } from "@rpgjs/types"
-import { ClassDeclaration } from "typescript"
-
-export interface TransformOptions {
-    /** 
-     * The global value of opacity (between 0 and 1)
-     * 
-     * @prop {number} [opacity]
-     * @memberof Spritesheet
-     * */
-    opacity?: number
-    /** 
-     * The global value of pivot.
-     * 
-     * Invariant under rotation, scaling, and skewing. The projection of into the parent's space of the pivot is equal to position, regardless of the other three transformations. In other words, It is the center of rotation, scaling, and skewing.
-     * 
-     * The array has two elements: [x, y].  If y is omitted, both x and y will be set to x.
-     * 
-     * ```ts
-     * pivot: [0.5, 0.8]
-     * ```
-     * 
-     * @prop {Array<number>} [pivot]
-     * @memberof Spritesheet
-     * */
-    pivot?: number[]
-
-    /** 
-    * The global value of anchor.
-    * 
-    * Position of the origin point
-    * 
-    * The array has two elements: [x, y].  If y is omitted, both x and y will be set to x.
-    * 
-    * ```ts
-    * anchor: [0.5, 0.8]
-    * ```
-    * 
-    * @prop {Array<number>} [anchor]
-    * @memberof Spritesheet
-    * */
-    anchor?: number[]
-
-    /** 
-     * Defines the actual size of the sprite that is inside a larger rectangle.
-     * For example, if the texture rectangle is 192x192 while the character, which is in the center, is only 64x64 then set `spriteRealSize: 64`. This way the character will be well positioned in relation to the animations that have a different rectangle
-     * 
-     * > You can also put `spriteRealSize: { width: 64, height: 64 }` but be aware that the width is not concerned because it will always be centered while the height depends on the hitbox
-     * 
-     * @prop {{ width: number, height: number } | number} [spriteRealSize]
-     * @since 3.2.0
-     * @memberof Spritesheet
-     * */
-    spriteRealSize?: { width: number, height: number } | number
-
-    /** 
-     * The global value of rotation
-     * 
-     * Rotation. This will rotate the display object's projection by this angle (in radians).
-     * 
-     * @prop {number} [angle]
-     * @memberof Spritesheet
-     * */
-    angle?: number
-
-    /** 
-     * The global value of rotation
-     * 
-     * Rotation. This is an alias for rotation, but in degrees.
-     * 
-     * @prop {number} [rotation]
-     * @memberof Spritesheet
-     * */
-    rotation?: number
-
-    /** 
-    * The global value of scale.
-    * 
-    * Scaling. This will stretch (or compress) the display object's projection. The scale factors are along the local coordinate axes. In other words, the display object is scaled before rotated or skewed. The center of scaling is the pivot.
-    * 
-    * The array has two elements: [x, y].  If y is omitted, both x and y will be set to x.
-    * 
-    * ```ts
-    * scale: [0.5, 0.8]
-    * ```
-    * 
-    * @prop {Array<number>} [scale]
-    * @memberof Spritesheet
-    * */
-    scale?: number[]
-
-    /** 
-    * The global value of skew.
-    * 
-    * Skewing. This can be used to deform a rectangular display object into a parallelogram.
-    * 
-    * In PixiJS, skew has a slightly different behaviour than the conventional meaning. It can be thought of the net rotation applied to the coordinate axes (separately). For example, if "skew.x" is ⍺ and "skew.y" is β, then the line x = 0 will be rotated by ⍺ (y = -x*cot⍺) and the line y = 0 will be rotated by β (y = x*tanβ). A line y = x*tanϴ (i.e. a line at angle ϴ to the x-axis in local-space) will be rotated by an angle between ⍺ and β.
-    * 
-    * It can be observed that if skew is applied equally to both axes, then it will be equivalent to applying a rotation. Indeed, if "skew.x" = -ϴ and "skew.y" = ϴ, it will produce an equivalent of "rotation" = ϴ.
-    * 
-    * Another quite interesting observation is that "skew.x", "skew.y", rotation are communtative operations. Indeed, because rotation is essentially a careful combination of the two.
-    * 
-    * The array has two elements: [x, y].  If y is omitted, both x and y will be set to x.
-    * 
-    * @prop {Array<number>} [skew]
-    * @memberof Spritesheet
-    * */
-    skew?: number[]
-
-    /** 
-    * The global value of X translation
-    * 
-    * @prop {number} [x]
-    * @memberof Spritesheet
-    * */
-    x?: number
-
-    /** 
-    * The global value of Y translation
-    * 
-    * @prop {number} [y]
-    * @memberof Spritesheet
-    * */
-    y?: number
-
-    /** 
-     * The global value of visible
-     * 
-     * @prop {boolean} [visible]
-     * @memberof Spritesheet
-     * */
-    visible?: boolean
-
-    /** 
-    * Define the sound that will be played for all animations in the spritesheet. Remember to create the sound before with the @Sound decorator
-    * 
-    * @prop {string} [sound]
-    * @memberof Spritesheet
-    * */
-    sound?: string
-}
-
-export interface FrameOptions extends TransformOptions {
-    time: number
-    frameX?: number
-    frameY?: number
-}
-
-export interface TextureOptions {
-    /** 
-    * The number of frames on the width
-    * 
-    * @prop {number} framesWidth
-    * @memberof Spritesheet
-    * */
-    framesWidth?: number,
-
-    /** 
-     * The number of frames on the height
-     * 
-     * @prop {number} framesHeight
-     * @memberof Spritesheet
-     * */
-    framesHeight?: number,
-
-    /** 
-    * The width of the image (in pixels)
-    * 
-    * @prop {number} width
-    * @memberof Spritesheet
-    * */
-    width?: number,
-
-    /** 
-     * The height of the image (in pixels)
-     * 
-     * @prop {number} height
-     * @memberof Spritesheet
-     * */
-    height?: number
-
-    /** 
-    * Takes a width of a rectangle in the image. Equivalent to `width / framesWidth`
-    * 
-    * @prop {number} [rectWidth]
-    * @memberof Spritesheet
-    * */
-    rectWidth?: number,
-
-    /** 
-    * Takes a height of a rectangle in the image. Equivalent to `height / framesHeight`
-    * 
-    * @prop {number} [rectHeight]
-    * @memberof Spritesheet
-    * */
-    rectHeight?: number,
-
-    /** 
-    * To take the texture, start at a well defined X and Y position. Otherwise, it starts at 0,0
-    * 
-    * @prop {number} [offset]
-    * @memberof Spritesheet
-    * */
-    offset?: { x: number, y: number }
-}
-
-export type AnimationFrames = FrameOptions[][] | ((...args: any) => FrameOptions[][])
-
-export interface TexturesOptions extends TextureOptions, TransformOptions {
-    animations: AnimationFrames
-}
-
-export interface SpritesheetOptions extends TransformOptions, TextureOptions {
-    /** 
-    * Object containing all animations. 
-    * The key to the object is the name of the animation. The value is a two-dimensional array
-    * 
-    * ```ts
-    * textures: {
-    *      myanim: {
-    *         animations: [
-    *              [ { time: 0, frameX: 0, frameY: 0 } ]
-    *         ]
-    *      }
-    * }
-    * ```
-    * 
-    * The first array represents an animation group. You can put several of them together to create an animation cluster. For example, several explosions with the same spritesheet
-    * The second array represents the animation itself which will animate over time. The object indicates, over a period of time (in frame), which part of the spritesheet will be taken (`frameX`, `frameY`)
-    * 
-    * Here are the properties:
-    * 
-    * * `time`: Time in frame
-    * * `frameX`: Retrieve a frame from the spritesheet on the X-axis
-    * * `frameY`: Retrieve a frame from the spritesheet on the Y-axis
-    * * `opacity`
-    * * `pivot`
-    * * `anchor`
-    * * `rotation`
-    * * `angle`
-    * * `scale`
-    * * `skew`
-    * * `x`
-    * * `y`
-    * * `visible`
-    * * `sound`: The sound that will be played during the frame
-    * 
-    * ---
-    * **Extract Animation of Spritesheet**
-    * 
-    * Sometimes the animation is part of the image
-    * 
-    * ```ts
-    * textures: {
-    *      myanim: {
-    *          rectWidth: 64,
-    *          rectHeight: 64,
-    *          framesWidth: 10,
-    *          framesHeight: 2,
-    *          offset: {x: 0, y: 230},
-    *          sound: 'my-sound-id', // You can put a sound just for the animation
-    *          animations: [
-    *               [ { time: 0, frameX: 0, frameY: 0 } ]
-    *          ]
-    *      }
-    * }
-    * ```
-    * 
-    * Above, we can specify which part we want to recover
-    * 
-    * 1. We go to the position {0, 230} of the image (`offset`)
-    * 2. We recover cells of 64px (`rectWidth` and `rectHeight`)
-    * 3. And we get 20 cells (10 on the width, 2 on the height) (`frameX` and `frameY`)
-    * 
-    * --- 
-    * 
-    * **Advanced**
-    * 
-    * You can create an animation that will be linked to a data. For example, different animation according to a direction of the character.
-    * 
-    * Full example: 
-    * 
-    * ```ts
-    * import { Spritesheet, Animation, Direction } from '@rpgjs/client'
-    * 
-    * @Spritesheet({
-    *      id: 'chest',
-    *      image: require('./assets/chest.png'),
-    *      width: 124,
-    *      height: 61,
-    *      framesHeight: 2,
-    *      framesWidth: 4,
-    *      textures: {
-    *          [Animation.Stand]: {
-    *              animations: direction => [[ {time: 0, frameX: 3, frameY: direction == Direction.Up ? 0 : 1 } ]]
-    *          }
-    *      })
-    * })
-    * export class Chest  { }
-    * ```
-    * 
-    * > It is important to know that `Animation.Stand` animation is called if it exists. it only works in the case of an event that doesn't move. The direction is then sent
-    * 
-    * As you can see, the property contains a function that returns the array for the animation. Here, it is the direction but the parameters depend on the call of the animation. Example: 
-    * 
-    * ```ts
-    * import { Spritesheet, Animation, Direction, RpgSprite, ISpriteCharacter } from '@rpgjs/client'
-    * 
-    * @Spritesheet({
-    *      id: 'chest',
-    *      image: require('./assets/chest.png'),
-    *      width: 124,
-    *      height: 61,
-    *      framesHeight: 2,
-    *      framesWidth: 4,
-    *      textures: {
-    *          [Animation.Stand]: {
-    *              animations: str => [[ {time: 0, frameX: 3, frameY: str == 'hello' ? 0 : 1 } ]]
-    *          }
-    *      }
-    * })
-    * export class Chest implements ISpriteCharacter { 
-    *      onCharacterStand(sprite: RpgSprite) {
-    *         sprite.animation.play(Animation.Stand, ['hello'])
-    *      }
-    * }
-    * ```
-    * 
-    * @prop { { [animName: string]: { animations: Array<Array<FrameOptions>> | Function, ...other } } } [textures]
-    * @memberof Spritesheet
-    * */
-    textures?: {
-        [animationName: string]: Partial<TexturesOptions> & Pick<TexturesOptions, 'animations'>
-    }
-}
-
-type SpritesheetImageOptions = SpritesheetOptions & {
-    /** 
-     * The link to the image
-     * 
-     * > Do not use the `images` property
-     * > Remember to wrap the link to the image with the `require` function.
-     * 
-     * ```ts
-     * image: require('./assets/hero.png')
-     * ```
-     * 
-     * @prop {string} [image]
-     * @memberof Spritesheet
-     * */
-    image?: string,
-    /** 
-    * Spritesheet identifier.
-    * 
-    * > Do not use the `images` property
-    * 
-    * @prop {string} [id]
-    * @memberof Spritesheet
-    * */
-    id: string
-}
-type SpritesheetImagesOptions = SpritesheetOptions & {
-    /** 
-     * Put the different images that are concerned by the properties below.
-     * The key of the object is the identifier of the spritesheet and the value and the link to the image.
-     * 
-     * > Remember to wrap the link to the image with the `require` function.
-     * 
-     * ```ts
-     * images: {
-     *    hero: require('./assets/hero.png')
-     * }
-     * ```
-     * 
-     * @prop { { [id: string]: string } } [images]
-     * @memberof Spritesheet
-     * */
-    images?: { [id: string]: string }
-}
-
-export function Spritesheet(options: SpritesheetImageOptions)
-export function Spritesheet(options: SpritesheetImagesOptions)
-export function Spritesheet(options: SpritesheetImageOptions | SpritesheetImagesOptions) {
-    return (target: Function) => {
-        if ('images' in options) target['images'] = options.images
-        if ('id' in options) target['id'] = options.id
-        for (let key in options) {
-            target.prototype[key] = options[key]
-        }
-        return
-    }
-}

package/src/Sprite/Spritesheets.ts

@@ -1,8 +0,0 @@
-import { RpgClientEngine } from '..'
-import { _initResource } from '../Resources'
-
-export const spritesheets: Map<string, any> = new Map()
-
-export function _initSpritesheet(_spritesheets, engine: RpgClientEngine) {
-    return _initResource(spritesheets, _spritesheets, 'image', engine)
-}

package/src/Tilemap/CommonLayer.ts

@@ -1,20 +0,0 @@
-import { Layer } from "@rpgjs/tiled"
-import TileMap from './index'
-import { Container } from "pixi.js"
-
-export class CommonLayer extends Container {
-    z: number
-
-    constructor(protected layer: Layer, protected map: TileMap) {
-        super()
-        this.applyProperties()
-    }
-
-    applyProperties() {
-        this.alpha = this.layer.opacity ?? 1
-        this.visible = this.layer.visible ?? true
-        this.x = this.layer.offsetx ?? 0
-        this.y = this.layer.offsety ?? 0
-        this.z = this.layer.properties.z ?? 0
-    }
-}

package/src/Tilemap/ImageLayer.ts

@@ -1,20 +0,0 @@
-import { CommonLayer } from './CommonLayer';
-import { Texture, TilingSprite } from 'pixi.js';
-
-export default class ImageLayer extends CommonLayer {
-  applyProperties() {
-    super.applyProperties()
-    const engine = this.map['renderer']['clientEngine']
-    if (this.layer.image && this.layer.image.source && engine) {
-      const { width, height, source } = this.layer.image
-      const data = this.map.getData()
-      const texture = Texture.from(engine.getResourceUrl(source))
-      const tilingSprite = new TilingSprite(
-          texture,
-          this.layer.repeatx ? data.width * data.tilewidth : width,
-          this.layer.repeaty ? data.height * data.tileheight : height
-      )
-      this.addChild(tilingSprite)
-    }
-  }
-}

package/src/Tilemap/Tile.ts

@@ -1,80 +0,0 @@
-import { Texture, AnimatedSprite, groupD8 } from "pixi.js";
-import TileSet from "./TileSet";
-import { Tile as TiledTileClass } from '@rpgjs/tiled'
-import { CompositeTilemap } from "@pixi/tilemap";
-
-export default 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].clone())
-            });
-        } else {
-            textures.push(tileSet.textures[tile.gid - tileSet.firstgid].clone())
-        }
-
-        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/TileLayer.ts

@@ -1,142 +0,0 @@
-import Tile from './Tile';
-import { CompositeTilemap, settings, POINT_STRUCT_SIZE, Tilemap } from '@pixi/tilemap'
-import { Layer, Tile as TileClass } from '@rpgjs/tiled';
-import TileSet from './TileSet';
-import TileMap from '.';
-import { CommonLayer } from './CommonLayer';
-
-settings.use32bitIndex = true
-
-export default class TileLayer extends CommonLayer {
-    private tilemap: CompositeTilemap
-    private _tiles: any = {}
-    tiles: (TileClass | null)[]
-
-    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;
-    }
-
-    constructor(layer: Layer, private tileSets: TileSet[], map: TileMap) {
-        super(layer, map)
-    }
-
-    /** @internal */
-    createTile(x: number, y: number, options: any = {}): Tile | undefined {
-        const { real, filter } = options
-        const { width, tilewidth, tileheight } = this.map.getData()
-        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 = TileLayer.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.map.getData()
-        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.tilemap.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.tilemap.children[0] as Tilemap
-        if (!child) return null
-        return child['pointsBuf']
-    }
-
-    private addFrame(tile: Tile, x: number, y: number) {
-        const frame = this.tilemap.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
-    }
-
-    /** @internal */
-    create() {
-        this.tilemap = new CompositeTilemap()
-        const { width, height } = this.map.getData()
-        for (let y = 0; y < height; y++) {
-            for (let x = 0; x < width; x++) {
-                const tile = this.createTile(x, y)
-                if (tile) {
-                    this.addFrame(tile, x, y)
-                }
-            }
-        }
-        this.addChild(this.tilemap as any)
-    }
-}

package/src/Tilemap/TileSet.ts

@@ -1,40 +0,0 @@
-import { spritesheets } from '../Sprite/Spritesheets'
-import { TiledTileset, Tileset as TiledTilesetClass } from '@rpgjs/tiled'
-import { log } from '../Logger'
-import { Texture, BaseTexture, Rectangle } from 'pixi.js'
-
-export default class TileSet extends TiledTilesetClass {
-    private baseTexture: BaseTexture
-    public textures: Texture[] = []
-
-    constructor(tileSet: TiledTileset) {
-        super(tileSet)
-    }
-
-    /** @internal */
-    load() {
-        const spritesheet = spritesheets.get(this.name)
-        if (!spritesheet) {
-            throw log(`Impossible to find ${this.name} tileset`)
-        }
-        this.baseTexture = spritesheet.resource
-        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(
-                        this.baseTexture,
-                        new Rectangle(+x, +y, +this.tilewidth, +this.tileheight)
-                    )
-                )
-            }
-        }
-    }
-}